Remove Box from Chip

RocketChat · Jul 9, 2020 · 6808855 · 6808855
1 parent 78d5728
commit 6808855
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 14 deletions.
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Chip_With_thumb.png b/packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Chip_With_thumb.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Data_Display_Chip_With_thumb.png b/packages/fuselage/.loki/reference/chrome_laptop_Data_Display_Chip_With_thumb.png
diff --git a/packages/fuselage/src/components/Chip/index.js b/packages/fuselage/src/components/Chip/index.js
@@ -1,7 +1,9 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
+import { prependClassName } from '../../helpers/prependClassName';
 import { Avatar } from '../Avatar';
-import { Box } from '../Box';
+import { withBoxStyling } from '../Box/withBoxStyling';
 import { Icon } from '../Icon';
 import Margins from '../Margins';
 
@@ -10,29 +12,39 @@ const defaultRenderDismissSymbol = () => <Icon name='cross' size='x16' />;
 
 const Chip = ({
   children,
+  className,
   thumbUrl,
   onClick,
   onMouseDown,
   renderThumb = defaultRenderThumb,
   renderDismissSymbol = defaultRenderDismissSymbol,
-  ...props
+  ...rest
 }) => {
   const onDismiss = onClick || onMouseDown;
 
-  return <Box
-    rcx-chip
-    is='button'
+  return <button
     type='button'
+    className={prependClassName(className, 'rcx-chip')}
     disabled={!onDismiss}
     onClick={onDismiss}
-    {...props}
+    {...rest}
   >
     <Margins all='x4'>
       {thumbUrl && renderThumb && renderThumb({ url: thumbUrl })}
       {children && <span className='rcx-chip__text'>{children}</span>}
       {onDismiss && renderDismissSymbol && renderDismissSymbol()}
     </Margins>
-  </Box>;
+  </button>;
 };
 
-export default Chip;
+if (process.env.NODE_ENV !== 'production') {
+  Chip.displayName = 'Chip';
+
+  Chip.propTypes = {
+    thumbUrl: PropTypes.string,
+    renderThumb: PropTypes.func,
+    renderDismissSymbol: PropTypes.func,
+  };
+}
+
+export default withBoxStyling(Chip);
diff --git a/packages/fuselage/src/components/Chip/stories.mdx b/packages/fuselage/src/components/Chip/stories.mdx
@@ -35,7 +35,7 @@ import { Box, Chip, Margins } from '../..';
 
 <Preview>
   <Story name='With thumb' decorators={[
-    (storyFn) => <Box display='flex' margins='-x4'>
+    (storyFn) => <Box display='flex' margin='-x4'>
       <Margins all='x4'>
         {storyFn()}
       </Margins>

diff --git a/packages/fuselage/src/components/Chip/styles.scss b/packages/fuselage/src/components/Chip/styles.scss
@@ -3,16 +3,19 @@
 @use '../../styles/typography.scss';
 
 .rcx-chip {
+  @extend %box;
+  @extend %button--secondary;
+
   @include clickable;
   @include typography.use-font-scale('p1');
 
-  @extend %button--secondary;
-
   display: flex;
+  overflow: hidden;
   align-items: center;
+
   min-height: lengths.size(28);
+
   border-width: 0;
-  overflow: hidden;
 
   &.disabled,
   &:disabled {
@@ -23,12 +26,13 @@
 
   &__text {
     @extend %normal;
+    white-space: nowrap;
+    letter-spacing: inherit;
 
     color: inherit;
+
     font: inherit;
-    letter-spacing: inherit;
 
     @include typography.use-text-ellipsis;
-    white-space: nowrap;
   }
 }