Remove Box from Chip

RocketChat · Jul 11, 2020 · f542153 · f542153
1 parent f857598
commit f542153
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 20 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/Box/styles.scss b/packages/fuselage/src/components/Box/styles.scss
@@ -2,11 +2,13 @@
   @extend %box;
 
   &--full {
+    @extend %box--animated;
     @extend %box--full;
 
     &::before,
     &::after {
       @extend %box;
+      @extend %box--animated;
       @extend %box--full;
     }
   }

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-box rcx-chip')}
     disabled={!onDismiss}
     onClick={onDismiss}
-    {...props}
+    {...rest}
   >
     <Margins all='x4'>
       {thumbUrl && renderThumb && renderThumb({ url: thumbUrl })}
-      {children && <span className='rcx-chip__text'>{children}</span>}
+      {children && <span className='rcx-box 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,20 @@
 @use '../../styles/typography.scss';
 
 .rcx-chip {
-  @include clickable;
-  @include typography.use-font-scale('p1');
-
+  @extend %box--animated;
+  @extend %box--full;
   @extend %button--secondary;
 
   display: flex;
+  overflow: hidden;
   align-items: center;
+
   min-height: lengths.size(28);
+
   border-width: 0;
-  overflow: hidden;
+
+  @include clickable;
+  @include typography.use-font-scale('p1');
 
   &.disabled,
   &:disabled {
@@ -22,11 +26,13 @@
   }
 
   &__text {
+    white-space: nowrap;
+    letter-spacing: inherit;
+
     color: inherit;
+
     font: inherit;
-    letter-spacing: inherit;
 
     @include typography.use-text-ellipsis;
-    white-space: nowrap;
   }
 }
diff --git a/packages/fuselage/src/styles/primitives/box.scss b/packages/fuselage/src/styles/primitives/box.scss
@@ -13,15 +13,17 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-%box--full {
-  margin: lengths.margin('none');
-  padding: lengths.padding('none');
-
+%box--animated {
   transition: all 230ms;
 
   @media (prefers-reduced-motion) {
     transition: none;
   }
+}
+
+%box--full {
+  margin: lengths.margin('none');
+  padding: lengths.padding('none');
 
   border-width: lengths.border-width('none');
   border-style: solid;