fix(ActionList): description font size and truncation (#1253)

primer · May 27, 2021 · 25d88c4 · 25d88c4 · vercel · May 27, 2021
1 parent 5e0e1cc
commit 25d88c4
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 26 deletions.
diff --git a/.changeset/sour-lamps-kick.md b/.changeset/sour-lamps-kick.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Correct font size and truncate for description within ActionList Items
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
@@ -2,7 +2,7 @@ import {CheckIcon, IconProps} from '@primer/octicons-react'
 import React, {useCallback} from 'react'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
-import Flex from '../Flex'
+import Truncate from '../Truncate'
 import {ItemInput} from './List'
 import styled from 'styled-components'
 import {StyledHeader} from './Header'
@@ -152,7 +152,10 @@ const getItemVariant = (variant = 'default', disabled?: boolean) => {
 }
 
 const StyledItemContent = styled.div`
-  width: 100%;
+  display: flex;
+  min-width: 0;
+  flex-grow: 1;
+  position: relative;
 `
 
 const StyledItem = styled.div<
@@ -188,7 +191,8 @@ const StyledItem = styled.div<
     ${StyledItemContent}::before {
       content: ' ';
       display: block;
-      position: relative;
+      position: absolute;
+      width: 100%;
       top: -7px;
       // NB: This 'get' won’t execute if it’s moved into the arrow function below.
       border: 0 solid ${get('colors.selectMenu.borderSecondary')};
@@ -215,7 +219,10 @@ const StyledItem = styled.div<
 
 const StyledTextContainer = styled.div<{descriptionVariant: ItemProps['descriptionVariant']}>`
   display: flex;
+  min-width: 0;
+  flex-grow: 1;
   flex-direction: ${({descriptionVariant}) => (descriptionVariant === 'inline' ? 'row' : 'column')};
+  align-items: baseline;
 `
 
 const BaseVisualContainer = styled.div<{variant?: ItemProps['variant']; disabled?: boolean}>`
@@ -242,7 +249,7 @@ const LeadingVisualContainer = styled(ColoredVisualContainer)``
 
 const TrailingVisualContainer = styled(ColoredVisualContainer)`
   color: ${({variant, disabled}) => getItemVariant(variant, disabled).annotationColor}};
-  margin-left: auto;
+  margin-left: ${get('space.2')};
   margin-right: 0;
   div:nth-child(2) {
     margin-left: ${get('space.2')};
@@ -254,7 +261,14 @@ const TrailingVisualContainer = styled(ColoredVisualContainer)`
 
 const DescriptionContainer = styled.span<{descriptionVariant: ItemProps['descriptionVariant']}>`
   color: ${get('colors.text.secondary')};
+  font-size: ${get('fontSizes.0')};
+  // TODO: When rem-based spacing on a 4px scale lands, replace
+  // hardcoded '16px' with '${get('lh-12')}'.
+  line-height: 16px;
   margin-left: ${({descriptionVariant}) => (descriptionVariant === 'inline' ? get('space.2') : 0)};
+  min-width: 0;
+  flex-grow: 1;
+  flex-basis: ${({descriptionVariant}) => (descriptionVariant === 'inline' ? 0 : 'auto')};
 `
 
 const MultiSelectInput = styled.input`
@@ -365,27 +379,33 @@ export function Item(itemProps: Partial<ItemProps> & {item?: ItemInput}): JSX.El
         </LeadingVisualContainer>
       )}
       <StyledItemContent>
-        <Flex>
-          {children}
-          {(text || description) && (
-            <StyledTextContainer descriptionVariant={descriptionVariant}>
-              {text && <div>{text}</div>}
-              {description && (
-                <DescriptionContainer descriptionVariant={descriptionVariant}>{description}</DescriptionContainer>
-              )}
-            </StyledTextContainer>
-          )}
-          {(TrailingIcon || trailingText) && (
-            <TrailingVisualContainer variant={variant} disabled={disabled}>
-              {trailingText && <div>{trailingText}</div>}
-              {TrailingIcon && (
-                <div>
-                  <TrailingIcon />
-                </div>
-              )}
-            </TrailingVisualContainer>
-          )}
-        </Flex>
+        {children}
+        {(text || description) && (
+          <StyledTextContainer descriptionVariant={descriptionVariant}>
+            {text && <div>{text}</div>}
+            {description && (
+              <DescriptionContainer descriptionVariant={descriptionVariant}>
+                {descriptionVariant === 'block' ? (
+                  description
+                ) : (
+                  <Truncate title={description} inline={true} maxWidth="100%">
+                    {description}
+                  </Truncate>
+                )}
+              </DescriptionContainer>
+            )}
+          </StyledTextContainer>
+        )}
+        {(TrailingIcon || trailingText) && (
+          <TrailingVisualContainer variant={variant} disabled={disabled}>
+            {trailingText && <div>{trailingText}</div>}
+            {TrailingIcon && (
+              <div>
+                <TrailingIcon />
+              </div>
+            )}
+          </TrailingVisualContainer>
+        )}
       </StyledItemContent>
     </StyledItem>
   )

diff --git a/src/stories/ActionList.stories.tsx b/src/stories/ActionList.stories.tsx
@@ -44,10 +44,11 @@ const meta: Meta = {
 }
 export default meta
 
-const ErsatzOverlay = styled.div`
+const ErsatzOverlay = styled.div<{maxWidth?: string}>`
   border-radius: 12px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(149, 157, 165, 0.2);
   overflow: hidden;
+  max-width: ${({maxWidth}) => maxWidth || 'none'};
 `
 
 export function ActionsStory(): JSX.Element {
@@ -324,3 +325,40 @@ export function CustomItemChildren(): JSX.Element {
   )
 }
 CustomItemChildren.storyName = 'Custom Item Children'
+
+export function SizeStressTestingStory(): JSX.Element {
+  return (
+    <>
+      <h1>Size Stress Testing</h1>
+      <ErsatzOverlay maxWidth="300px">
+        <ActionList
+          items={[
+            {
+              leadingVisual: ArrowRightIcon,
+              text: 'Block Description.  Long text should wrap',
+              description: 'This description is long, but it is block so it wraps',
+              descriptionVariant: 'block',
+              trailingIcon: ArrowLeftIcon,
+
+              showDivider: true
+            },
+            {
+              leadingVisual: ArrowRightIcon,
+              text: 'Inline Description',
+              description: 'This description gets truncated because it is inline',
+              trailingIcon: ArrowLeftIcon,
+              showDivider: true
+            },
+            {
+              leadingVisual: ArrowRightIcon,
+              text: 'Really long text without a description should wrap',
+              trailingIcon: ArrowLeftIcon,
+              showDivider: true
+            }
+          ]}
+        />
+      </ErsatzOverlay>
+    </>
+  )
+}
+SizeStressTestingStory.storyName = 'Size Stress Testing'