chore(Ref): remove component (#4286)

* chore(Ref): remove component * fix tests
Semantic-Org · Feb 1, 2022 · 3cecf2f · 3cecf2f
1 parent 9c5c985
commit 3cecf2f
Show file tree

Hide file tree

Showing 28 changed files with 203 additions and 523 deletions.
diff --git a/docs/src/components/Sidebar/Sidebar.js b/docs/src/components/Sidebar/Sidebar.js
@@ -3,7 +3,7 @@ import _ from 'lodash/fp'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { Link } from 'react-static'
-import { Menu, Icon, Input, Ref } from 'semantic-ui-react'
+import { Menu, Icon, Input } from 'semantic-ui-react'
 
 import CarbonAd from 'docs/src/components/CarbonAd/CarbonAd'
 import Logo from 'docs/src/components/Logo/Logo'
@@ -229,16 +229,15 @@ class Sidebar extends Component {
               </Menu.Menu>
             </Menu.Item>
             <Menu.Item fitted>
-              <Ref innerRef={this.handleSearchRef}>
-                <Input
-                  fluid
-                  icon={{ name: 'filter', color: 'teal', inverted: true, bordered: true }}
-                  placeholder='Press "/" to filter components'
-                  value={query}
-                  onChange={this.handleSearchChange}
-                  onKeyDown={this.handleSearchKeyDown}
-                />
-              </Ref>
+              <Input
+                fluid
+                icon={{ name: 'filter', color: 'teal', inverted: true, bordered: true }}
+                placeholder='Press "/" to filter components'
+                ref={this.handleSearchRef}
+                value={query}
+                onChange={this.handleSearchChange}
+                onKeyDown={this.handleSearchKeyDown}
+              />
             </Menu.Item>
             {query ? this.renderSearchItems() : this.menuItemsByType}
           </Menu>

diff --git a/docs/src/examples/addons/Ref/Types/RefExampleRef.js b/docs/src/examples/addons/Ref/Types/RefExampleRef.js
diff --git a/docs/src/examples/addons/Ref/Types/RefForwardingExample.js b/docs/src/examples/addons/Ref/Types/RefForwardingExample.js
diff --git a/docs/src/examples/addons/Ref/Types/index.js b/docs/src/examples/addons/Ref/Types/index.js
diff --git a/docs/src/examples/addons/Ref/index.js b/docs/src/examples/addons/Ref/index.js
diff --git a/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js b/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js
@@ -5,7 +5,6 @@ import {
   Header,
   Image,
   Menu,
-  Ref,
   Segment,
   Sidebar,
 } from 'semantic-ui-react'
@@ -42,12 +41,10 @@ const SidebarExampleTarget = () => {
             <Menu.Item as='a'>Channels</Menu.Item>
           </Sidebar>
 
-          <Ref innerRef={segmentRef}>
-            <Segment secondary>
-              <Header as='h3'>Clickable area</Header>
-              <p>When you will click there, the sidebar will be closed.</p>
-            </Segment>
-          </Ref>
+          <Segment secondary ref={segmentRef}>
+            <Header as='h3'>Clickable area</Header>
+            <p>When you will click there, the sidebar will be closed.</p>
+          </Segment>
 
           <Segment>
             <Header as='h3'>Application Content</Header>

diff --git a/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js b/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js
@@ -1,14 +1,6 @@
 import _ from 'lodash'
 import React, { Component, createRef } from 'react'
-import {
-  Grid,
-  Header,
-  Image,
-  Rail,
-  Ref,
-  Segment,
-  Sticky,
-} from 'semantic-ui-react'
+import { Grid, Header, Image, Rail, Segment, Sticky } from 'semantic-ui-react'
 
 const Placeholder = () => <Image src='/images/wireframe/paragraph.png' />
 
@@ -19,31 +11,29 @@ export default class StickyExampleAdjacentContext extends Component {
     return (
       <Grid centered columns={3}>
         <Grid.Column>
-          <Ref innerRef={this.contextRef}>
-            <Segment>
-              {_.times(10, (i) => (
+          <Segment ref={this.contextRef}>
+            {_.times(10, (i) => (
+              <Placeholder key={i} />
+            ))}
+
+            <Rail position='left'>
+              {_.times(3, (i) => (
                 <Placeholder key={i} />
               ))}
 
-              <Rail position='left'>
-                {_.times(3, (i) => (
-                  <Placeholder key={i} />
-                ))}
-
-                <Sticky context={this.contextRef}>
-                  <Header as='h3'>Stuck Content</Header>
-                  <Image src='/images/wireframe/image.png' />
-                </Sticky>
-              </Rail>
+              <Sticky context={this.contextRef}>
+                <Header as='h3'>Stuck Content</Header>
+                <Image src='/images/wireframe/image.png' />
+              </Sticky>
+            </Rail>
 
-              <Rail position='right'>
-                <Sticky context={this.contextRef}>
-                  <Header as='h3'>Stuck Content</Header>
-                  <Image src='/images/wireframe/image.png' />
-                </Sticky>
-              </Rail>
-            </Segment>
-          </Ref>
+            <Rail position='right'>
+              <Sticky context={this.contextRef}>
+                <Header as='h3'>Stuck Content</Header>
+                <Image src='/images/wireframe/image.png' />
+              </Sticky>
+            </Rail>
+          </Segment>
         </Grid.Column>
       </Grid>
     )

diff --git a/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js b/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js
@@ -1,14 +1,6 @@
 import _ from 'lodash'
 import React, { Component, createRef } from 'react'
-import {
-  Grid,
-  Header,
-  Image,
-  Rail,
-  Ref,
-  Segment,
-  Sticky,
-} from 'semantic-ui-react'
+import { Grid, Header, Image, Rail, Segment, Sticky } from 'semantic-ui-react'
 
 const Placeholder = () => <Image src='/images/wireframe/paragraph.png' />
 
@@ -19,31 +11,29 @@ export default class StickyExamplePushing extends Component {
     return (
       <Grid centered columns={3}>
         <Grid.Column>
-          <Ref innerRef={this.contextRef}>
-            <Segment>
-              {_.times(10, (i) => (
-                <Placeholder key={i} />
-              ))}
+          <Segment ref={this.contextRef}>
+            {_.times(10, (i) => (
+              <Placeholder key={i} />
+            ))}
 
-              <Rail position='left'>
-                <Sticky context={this.contextRef} pushing>
-                  <Header as='h3'>Stuck Content</Header>
-                  <Image src='/images/wireframe/image.png' />
-                </Sticky>
-              </Rail>
+            <Rail position='left'>
+              <Sticky context={this.contextRef} pushing>
+                <Header as='h3'>Stuck Content</Header>
+                <Image src='/images/wireframe/image.png' />
+              </Sticky>
+            </Rail>
 
-              <Rail position='right'>
-                {_.times(3, (i) => (
-                  <Placeholder key={i} />
-                ))}
+            <Rail position='right'>
+              {_.times(3, (i) => (
+                <Placeholder key={i} />
+              ))}
 
-                <Sticky context={this.contextRef} pushing>
-                  <Header as='h3'>Stuck Content</Header>
-                  <Image src='/images/wireframe/image.png' />
-                </Sticky>
-              </Rail>
-            </Segment>
-          </Ref>
+              <Sticky context={this.contextRef} pushing>
+                <Header as='h3'>Stuck Content</Header>
+                <Image src='/images/wireframe/image.png' />
+              </Sticky>
+            </Rail>
+          </Segment>
         </Grid.Column>
       </Grid>
     )