feat(chip): style experimental chip (#472)

* feat(chip): add basic styling * feat(chip): remove cross icon --------- Co-authored-by: Lena Rashkovan <lena.rashkovan@free-now.com>
freenowtech · Sep 20, 2024 · 7439ed2 · 7439ed2
1 parent 7cd8623
commit 7439ed2
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 96 deletions.
diff --git a/src/components/experimental/Chip/Chip.tsx b/src/components/experimental/Chip/Chip.tsx
@@ -1,84 +1,69 @@
-import React, { type ComponentPropsWithoutRef, type ComponentType, type ReactElement } from 'react';
+import React, { type ReactElement } from 'react';
 import styled from 'styled-components';
-import { MarginProps } from 'styled-system';
-import { theme } from '../../../essentials/experimental/theme';
+import { Button as BaseButton, ButtonProps as ButtonBaseProps } from 'react-aria-components';
 import { get } from '../../../utils/experimental/themeGet';
+import { getSemanticValue } from '../../../essentials/experimental';
 
-import { Text } from '../Text/Text';
-import PlusIcon from '../../../icons/actions/PlusIcon';
-import XCrossCircleIcon from '../../../icons/actions/XCrossCircleIcon';
+import { textStyles } from '../Text/Text';
 
-import type { IconProps } from '../../../icons';
-
-interface ChipProps extends ComponentPropsWithoutRef<'button'>, MarginProps {
-    /**
-     * The text
-     */
-    label: string;
+interface ChipProps extends ButtonBaseProps {
     /**
      * Toggle active state
      */
     isActive?: boolean;
-    /**
-     * Icon to be shown on the start
-     */
-    Icon?: ComponentType<IconProps>;
-    /**
-     * Controls if the Chip can be dismissed
-     */
-    deletable: boolean;
 }
 
-const Container = styled.div.attrs({ theme })<{ isActive: boolean }>`
+const Button = styled(BaseButton)<{ isActive: boolean }>`
+    position: relative;
+
+    border: none;
+    outline: none;
+    border-radius: ${get('radii.4')};
+    padding: ${get('space.2')} ${get('space.3')};
+    color: ${props => (props.isActive ? getSemanticValue('on-interactive-container') : getSemanticValue('on-surface'))};
+    background-color: ${props =>
+        props.isActive ? getSemanticValue('interactive-container') : getSemanticValue('surface-variant')};
+
     display: inline-flex;
     align-items: center;
+    gap: ${get('space.1')};
 
     cursor: pointer;
 
-    border-radius: ${get('radii.3')};
-    padding: ${get('space.2')} ${get('space.3')};
+    &::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        content: '';
+        border-radius: inherit;
+        opacity: 0;
+        transition: opacity ease 200ms;
+    }
 
-    color: ${
-        props =>
-            props.isActive
-                ? 'hsla(343, 70%, 22%, 1)' // --sys-color-on-interactive-container, #5F1127
-                : 'hsla(0, 6%, 11%, 1)' // --sys-color-on-surface, #1E1A1A
-    };
-    background-color: ${
-        props =>
-            props.isActive
-                ? 'hsla(350, 46%, 95%, 1)' // --sys-color-interactive-container
-                : 'hsla(0, 6%, 94%, 1)' // --sys-color-surface-container
-    };
+    &[data-hovered]::before {
+        opacity: 0.16;
+        background-color: currentColor;
+    }
 
-    &:hover {
-        background-color: ${
-            props =>
-                props.isActive
-                    ? 'hsla(343, 70%, 22%, 0.16)' // --sys-color-on-interactive-container, #5F1127
-                    : 'hsla(0, 6%, 11%, 0.16)' // --sys-color-on-surface, #1E1A1A;
-        };
+    &[data-focused] {
+        outline: ${getSemanticValue('accent')} solid 0.125rem;
+    }
+
+    &[data-disabled] {
+        opacity: 0.38;
     }
-`;
 
-const Spacer = styled.div.attrs({ theme })`
-    display: inline-block;
-    margin-right: ${get('space.1')}rem;
+    ${textStyles.variants.label1}
 `;
 
-function Chip({ label, isActive = false, Icon = PlusIcon, deletable = false }: ChipProps): ReactElement {
+function Chip({ children, isActive = false, ...props }: ChipProps): ReactElement {
     return (
-        <Container isActive={isActive}>
-            <>
-                {Icon && <Icon size={20} />}
-                <Spacer />
-                <Text variant="label1">{label}</Text>
-                <Spacer />
-                {deletable && (
-                    <XCrossCircleIcon size={20} color={isActive ? 'hsl(343, 70%, 22%)' : 'hsl(0, 6%, 38%)'} />
-                )}
-            </>
-        </Container>
+        <Button isActive={isActive} {...props}>
+            {/* Button expects a single child */}
+            <>{children}</>
+        </Button>
     );
 }
 

diff --git a/src/components/experimental/Chip/docs/Chip.stories.tsx b/src/components/experimental/Chip/docs/Chip.stories.tsx
@@ -1,26 +1,20 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 
 import { Chip } from '../Chip';
-import PlusIcon from '../../../../icons/actions/PlusIcon';
-import FilterIcon from '../../../../icons/actions/FilterIcon';
+import { PlusIcon, XCrossCircleIcon } from '../../../../icons';
+import { getSemanticValue } from '../../../../essentials/experimental/cssVariables';
 
 const meta: Meta = {
     title: 'Experimental/Components/Chip',
     component: Chip,
-    argTypes: {
-        icon: {
-            description: 'Icon',
-            control: 'select',
-            options: ['filterIcon', 'plusIcon'],
-            mapping: {
-                filterIcon: FilterIcon,
-                plusIcon: PlusIcon
-            }
-        }
+    parameters: {
+        layout: 'centered'
     },
+    argTypes: {},
     args: {
-        label: 'Add one item',
-        icon: 'plusIcon'
+        children: 'Label'
     }
 };
 
@@ -29,3 +23,31 @@ export default meta;
 type Story = StoryObj<typeof Chip>;
 
 export const Default: Story = {};
+
+export const Active: Story = {
+    args: {
+        isActive: true
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        isDisabled: true
+    }
+};
+
+export const WithIcons: Story = {
+    args: {
+        children: (
+            <>
+                <PlusIcon size={20} />
+                Add one item
+                <XCrossCircleIcon
+                    size={20}
+                    color={getSemanticValue('on-surface-variant')}
+                    onClick={action('Remove chip')}
+                />
+            </>
+        )
+    }
+};
diff --git a/src/components/experimental/Chip/docs/Chip.storybook.mdx b/src/components/experimental/Chip/docs/Chip.storybook.mdx
diff --git a/src/essentials/experimental/theme.ts b/src/essentials/experimental/theme.ts
@@ -27,7 +27,6 @@ interface ExperimentalFontWeights {
 interface ExperimentalTheme extends DefaultTheme {
     lineHeights: string[];
     fontWeights: ExperimentalFontWeights;
-    chips: any;
 }
 
 const theme: ExperimentalTheme = {
@@ -74,13 +73,7 @@ const theme: ExperimentalTheme = {
         `1.75rem`, // 2 - 28px
         `2.25rem`, // 3 - 36px,
         `3.625rem` // 4 - 58px,
-    ],
-    chips: {
-        default: {
-            color: 'hsla(0, 6%, 11%, 1)', // --sys-color-on-surface
-            backgroundColor: 'hsla(0, 6%, 94%, 1)' // --sys-color-surface-container,
-        }
-    }
+    ]
 };
 
 /**