From af9a85cf5bfa289e93552b8468f2c7ab8efc9c85 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Date: Sun, 23 Jan 2022 21:07:55 +0100
Subject: [PATCH] docs(Visibility|Ref): deprecate components (#4324)

---
 docs/src/examples/addons/Ref/index.js         | 42 ++++++++++++-------
 .../examples/behaviors/Visibility/index.js    | 21 +++++++++-
 src/behaviors/Visibility/Visibility.js        |  2 +
 static.routes.js                              |  2 +-
 4 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/docs/src/examples/addons/Ref/index.js b/docs/src/examples/addons/Ref/index.js
index fad5922cc1..a5821a1393 100644
--- a/docs/src/examples/addons/Ref/index.js
+++ b/docs/src/examples/addons/Ref/index.js
@@ -1,26 +1,36 @@
 import React from 'react'
-import { Message } from 'semantic-ui-react'
+import { Message, Icon } from 'semantic-ui-react'
 
 import Types from './Types'
 
 const RefExamples = () => (
   <>
-    <Message info>
-      <p>
-        Currently, it's recommended to use <code>Ref</code> component to get
-        refs to HTML elements from Semantic UI React components as not all
-        components support native ref forwarding via{' '}
-        <code>React.forwardRef()</code>.
-      </p>
-      <p>
-        As it uses deprecated <code>ReactDOM.findDOMNode()</code> you may
-        receive warnings in React's StrictMode. We are working on it in{' '}
-        <a href='https://github.com/Semantic-Org/Semantic-UI-React/issues/3819'>
-          Semantic-Org/Semantic-UI-React#3819
-        </a>
-        .
-      </p>
+    <Message icon warning>
+      <Icon name='warning sign' />
+
+      <Message.Content>
+        <Message.Header>Deprecation notice</Message.Header>
+        <p>
+          <code>Ref</code> component is deprecated and will be removed in the
+          next major release. Please follow our{' '}
+          <a href='https://github.com/Semantic-Org/Semantic-UI-React/pull/4324'>
+            upgrade guide
+          </a>{' '}
+          to avoid breaks during upgrade to v3.
+        </p>
+        <p>
+          It's still recommended to use <code>Ref</code> component with v2 to
+          get refs to HTML elements from Semantic UI React components, but as it
+          uses deprecated <code>ReactDOM.findDOMNode()</code> you may receive
+          warnings in React's StrictMode. We are working on it in{' '}
+          <a href='https://github.com/Semantic-Org/Semantic-UI-React/issues/3819'>
+            Semantic-Org/Semantic-UI-React#3819
+          </a>
+          .
+        </p>
+      </Message.Content>
     </Message>
+
     <Types />
   </>
 )
diff --git a/docs/src/examples/behaviors/Visibility/index.js b/docs/src/examples/behaviors/Visibility/index.js
index 0cbe29bdd7..251c3879c1 100644
--- a/docs/src/examples/behaviors/Visibility/index.js
+++ b/docs/src/examples/behaviors/Visibility/index.js
@@ -1,13 +1,30 @@
 import React from 'react'
+import { Message, Icon } from 'semantic-ui-react'
 
 import Types from './Types'
 import Settings from './Settings'
 
 const VisibilityExamples = () => (
-  <div>
+  <>
+    <Message icon warning>
+      <Icon name='warning sign' />
+
+      <Message.Content>
+        <Message.Header>Deprecation notice</Message.Header>
+        <p>
+          <code>Visibility</code> component is deprecated and will be removed in
+          the next major release. Please follow our{' '}
+          <a href='https://github.com/Semantic-Org/Semantic-UI-React/pull/4324'>
+            upgrade guide
+          </a>{' '}
+          to avoid breaks during upgrade to v3.
+        </p>
+      </Message.Content>
+    </Message>
+
     <Types />
     <Settings />
-  </div>
+  </>
 )
 
 export default VisibilityExamples
diff --git a/src/behaviors/Visibility/Visibility.js b/src/behaviors/Visibility/Visibility.js
index 3a4c8a7c5f..e0c93b141c 100644
--- a/src/behaviors/Visibility/Visibility.js
+++ b/src/behaviors/Visibility/Visibility.js
@@ -13,6 +13,8 @@ import {
 
 /**
  * Visibility provides a set of callbacks for when a content appears in the viewport.
+ *
+ * @deprecated This component is deprecated and will be removed in next major release.
  */
 export default class Visibility extends Component {
   calculations = {
diff --git a/static.routes.js b/static.routes.js
index 372d31a738..ed64b1fe16 100644
--- a/static.routes.js
+++ b/static.routes.js
@@ -107,7 +107,7 @@ export default async () => {
           exampleSources,
           sidebarSections,
           displayName: 'Ref',
-          deprecated: false,
+          deprecated: true,
           seeTags: [],
         }
       },