docs(Visibility|Ref): deprecate components

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 />
   </>
 )

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

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 = {

static.routes.js

@@ -107,7 +107,7 @@ export default async () => {
           exampleSources,
           sidebarSections,
           displayName: 'Ref',
-          deprecated: false,
+          deprecated: true,
           seeTags: [],
         }
       },