style(Tag): Update Tag colors

Updates tags to use the correct color tokens.
Codecademy · Aug 5, 2024 · c6bc852 · c6bc852
1 parent 1fedce5
commit c6bc852
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 85 deletions.
diff --git a/packages/gamut/src/Form/SelectDropdown/styles.ts b/packages/gamut/src/Form/SelectDropdown/styles.ts
@@ -174,6 +174,7 @@ export const getMemoizedStyles = (
       ...tagBaseStyles,
       cursor: 'pointer',
       background: theme.colors.background,
+      borderRadius: '4px',
     }),
     multiValueLabel: (provided) => ({
       ...provided,

diff --git a/packages/gamut/src/Tag/elements.tsx b/packages/gamut/src/Tag/elements.tsx
@@ -1,17 +1,18 @@
-import {
-  Background,
-  css,
-  system,
-  theme,
-  variant,
-} from '@codecademy/gamut-styles';
+import { MiniDeleteIcon } from '@codecademy/gamut-icons';
+import { css, system, theme, variant } from '@codecademy/gamut-styles';
 import { variance } from '@codecademy/variance';
 import styled from '@emotion/styled';
 
 import { Box } from '../Box';
-import { ButtonBase } from '../ButtonBase';
+import { IconButton } from '../Button';
 import { Selectors } from '../ButtonBase/ButtonBase';
-import { colorVariants, dismissSharedStyles, tagBorderRadius } from './styles';
+import {
+  colorVariants,
+  dismissSharedStyles,
+  iconButtonOverrides,
+  tagBorderRadius,
+  tagWrapperStates,
+} from './styles';
 import { BaseTagProps } from './types';
 
 export const tagProps = variance.compose(
@@ -23,10 +24,9 @@ export const tagProps = variance.compose(
 export const Outline = styled(Box)(
   css({
     // this is a bit of a hack as we don't have access to focus-visible from this component.  if you are not properly dismissing your tags you may see this primary colored outline after clicking X, but otherwise you should never hit this behavior.
-
     borderRadius: tagBorderRadius,
-    width: 'fit-content',
-    maxWidth: '100%',
+    width: '100%',
+    maxWidth: 'fit-content',
     '&:focus-within': {
       outline: `2px solid ${theme.colors.primary}`,
       outlineOffset: '2px',
@@ -37,38 +37,44 @@ export const Outline = styled(Box)(
   })
 );
 
-export const TagWrapper = styled(Background)<BaseTagProps>(
+export const TagLabelWrapper = styled(Box)<BaseTagProps>(
   tagProps,
-  colorVariants
+  colorVariants,
+  tagWrapperStates
 );
 
-export const DismissButton = styled(ButtonBase)(
+const hoverAndFocus = `${Selectors.HOVER}, ${Selectors.FOCUS}`;
+
+export const DismissButton = styled(IconButton)(
   variant({
     defaultVariant: 'default',
+    prop: 'tagType',
     base: {
       ...dismissSharedStyles,
-      border: 1,
-      borderColor: 'transparent',
-      borderRadiusRight: tagBorderRadius,
-      color: 'currentColor',
+      ...iconButtonOverrides,
+      color: 'background',
+      border: 'none',
+      borderRadius: `0 ${tagBorderRadius} ${tagBorderRadius} 0`,
+      width: 12,
+      [hoverAndFocus]: {
+        color: 'background',
+        bg: 'secondary-hover',
+      },
     },
     variants: {
       default: {
-        [Selectors.HOVER]: {
-          bg: 'background-hover',
-        },
-        [Selectors.FOCUS]: {
-          bg: 'background-selected',
-        },
+        bg: 'secondary',
       },
       grey: {
-        [Selectors.HOVER]: {
-          bg: 'navy-600',
-        },
-        [Selectors.FOCUS]: {
-          bg: 'navy-700',
-        },
+        bg: 'text-secondary',
       },
     },
   })
 );
+
+export const StyledMiniDeleteIcon = styled(MiniDeleteIcon)(
+  css({
+    width: 12,
+    color: 'inherit',
+  })
+);
diff --git a/packages/gamut/src/Tag/index.tsx b/packages/gamut/src/Tag/index.tsx
@@ -1,10 +1,14 @@
-import { MiniDeleteIcon } from '@codecademy/gamut-icons';
-import { useCurrentMode } from '@codecademy/gamut-styles';
 import * as React from 'react';
 
+import { FlexBox } from '../Box';
 import { Text } from '../Typography';
-import { DismissButton, Outline, TagWrapper } from './elements';
-import { tagBg, tagLabelFontSize, tagLabelPadding } from './styles';
+import {
+  DismissButton,
+  Outline,
+  StyledMiniDeleteIcon,
+  TagLabelWrapper,
+} from './elements';
+import { tagLabelFontSize, tagLabelPadding } from './styles';
 import { TagProps } from './types';
 
 export const Tag: React.FC<TagProps> = ({
@@ -14,30 +18,37 @@ export const Tag: React.FC<TagProps> = ({
   onDismiss,
   ...rest
 }) => {
-  const mode = useCurrentMode();
-  const trueVariant = !variant ? 'default' : variant;
   return (
     <Outline {...rest}>
-      <TagWrapper bg={tagBg[mode][trueVariant]} variant={trueVariant}>
-        <Text
-          as="span"
-          fontSize={tagLabelFontSize}
-          lineHeight={1 as any}
-          px={tagLabelPadding}
-          truncate="ellipsis"
-          truncateLines={1}
-        >
-          {children}
-        </Text>
+      <FlexBox
+        flexDirection="row"
+        {...rest}
+        width={readonly ? 'fit-content' : 'calc(100% - 24px)'}
+      >
+        <TagLabelWrapper variant={variant} readOnly={readonly}>
+          <Text
+            as="span"
+            fontSize={tagLabelFontSize}
+            lineHeight={1 as any}
+            px={tagLabelPadding}
+            truncate="ellipsis"
+            truncateLines={1}
+          >
+            {children}
+          </Text>
+        </TagLabelWrapper>
         {!readonly && (
           <DismissButton
             aria-label={`Dismiss ${children} Tag`}
             onClick={onDismiss || undefined}
-          >
-            <MiniDeleteIcon size={12} color="inherit" />
-          </DismissButton>
+            tip="Remove"
+            tipProps={{ placement: 'floating' }}
+            icon={StyledMiniDeleteIcon}
+            tagType={variant}
+            width="100%"
+          />
         )}
-      </TagWrapper>
+      </FlexBox>
     </Outline>
   );
 };
diff --git a/packages/gamut/src/Tag/styles.tsx b/packages/gamut/src/Tag/styles.tsx
@@ -1,47 +1,58 @@
-import { variant } from '@codecademy/gamut-styles';
+import { states, variant } from '@codecademy/gamut-styles';
+
+import { ButtonSelectors } from '../ButtonBase/ButtonBase';
 
 export const tagLabelPadding = 8;
 export const tagLabelFontSize = 14;
 export const tagBorderRadius = '4px';
 
 export const tagBaseStyles = {
-  display: 'flex',
   alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: tagBorderRadius,
+  borderRadiusLeft: `${tagBorderRadius}`,
+  display: 'flex',
   height: '24px',
-  width: 'fit-content',
+  justifyContent: 'center',
   maxWidth: '100%',
+  width: 'fit-content',
 };
 
 export const colorVariants = variant({
   defaultVariant: 'default',
-  base: tagBaseStyles,
+  base: {
+    ...tagBaseStyles,
+    color: 'background',
+  },
   variants: {
     default: {
-      color: 'text',
+      bg: 'secondary',
     },
     grey: {
-      color: 'white',
+      bg: 'text-secondary',
     },
   },
 });
 
-export const tagBg = {
-  light: {
-    grey: 'navy-500',
-    default: 'navy-900',
-  },
-  dark: {
-    grey: 'white-500',
-    default: 'white',
+export const tagWrapperStates = states({
+  readOnly: {
+    borderRadius: tagBorderRadius,
   },
-} as const;
+});
 
 export const dismissSharedStyles = {
-  display: 'flex',
   alignItems: 'center',
-  justifyContent: 'center',
+  display: 'flex',
   height: '100%',
+  justifyContent: 'center',
   minWidth: '24px',
 };
+
+export const iconButtonOverrides = {
+  // These pseudo elements add an extra slightly opaque border on hover/focus
+  '::before, ::after': {
+    display: 'none',
+  },
+  // This removes a black solid outline on focus
+  [ButtonSelectors.OUTLINE_FOCUS_VISIBLE]: {
+    opacity: 0,
+  },
+};
diff --git a/packages/gamut/src/Tag/types.tsx b/packages/gamut/src/Tag/types.tsx
@@ -3,11 +3,12 @@ import { ComponentProps } from 'react';
 
 import { WithChildrenProp } from '..';
 import { DismissButton, tagProps } from './elements';
-import { colorVariants } from './styles';
+import { colorVariants, tagWrapperStates } from './styles';
 
 export interface BaseTagProps
   extends StyleProps<typeof tagProps>,
     StyleProps<typeof colorVariants>,
+    StyleProps<typeof tagWrapperStates>,
     WithChildrenProp {}
 export interface ReadOnlyTagProps extends BaseTagProps {
   /**

diff --git a/packages/styleguide/stories/Atoms/Tag.examples.tsx b/packages/styleguide/stories/Atoms/Tag.examples.tsx
@@ -60,17 +60,17 @@ export const TagExample: React.FC = () => {
         >
           A lovely list of tags
         </Text>
-        <FlexBox flexWrap="wrap" maxWidth="100%">
+        <FlexBox>
           {tagArray.map((tag) => (
-            <Tag
-              key={`${tag}`}
-              onDismiss={() => {
-                removeItemHandler(tagArray, tag);
-              }}
-              m={8}
-            >
-              {tag}
-            </Tag>
+            <Box m={8} key={`${tag}`}>
+              <Tag
+                onDismiss={() => {
+                  removeItemHandler(tagArray, tag);
+                }}
+              >
+                {tag}
+              </Tag>
+            </Box>
           ))}
         </FlexBox>
       </Background>

diff --git a/packages/styleguide/stories/Atoms/Tag.stories.mdx b/packages/styleguide/stories/Atoms/Tag.stories.mdx
@@ -16,7 +16,7 @@ import { TagExample } from './Tag.examples.tsx';
     design: {
       type: 'figma',
       url:
-        'https://www.figma.com/file/a0xaVwpkrXpOReMJ3ArqCe/Badges?node-id=1%3A40',
+        'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=46539-40954',
     },
   }}
   args={{ children: 'Tag' }}
@@ -28,15 +28,16 @@ Tags are compact, dynamic elements that support user inputs, selections, and act
 
 ## Variants
 
-Tags have a ColorModed `default` variant and a `grey` variant as well as a `readonly` variant
+Tags have `default` and `gray` color variants that work in color mode. You can also omit the dimiss button by passing in the `readonly` prop.
 
 <Canvas>
   <Story name="Tag Variants">
     {(args) => (
       <FlexBox center justifyContent="space-around">
         <Tag {...args} onDismiss={(e) => e.target.blur()} />
         <Tag {...args} onDismiss={(e) => e.target.blur()} variant="grey" />
-        <Tag {...args} readonly /> <Tag {...args} readonly variant="grey" />
+        <Tag {...args} readonly />
+        <Tag {...args} readonly variant="grey" />
       </FlexBox>
     )}
   </Story>