fix(label): add forwardRef

BREAKING CHANGE: component is now using fowardRef
twilio-labs · Dec 17, 2020 · d5e2cac · d5e2cac
1 parent a9dfa0e
commit d5e2cac
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 44 deletions.
diff --git a/packages/paste-core/components/label/__tests__/__snapshots__/label.test.tsx.snap b/packages/paste-core/components/label/__tests__/__snapshots__/label.test.tsx.snap
@@ -134,17 +134,18 @@ exports[`Label render should render with required 1`] = `
 }
 
 .emotion-0 {
-  position: absolute;
-  margin: -1px;
-  border: 0;
-  padding: 0;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
+  box-sizing: border-box;
+  border: none;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -0.125rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
   text-transform: none;
   white-space: nowrap;
+  width: 1px;
 }
 
 <div
@@ -168,6 +169,10 @@ exports[`Label render should render with required 1`] = `
         >
           <span
             class="emotion-0"
+            clip="rect(0 0 0 0)"
+            height="1px"
+            overflow="hidden"
+            width="1px"
           >
             Required: 
           </span>

diff --git a/packages/paste-core/components/label/src/Label.tsx b/packages/paste-core/components/label/src/Label.tsx
@@ -36,44 +36,47 @@ export const RequiredDot: React.FC = props => {
   );
 };
 
-const Label: React.FC<LabelProps> = ({as, marginBottom, required, disabled, children, variant, ...props}) => {
-  let textColor = 'colorText' as TextColor;
-  if (disabled && variant === 'inverse') {
-    textColor = 'colorTextInverseWeak';
-  } else if (disabled) {
-    textColor = 'colorTextWeak';
-  } else if (variant === 'inverse') {
-    textColor = 'colorTextInverse';
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({as, marginBottom, required, disabled, children, variant, ...props}, ref) => {
+    let textColor = 'colorText' as TextColor;
+    if (disabled && variant === 'inverse') {
+      textColor = 'colorTextInverseWeak';
+    } else if (disabled) {
+      textColor = 'colorTextWeak';
+    } else if (variant === 'inverse') {
+      textColor = 'colorTextInverse';
+    }
+    return (
+      <Box
+        {...safelySpreadBoxProps(props)}
+        as={as}
+        // Setting a bottom border here to prevent Bootstrap's bottom border
+        // on legend in Console.
+        borderBottomWidth="borderWidth0"
+        display="block"
+        marginBottom={marginBottom || 'space20'}
+        paddingLeft="space0"
+        paddingRight="space0"
+        textTransform="none"
+        ref={ref}
+      >
+        <Flex as="span" vAlignContent="center">
+          {required ? <RequiredDot /> : null}
+          <Text
+            as="span"
+            fontSize="fontSize30"
+            fontWeight="fontWeightSemibold"
+            lineHeight="lineHeight30"
+            color={textColor}
+            cursor={disabled ? 'not-allowed' : 'pointer'}
+          >
+            {children}
+          </Text>
+        </Flex>
+      </Box>
+    );
   }
-  return (
-    <Box
-      {...safelySpreadBoxProps(props)}
-      as={as}
-      // Setting a bottom border here to prevent Bootstrap's bottom border
-      // on legend in Console.
-      borderBottomWidth="borderWidth0"
-      display="block"
-      marginBottom={marginBottom || 'space20'}
-      paddingLeft="space0"
-      paddingRight="space0"
-      textTransform="none"
-    >
-      <Flex as="span" vAlignContent="center">
-        {required ? <RequiredDot /> : null}
-        <Text
-          as="span"
-          fontSize="fontSize30"
-          fontWeight="fontWeightSemibold"
-          lineHeight="lineHeight30"
-          color={textColor}
-          cursor={disabled ? 'not-allowed' : 'pointer'}
-        >
-          {children}
-        </Text>
-      </Flex>
-    </Box>
-  );
-};
+);
 
 Label.displayName = 'Label';