chore(Segment): use React.forwardRef() (#4238)

Author: layershifter

src/elements/Segment/Segment.js

@@ -20,7 +20,7 @@ import SegmentInline from './SegmentInline'
 /**
  * A segment is used to create a grouping of related content.
  */
-function Segment(props) {
+const Segment = React.forwardRef(function SegmentInner(props, ref) {
   const {
     attached,
     basic,
@@ -76,15 +76,16 @@ function Segment(props) {
   const ElementType = getElementType(Segment, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
 Segment.Group = SegmentGroup
 Segment.Inline = SegmentInline
 
+Segment.displayName = 'Segment'
 Segment.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/elements/Segment/SegmentGroup.js

@@ -15,7 +15,7 @@ import {
 /**
  * A group of segments can be formatted to appear together.
  */
-function SegmentGroup(props) {
+const SegmentGroup = React.forwardRef(function SegmentGroupInner(props, ref) {
   const { children, className, compact, content, horizontal, piled, raised, size, stacked } = props
 
   const classes = cx(
@@ -33,12 +33,13 @@ function SegmentGroup(props) {
   const ElementType = getElementType(SegmentGroup, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+SegmentGroup.displayName = 'SegmentGroup'
 SegmentGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/elements/Segment/SegmentInline.js

@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A placeholder segment can be inline.
  */
-function SegmentInline(props) {
+const SegmentInline = React.forwardRef(function SegmentInlineInner(props, ref) {
   const { children, className, content } = props
   const classes = cx('inline', className)
   const rest = getUnhandledProps(SegmentInline, props)
   const ElementType = getElementType(SegmentInline, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+SegmentInline.displayName = 'SegmentInline'
 SegmentInline.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

test/specs/elements/Segment/Segment-test.js

@@ -8,6 +8,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Segment', () => {
   common.isConformant(Segment)
+  common.forwardsRef(Segment)
   common.hasSubcomponents(Segment, [SegmentGroup, SegmentInline])
   common.hasUIClassName(Segment)
   common.rendersChildren(Segment)

test/specs/elements/Segment/SegmentGroup-test.js

@@ -6,6 +6,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('SegmentGroup', () => {
   common.isConformant(SegmentGroup)
+  common.forwardsRef(SegmentGroup)
   common.hasUIClassName(SegmentGroup)
   common.rendersChildren(SegmentGroup)
 

test/specs/elements/Segment/SegmentInline-test.js

@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('SegmentInline', () => {
   common.isConformant(SegmentInline)
+  common.forwardsRef(SegmentInline)
   common.rendersChildren(SegmentInline)
 })