chore(display-pill-group): update design for v2 (#2515)

twilio-labs · Jul 7, 2022 · 90b0191 · 90b0191
1 parent c378136
commit 90b0191
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 63 deletions.
diff --git a/.changeset/serious-ears-shave.md b/.changeset/serious-ears-shave.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/display-pill-group': patch
+'@twilio-paste/core': patch
+---
+
+[Display Pill Group] minor updates to the design.
diff --git a/packages/paste-core/components/display-pill-group/__tests__/index.spec.tsx b/packages/paste-core/components/display-pill-group/__tests__/index.spec.tsx
@@ -5,7 +5,8 @@ import {CustomizationProvider} from '@twilio-paste/customization';
 // @ts-ignore typescript doesn't like js imports
 import axe from '../../../../../.jest/axe-helper';
 import {DisplayPillGroup, DisplayPill} from '../src';
-import {Basic, CustomDisplayPillGroup} from '../stories/index.stories';
+import {Basic} from '../stories/index.stories';
+import {CustomDisplayPillGroup} from '../stories/customization.stories';
 
 describe('DisplayPillGroup', () => {
   // Verifies that the correct aria attributes and semantics are met

diff --git a/packages/paste-core/components/display-pill-group/src/DisplayPill.tsx b/packages/paste-core/components/display-pill-group/src/DisplayPill.tsx
@@ -34,7 +34,7 @@ export const DisplayPill = React.forwardRef<HTMLAnchorElement, DisplayPillProps>
           as={props.href ? 'a' : 'div'}
           alignItems="center"
           backgroundColor="colorBackgroundStrong"
-          borderRadius="borderRadius10"
+          borderRadius="borderRadiusPill"
           color="colorText"
           columnGap="space20"
           cursor={props.href ? 'pointer' : 'default'}
@@ -48,10 +48,9 @@ export const DisplayPill = React.forwardRef<HTMLAnchorElement, DisplayPillProps>
           _hover={{
             textDecoration: 'none',
           }}
-          _focusVisible={{
-            backgroundColor: 'colorBackgroundPrimaryWeakest',
+          _focus={{
             boxShadow: 'shadowFocus',
-            color: 'colorTextLinkStronger',
+            textDecoration: 'none',
           }}
         >
           {props.children}

diff --git a/packages/paste-core/components/display-pill-group/src/DisplayPillGroup.tsx b/packages/paste-core/components/display-pill-group/src/DisplayPillGroup.tsx
@@ -28,8 +28,8 @@ export const DisplayPillGroup = React.forwardRef<HTMLUListElement, DisplayPillGr
         padding="space0"
         display="flex"
         flexWrap="wrap"
-        rowGap="space30"
-        columnGap="space30"
+        rowGap="space20"
+        columnGap="space20"
       >
         {props.children}
       </Box>

diff --git a/packages/paste-core/components/display-pill-group/stories/customization.stories.tsx b/packages/paste-core/components/display-pill-group/stories/customization.stories.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import {CustomizationProvider} from '@twilio-paste/customization';
+import {CalendarIcon} from '@twilio-paste/icons/esm/CalendarIcon';
+import {DisplayPillGroup} from '../src/DisplayPillGroup';
+import {DisplayPill} from '../src/DisplayPill';
+
+export const CustomDisplayPillGroup: React.FC = () => {
+  return (
+    <CustomizationProvider
+      baseTheme="default"
+      theme={{
+        textColors: {colorTextLink: 'red'},
+        fonts: {fontFamilyText: 'arial'},
+      }}
+      elements={{
+        DISPLAY_PILL_GROUP: {
+          margin: 'space40',
+        },
+        DISPLAY_PILL: {
+          backgroundColor: 'colorBackgroundNew',
+          color: 'colorText',
+          padding: 'space40',
+        },
+      }}
+    >
+      <DisplayPillGroup data-testid="display-pill-group" aria-label="Your favorite sports:">
+        <DisplayPill
+          data-testid="display-pill-anchor"
+          onFocus={() => {
+            console.log('Focused Tennis!');
+          }}
+          onBlur={() => {
+            console.log('Blurred Tennis!');
+          }}
+          href="https://google.com"
+        >
+          <CalendarIcon color="colorTextIcon" decorative size="sizeIcon10" />
+          Tennis
+        </DisplayPill>
+        <DisplayPill data-testid="display-pill-standard">Football</DisplayPill>
+        <DisplayPill href="/">Baseball</DisplayPill>
+        <DisplayPill>Basketball</DisplayPill>
+        <DisplayPill>Soccer</DisplayPill>
+      </DisplayPillGroup>
+    </CustomizationProvider>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  title: 'Components/Display Pill Group/Customization',
+  component: DisplayPill,
+};
diff --git a/packages/paste-core/components/display-pill-group/stories/index.stories.tsx b/packages/paste-core/components/display-pill-group/stories/index.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {Box} from '@twilio-paste/box';
-import {CustomizationProvider} from '@twilio-paste/customization';
 import {CalendarIcon} from '@twilio-paste/icons/esm/CalendarIcon';
+import {Avatar} from '@twilio-paste/avatar';
 import {DisplayPillGroup} from '../src/DisplayPillGroup';
 import {DisplayPill} from '../src/DisplayPill';
 
@@ -18,11 +18,14 @@ export const Basic: React.FC = () => {
         }}
         href="https://google.com"
       >
-        <CalendarIcon decorative size="sizeIcon10" />
+        <CalendarIcon color="colorTextIcon" decorative size="sizeIcon10" />
         Tennis
       </DisplayPill>
       <DisplayPill data-testid="display-pill-standard">Football</DisplayPill>
-      <DisplayPill href="/">Baseball</DisplayPill>
+      <DisplayPill href="/">
+        <Avatar size="sizeIcon10" name="avatar example" src="./avatars/avatar4.png" />
+        Baseball
+      </DisplayPill>
       <DisplayPill>Basketball</DisplayPill>
       <DisplayPill>Soccer</DisplayPill>
     </DisplayPillGroup>
@@ -43,58 +46,19 @@ export const OverflowWrapping: React.FC = () => {
           }}
           href="https://google.com"
         >
-          <CalendarIcon decorative size="sizeIcon10" />
+          <CalendarIcon color="colorTextIcon" decorative size="sizeIcon10" />
           Tennis
         </DisplayPill>
         <DisplayPill data-testid="display-pill-standard">Football</DisplayPill>
         <DisplayPill href="/">Baseball</DisplayPill>
         <DisplayPill>Basketball</DisplayPill>
-        <DisplayPill>Basketball and Volleyball and Swimming and Jumping</DisplayPill>
-        <DisplayPill>Soccer</DisplayPill>
-      </DisplayPillGroup>
-    </Box>
-  );
-};
-
-export const CustomDisplayPillGroup: React.FC = () => {
-  return (
-    <CustomizationProvider
-      baseTheme="default"
-      theme={{
-        textColors: {colorTextLink: 'red'},
-        fonts: {fontFamilyText: 'arial'},
-      }}
-      elements={{
-        DISPLAY_PILL_GROUP: {
-          margin: 'space40',
-        },
-        DISPLAY_PILL: {
-          backgroundColor: 'colorBackgroundNew',
-          color: 'colorText',
-          padding: 'space40',
-        },
-      }}
-    >
-      <DisplayPillGroup data-testid="display-pill-group" aria-label="Your favorite sports:">
-        <DisplayPill
-          data-testid="display-pill-anchor"
-          onFocus={() => {
-            console.log('Focused Tennis!');
-          }}
-          onBlur={() => {
-            console.log('Blurred Tennis!');
-          }}
-          href="https://google.com"
-        >
-          <CalendarIcon decorative size="sizeIcon10" />
-          Tennis
+        <DisplayPill>
+          <Avatar size="sizeIcon10" name="portsball" />
+          Basketball and Volleyball and Swimming and Jumping
         </DisplayPill>
-        <DisplayPill data-testid="display-pill-standard">Football</DisplayPill>
-        <DisplayPill href="/">Baseball</DisplayPill>
-        <DisplayPill>Basketball</DisplayPill>
         <DisplayPill>Soccer</DisplayPill>
       </DisplayPillGroup>
-    </CustomizationProvider>
+    </Box>
   );
 };
 

diff --git a/packages/paste-website/src/assets/images/avatar4.png b/packages/paste-website/src/assets/images/avatar4.png
diff --git a/packages/paste-website/src/pages/components/display-pill-group/index.mdx b/packages/paste-website/src/pages/components/display-pill-group/index.mdx
@@ -8,6 +8,7 @@ slug: /components/display-pill-group/
 import {graphql} from 'gatsby';
 import {Box} from '@twilio-paste/box';
 import {Paragraph} from '@twilio-paste/paragraph';
+import {Avatar} from '@twilio-paste/avatar';
 import {DisplayPill, DisplayPillGroup} from '@twilio-paste/display-pill-group';
 import Changelog from '@twilio-paste/display-pill-group/CHANGELOG.md';
 import {CalendarIcon} from '@twilio-paste/icons/esm/CalendarIcon';
@@ -70,14 +71,17 @@ export const pageQuery = graphql`
 
 <content>
 
-<LivePreview scope={{DisplayPill, DisplayPillGroup, CalendarIcon}}>
+<LivePreview scope={{DisplayPill, DisplayPillGroup, CalendarIcon, Avatar}}>
   {`<DisplayPillGroup aria-label="Your favorite sports:">
   <DisplayPill href="https://google.com">
-    <CalendarIcon decorative size="sizeIcon10" />
+    <CalendarIcon color="colorTextIcon" decorative size="sizeIcon10" />
     Tennis
   </DisplayPill>
   <DisplayPill>Football</DisplayPill>
-  <DisplayPill href="/">Baseball</DisplayPill>
+  <DisplayPill href="#/">
+    <Avatar size="sizeIcon10" name="Baseball avatar" src="https://avatars.githubusercontent.com/u/1592327?v=4" />
+    Baseball
+  </DisplayPill>
   <DisplayPill>Basketball</DisplayPill>
   <DisplayPill>Soccer</DisplayPill>
 </DisplayPillGroup>`}
@@ -112,7 +116,7 @@ Display Pills can be linked, or unlinked by passing an `href` prop to the Displa
 
 When provided with an `href` the `DisplayPill` will render itself as an HTML Anchor element, and will respond to any anchor based events and accept any event handlers.
 
-<LivePreview scope={{DisplayPill, DisplayPillGroup, CalendarIcon}}>
+<LivePreview scope={{DisplayPill, DisplayPillGroup, CalendarIcon, Avatar}}>
   {`<DisplayPillGroup aria-label="Your favorite sports:">
   <DisplayPill
     onFocus={() => {
@@ -123,11 +127,14 @@ When provided with an `href` the `DisplayPill` will render itself as an HTML Anc
     }}
     href="https://google.com"
   >
-    <CalendarIcon decorative size="sizeIcon10" />
+    <CalendarIcon color="colorTextIcon" decorative size="sizeIcon10" />
     Tennis
   </DisplayPill>
   <DisplayPill>Football</DisplayPill>
-  <DisplayPill href="/">Baseball</DisplayPill>
+  <DisplayPill href="#/">
+    <Avatar size="sizeIcon10" name="Baseball avatar" src="https://avatars.githubusercontent.com/u/1592327?v=4" />
+    Baseball
+  </DisplayPill>
   <DisplayPill>Basketball</DisplayPill>
   <DisplayPill>Soccer</DisplayPill>
 </DisplayPillGroup>`}
@@ -145,10 +152,18 @@ When provided with an `href` the `DisplayPill` will render itself as an HTML Anc
 </DoDont>
 
 <DoDont>
-  <Do title="Do" body="Only pass DisplayPill as a direct descendent of a DisplayPillGroup." />
+  <Do title="Do" body="Only provide the DisplayPill component as a child to DisplayPillGroup." />
+  <Dont
+    title="Don't"
+    body="Don’t pass DisplayPillGroup any other component type, and do not wrap DisplayPill in any other component of DOM element."
+  />
+</DoDont>
+
+<DoDont>
+  <Do title="Do" body="Give icons in DisplayPill the 'colorTextIcon' color." />
   <Dont
     title="Don't"
-    body="Don’t pass DisplayPillGroup any other component type, and do not wrap DisplayPill in any other component of DOM element"
+    body="Don’t forget to pass the 'colorTextIcon' color and don't provide other colors to icons in DisplayPill."
   />
 </DoDont>
 
@@ -181,7 +196,7 @@ export const Basic = () => {
         }}
         href="https://google.com"
       >
-        <CalendarIcon decorative size="sizeIcon10" />
+        <CalendarIcon color="colorTextIcon" decorative size="sizeIcon10" />
         Tennis
       </DisplayPill>
       <DisplayPill>Football</DisplayPill>