fix(truncate): add forwardRef, use box

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

Hide file tree

Showing 3 changed files with 61 additions and 10 deletions.
diff --git a/packages/paste-core/components/truncate/package.json b/packages/paste-core/components/truncate/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/truncate/src/index.tsx b/packages/paste-core/components/truncate/src/index.tsx
@@ -1,12 +1,33 @@
-import {styled} from '@twilio-paste/styling-library';
-
-const Truncate = styled.span`
-  display: inline-block;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import {Box, BoxProps} from '@twilio-paste/box';
+
+export interface TruncateProps extends Pick<BoxProps, 'as'> {
+  children: NonNullable<React.ReactNode>;
+}
+
+const Truncate = React.forwardRef<HTMLSpanElement, TruncateProps>(({children, ...props}, ref) => {
+  return (
+    <Box
+      {...props}
+      as="span"
+      display="inline-block"
+      maxWidth="100%"
+      overflow="hidden"
+      ref={ref}
+      textOverflow="ellipsis"
+      whiteSpace="nowrap"
+    >
+      {children}
+    </Box>
+  );
+});
 Truncate.displayName = 'Truncate';
 
+if (process.env.NODE_ENV === 'development') {
+  Truncate.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+}
+
 export {Truncate};
diff --git a/packages/paste-core/components/truncate/tsconfig.build.json b/packages/paste-core/components/truncate/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"
     }
   ]
 }