refactor!: rebrand Chip & ChipGroup components (#1948)

Author: snitin315

packages/blade/.storybook/react/main.ts

@@ -28,6 +28,7 @@ const config: StorybookConfig = {
     '../../src/components/Indicator/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Button/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Divider/**/*.stories.@(ts|tsx|js|jsx)',
+    '../../src/components/Chip/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Carousel/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/List/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Link/**/*.stories.@(ts|tsx|js|jsx)',

packages/blade/rebranded-components.js

@@ -13,6 +13,8 @@ const rebrandedComponents = [
   'Link',
   'Popover',
   'Counter',
+  'Chip',
+  'ChipGroup',
   'Badge',
   'Indicator',
   'IconButton',

packages/blade/src/components/Chip/AnimatedChip.native.tsx

@@ -22,8 +22,8 @@ const AnimatedChip = ({
 }: Omit<AnimatedChipProps, 'theme'>): React.ReactElement => {
   const { theme } = useTheme();
 
-  const easing = getIn(theme, chipMotionTokens.easing);
-  const duration = getIn(theme, chipMotionTokens.duration);
+  const easing = getIn(theme.motion, chipMotionTokens.easing);
+  const duration = getIn(theme.motion, chipMotionTokens.duration);
 
   const chipAnimation = useAnimatedStyle(() => {
     return {

packages/blade/src/components/Chip/AnimatedChip.web.tsx

@@ -8,8 +8,10 @@ import { makeMotionTime } from '~utils/makeMotionTime';
 import { castWebType } from '~utils';
 
 const AnimatedChip = styled(BaseBox)<AnimatedChipProps>((props) => {
-  const easing = getIn(props.theme, chipMotionTokens.easing);
-  const duration = castWebType(makeMotionTime(getIn(props.theme, chipMotionTokens.duration)));
+  const easing = getIn(props.theme.motion, chipMotionTokens.easing);
+  const duration = castWebType(
+    makeMotionTime(getIn(props.theme.motion, chipMotionTokens.duration)),
+  );
   return {
     ...getAnimatedChipStyles(props),
     width: 'fit-content',

packages/blade/src/components/Chip/Chip.stories.tsx

@@ -76,29 +76,16 @@ export default {
         },
       },
     },
-    intent: {
-      description: 'This is deprecated in favor of the `color` prop.',
-      table: {
-        category: propsCategory.CHIP,
-        type: {
-          summary: '"none" | "positive" | "negative"',
-        },
-      },
-      options: ['none', 'positive', 'negative'],
-      control: {
-        type: 'radio',
-      },
-    },
     color: {
       description:
         'Sets the color of the Chip. This overwrites the color set by the parent `ChipGroup` component',
       table: {
         category: propsCategory.CHIP,
         type: {
-          summary: '"default" | "positive" | "negative"',
+          summary: '"primary" | "positive" | "negative"',
         },
       },
-      options: ['default', 'positive', 'negative'],
+      options: ['primary', 'positive', 'negative'],
       control: {
         type: 'radio',
       },
@@ -133,5 +120,5 @@ const ChipTemplate: StoryFn<typeof ChipComponent> = ({ children, ...args }) => {
 export const Default = ChipTemplate.bind({});
 Default.storyName = 'Default';
 Default.args = {
-  color: 'default',
+  color: 'primary',
 };

packages/blade/src/components/Chip/Chip.tsx

@@ -37,7 +37,7 @@ type OnChange = ({
 }) => void;
 
 const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
-  { isDisabled, value, children, icon: Icon, intent, color, testID, ...styledProps },
+  { isDisabled, value, children, icon: Icon, color, testID, ...styledProps },
   ref,
 ) => {
   const { theme } = useTheme();
@@ -67,10 +67,7 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
       : groupProps?.defaultValue?.includes(value as string); // If multiple selection, check if value is in defaultValue array
   const useChip = groupProps?.selectionType === 'single' ? useRadio : useCheckbox;
   const _size = groupProps?.size || 'small';
-  const _intent = intent ?? groupProps?.intent;
-  // If intent is proovided and it's not none, use intent otherwise use color
-  const _color = color ?? groupProps?.color ?? 'default';
-  const chipColor = _intent && _intent !== 'none' ? _intent : _color;
+  const chipColor = color ?? groupProps?.color ?? 'primary';
 
   const handleChange: OnChange = ({ isChecked, value }) => {
     if (isChecked) {
@@ -129,13 +126,13 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
   const chipTextColor = chipColorTokens.text[textVariant];
   const chipIconColor = chipColorTokens.icon[textVariant];
 
-  let intentVariant = 'unchecked';
+  let colorVariant = 'unchecked';
   const stateVariant = _isDisabled ? 'disabled' : 'default';
   if (_isChecked && chipColor) {
-    intentVariant = chipColor;
+    colorVariant = chipColor;
   }
-  const chipBackgroundColor = chipColorTokens.background[intentVariant][stateVariant];
-  const chipBorderColor = chipColorTokens.border[intentVariant][stateVariant];
+  const chipBackgroundColor = chipColorTokens.background[colorVariant][stateVariant];
+  const chipBorderColor = chipColorTokens.border[colorVariant][stateVariant];
 
   return (
     <BaseBox
@@ -200,12 +197,7 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
                     <Icon color={chipIconColor} size={chipIconSizes[_size]} />
                   </BaseBox>
                 ) : null}
-                <Text
-                  {...chipTextSizes[_size]}
-                  type="normal"
-                  truncateAfterLines={1}
-                  color={chipTextColor}
-                >
+                <Text {...chipTextSizes[_size]} truncateAfterLines={1} color={chipTextColor}>
                   {children}
                 </Text>
               </StyledChipWrapper>