fix(screen-reader-only): add forwardRef, use box

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

Hide file tree

Showing 3 changed files with 66 additions and 18 deletions.
diff --git a/packages/paste-core/components/screen-reader-only/package.json b/packages/paste-core/components/screen-reader-only/package.json
@@ -26,12 +26,24 @@
     "compile:dev": "rollup -c --environment NODE_ENV:development"
   },
   "peerDependencies": {
+    "@twilio-paste/box": "^2.11.13",
+    "@twilio-paste/design-tokens": "^6.3.7",
+    "@twilio-paste/icons": "^3.10.3",
+    "@twilio-paste/style-props": "^1.8.13",
     "@twilio-paste/styling-library": "^0.2.0",
+    "@twilio-paste/theme": "^4.0.1",
+    "@twilio-paste/types": "^3.0.30",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },
   "devDependencies": {
-    "@twilio-paste/styling-library": "^0.2.0"
+    "@twilio-paste/box": "^2.11.13",
+    "@twilio-paste/design-tokens": "^6.3.7",
+    "@twilio-paste/icons": "^3.10.3",
+    "@twilio-paste/style-props": "^1.8.13",
+    "@twilio-paste/styling-library": "^0.2.0",
+    "@twilio-paste/theme": "^4.0.1",
+    "@twilio-paste/types": "^3.0.30"
   }
 }
diff --git a/packages/paste-core/components/screen-reader-only/src/index.tsx b/packages/paste-core/components/screen-reader-only/src/index.tsx
@@ -1,22 +1,40 @@
-import {styled} from '@twilio-paste/styling-library';
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import {Box, BoxProps} from '@twilio-paste/box';
 
-export interface ScreenReaderOnlyProps {
-  // as prop isn't typed correctly from styled package https://github.com/emotion-js/emotion/issues/1137
-  as?: keyof JSX.IntrinsicElements;
+export interface ScreenReaderOnlyProps extends Pick<BoxProps, 'as'> {
+  children: NonNullable<React.ReactNode>;
 }
 
-const ScreenReaderOnly = styled.span<ScreenReaderOnlyProps>`
-  position: absolute;
-  margin: -1px;
-  border: 0;
-  padding: 0;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  text-transform: none;
-  white-space: nowrap;
-`;
-
+const ScreenReaderOnly = React.forwardRef<HTMLElement, ScreenReaderOnlyProps>(
+  ({as = 'span', children, ...props}, ref) => {
+    return (
+      <Box
+        {...props}
+        as={as}
+        border="none"
+        clip="rect(0 0 0 0)"
+        height="1px"
+        margin="spaceNegative10"
+        overflow="hidden"
+        padding="space0"
+        position="absolute"
+        ref={ref}
+        textTransform="none"
+        whiteSpace="nowrap"
+        width="1px"
+      >
+        {children}
+      </Box>
+    );
+  }
+);
 ScreenReaderOnly.displayName = 'ScreenReaderOnly';
+
+if (process.env.NODE_ENV === 'development') {
+  ScreenReaderOnly.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+}
+
 export {ScreenReaderOnly};
diff --git a/packages/paste-core/components/screen-reader-only/tsconfig.build.json b/packages/paste-core/components/screen-reader-only/tsconfig.build.json
@@ -8,8 +8,26 @@
     "src/**/*"
   ],
   "references": [
+    {
+      "path": "../../primitives/box"
+    },
+    {
+      "path": "../../../paste-design-tokens"
+    },
+    {
+      "path": "../../../paste-icons"
+    },
+    {
+      "path": "../../../paste-style-props"
+    },
     {
       "path": "../../../paste-libraries/styling"
+    },
+    {
+      "path": "../../../paste-theme"
+    },
+    {
+      "path": "../../../paste-types"
     }
   ]
 }