From 7c712ec9eb6b0bff003b1bb902d486a0c4b390da Mon Sep 17 00:00:00 2001 From: dgreif Date: Tue, 25 May 2021 14:10:48 -0700 Subject: [PATCH 1/7] fix(ActionList): description font size and truncation --- src/ActionList/Item.tsx | 61 ++++++++++++++++++------------ src/stories/ActionList.stories.tsx | 40 +++++++++++++++++++- 2 files changed, 76 insertions(+), 25 deletions(-) diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index 8f4c5fb608d..89839e2949d 100644 --- 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,9 @@ const getItemVariant = (variant = 'default', disabled?: boolean) => { } const StyledItemContent = styled.div` - width: 100%; + display: flex; + overflow: hidden; + flex-grow: 1; ` const StyledItem = styled.div< @@ -215,6 +217,8 @@ const StyledItem = styled.div< const StyledTextContainer = styled.div<{descriptionVariant: ItemProps['descriptionVariant']}>` display: flex; + overflow: hidden; + flex-grow: 1; flex-direction: ${({descriptionVariant}) => (descriptionVariant === 'inline' ? 'row' : 'column')}; ` @@ -242,7 +246,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 +258,10 @@ const TrailingVisualContainer = styled(ColoredVisualContainer)` const DescriptionContainer = styled.span<{descriptionVariant: ItemProps['descriptionVariant']}>` color: ${get('colors.text.secondary')}; + font-size: ${get('fontSizes.0')}; margin-left: ${({descriptionVariant}) => (descriptionVariant === 'inline' ? get('space.2') : 0)}; + overflow: hidden; + flex-grow: 1; ` const MultiSelectInput = styled.input` @@ -365,27 +372,33 @@ export function Item(itemProps: Partial & {item?: ItemInput}): JSX.El )} - - {children} - {(text || description) && ( - - {text &&
{text}
} - {description && ( - {description} - )} - - )} - {(TrailingIcon || trailingText) && ( - - {trailingText &&
{trailingText}
} - {TrailingIcon && ( -
- -
- )} - - )} - + {children} + {(text || description) && ( + + {text &&
{text}
} + {description && ( + + {descriptionVariant === 'block' ? ( + description + ) : ( + + {description} + + )} + + )} + + )} + {(TrailingIcon || trailingText) && ( + + {trailingText &&
{trailingText}
} + {TrailingIcon && ( +
+ +
+ )} + + )} ) diff --git a/src/stories/ActionList.stories.tsx b/src/stories/ActionList.stories.tsx index 266b6fd997a..ddaf55f1e76 100644 --- 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 ( + <> +

Size Stress Testing

+ + + + + ) +} +SizeStressTestingStory.storyName = 'Size Stress Testing' From 7dccff8a20f937df4f4391b06ac4d72aa35f6e08 Mon Sep 17 00:00:00 2001 From: dgreif Date: Tue, 25 May 2021 14:34:14 -0700 Subject: [PATCH 2/7] fix(ActionList): truncate main text as well --- src/ActionList/Item.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index 89839e2949d..581eba58c3a 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -375,7 +375,11 @@ export function Item(itemProps: Partial & {item?: ItemInput}): JSX.El {children} {(text || description) && ( - {text &&
{text}
} + {text && ( + + {text} + + )} {description && ( {descriptionVariant === 'block' ? ( From bc329e1be7bf8454257cefae5d71c0bddc259762 Mon Sep 17 00:00:00 2001 From: Dusty Greif Date: Tue, 25 May 2021 14:34:58 -0700 Subject: [PATCH 3/7] Create sour-lamps-kick.md --- .changeset/sour-lamps-kick.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/sour-lamps-kick.md diff --git a/.changeset/sour-lamps-kick.md b/.changeset/sour-lamps-kick.md new file mode 100644 index 00000000000..773222eb15b --- /dev/null +++ b/.changeset/sour-lamps-kick.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Truncate text within ActionList Items, and use correct font size for description From e871d072972c02b2af4478135d012144799c9146 Mon Sep 17 00:00:00 2001 From: dgreif Date: Tue, 25 May 2021 14:40:52 -0700 Subject: [PATCH 4/7] fix: prioritize text visibility over description --- src/ActionList/Item.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index 581eba58c3a..0556dd67a06 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -262,6 +262,7 @@ const DescriptionContainer = styled.span<{descriptionVariant: ItemProps['descrip margin-left: ${({descriptionVariant}) => (descriptionVariant === 'inline' ? get('space.2') : 0)}; overflow: hidden; flex-grow: 1; + flex-basis: ${({descriptionVariant}) => (descriptionVariant === 'inline' ? 0 : 'auto')}; ` const MultiSelectInput = styled.input` From f946cc50aaa6075a894caff3111815a0053aa92c Mon Sep 17 00:00:00 2001 From: dgreif Date: Tue, 25 May 2021 14:52:03 -0700 Subject: [PATCH 5/7] fix: remove text truncation --- .changeset/sour-lamps-kick.md | 2 +- src/ActionList/Item.tsx | 6 +----- src/stories/ActionList.stories.tsx | 4 ++-- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/.changeset/sour-lamps-kick.md b/.changeset/sour-lamps-kick.md index 773222eb15b..491ecb9b5df 100644 --- a/.changeset/sour-lamps-kick.md +++ b/.changeset/sour-lamps-kick.md @@ -2,4 +2,4 @@ "@primer/components": patch --- -Truncate text within ActionList Items, and use correct font size for description +Correct font size and truncate for description within ActionList Items diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index 0556dd67a06..d2c1e631203 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -376,11 +376,7 @@ export function Item(itemProps: Partial & {item?: ItemInput}): JSX.El {children} {(text || description) && ( - {text && ( - - {text} - - )} + {text &&
{text}
} {description && ( {descriptionVariant === 'block' ? ( diff --git a/src/stories/ActionList.stories.tsx b/src/stories/ActionList.stories.tsx index ddaf55f1e76..d4463d6f453 100644 --- a/src/stories/ActionList.stories.tsx +++ b/src/stories/ActionList.stories.tsx @@ -335,7 +335,7 @@ export function SizeStressTestingStory(): JSX.Element { items={[ { leadingVisual: ArrowRightIcon, - text: 'Block Description', + text: 'Block Description. Long text should wrap', description: 'This description is long, but it is block so it wraps', descriptionVariant: 'block', trailingIcon: ArrowLeftIcon, @@ -351,7 +351,7 @@ export function SizeStressTestingStory(): JSX.Element { }, { leadingVisual: ArrowRightIcon, - text: 'Really long text without a description', + text: 'Really long text without a description should wrap', trailingIcon: ArrowLeftIcon, showDivider: true } From 737b976d760cd6e80ba9f7fe80755f8cde0c0b94 Mon Sep 17 00:00:00 2001 From: dgreif Date: Tue, 25 May 2021 21:24:43 -0700 Subject: [PATCH 6/7] fix: allow dividers to overflow from item content --- src/ActionList/Item.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index d2c1e631203..31f1278ce18 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -153,8 +153,9 @@ const getItemVariant = (variant = 'default', disabled?: boolean) => { const StyledItemContent = styled.div` display: flex; - overflow: hidden; + min-width: 0; flex-grow: 1; + position: relative; ` const StyledItem = styled.div< @@ -190,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')}; @@ -217,7 +219,7 @@ const StyledItem = styled.div< const StyledTextContainer = styled.div<{descriptionVariant: ItemProps['descriptionVariant']}>` display: flex; - overflow: hidden; + min-width: 0; flex-grow: 1; flex-direction: ${({descriptionVariant}) => (descriptionVariant === 'inline' ? 'row' : 'column')}; ` @@ -260,7 +262,7 @@ const DescriptionContainer = styled.span<{descriptionVariant: ItemProps['descrip color: ${get('colors.text.secondary')}; font-size: ${get('fontSizes.0')}; margin-left: ${({descriptionVariant}) => (descriptionVariant === 'inline' ? get('space.2') : 0)}; - overflow: hidden; + min-width: 0; flex-grow: 1; flex-basis: ${({descriptionVariant}) => (descriptionVariant === 'inline' ? 0 : 'auto')}; ` From eafa1b5133a86637c6316fe12b79cd84f28f2136 Mon Sep 17 00:00:00 2001 From: dgreif Date: Wed, 26 May 2021 20:59:31 -0700 Subject: [PATCH 7/7] fix: decrese line-height for description --- src/ActionList/Item.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index 31f1278ce18..6c8190bee1c 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -222,6 +222,7 @@ const StyledTextContainer = styled.div<{descriptionVariant: ItemProps['descripti 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}>` @@ -261,6 +262,9 @@ 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;