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
index 95089fb528..294f770653 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Chip_With_thumb.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Chip_With_thumb.png differ
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
index 50a8b56dba..98f12c243b 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Data_Display_Chip_With_thumb.png and b/packages/fuselage/.loki/reference/chrome_laptop_Data_Display_Chip_With_thumb.png differ
diff --git a/packages/fuselage/src/components/Chip/index.js b/packages/fuselage/src/components/Chip/index.js
index a384c4fb82..fc7dfc05ac 100644
--- 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 = () => ;
const Chip = ({
children,
+ className,
thumbUrl,
onClick,
onMouseDown,
renderThumb = defaultRenderThumb,
renderDismissSymbol = defaultRenderDismissSymbol,
- ...props
+ ...rest
}) => {
const onDismiss = onClick || onMouseDown;
- return
{thumbUrl && renderThumb && renderThumb({ url: thumbUrl })}
{children && {children}}
{onDismiss && renderDismissSymbol && renderDismissSymbol()}
- ;
+ ;
};
-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
index e12f99794b..6a4cd2a22b 100644
--- 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 '../..';
+ (storyFn) =>
{storyFn()}
diff --git a/packages/fuselage/src/components/Chip/styles.scss b/packages/fuselage/src/components/Chip/styles.scss
index 66266c288c..8eb5486eab 100644
--- 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;
}
}