diff --git a/.changeset/cold-parrots-trade.md b/.changeset/cold-parrots-trade.md new file mode 100644 index 00000000000..5bbeab78330 --- /dev/null +++ b/.changeset/cold-parrots-trade.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +ActionList: With inline descriptions, long titles and descriptions no longer wrap. Description is truncated to keep in a single row. diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-linux.png index abc58e7d55f..7301de827ae 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-linux.png index 296383338e1..c435507273b 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-linux.png index dde2d5f7286..a161babf2aa 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-linux.png index abc58e7d55f..7301de827ae 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-linux.png index abc58e7d55f..7301de827ae 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-linux.png index a24621ccb8d..31f6bc02886 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-linux.png index 363c849ade0..5a046a6b5cd 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-linux.png index a24621ccb8d..31f6bc02886 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-linux.png index a24621ccb8d..31f6bc02886 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-dark-colorblind-linux.png new file mode 100644 index 00000000000..7f73b640a12 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-dark-dimmed-linux.png new file mode 100644 index 00000000000..335d093cc8e Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-dark-high-contrast-linux.png new file mode 100644 index 00000000000..33af3138a94 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-dark-linux.png new file mode 100644 index 00000000000..7f73b640a12 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-dark-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-dark-tritanopia-linux.png new file mode 100644 index 00000000000..7f73b640a12 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-light-colorblind-linux.png new file mode 100644 index 00000000000..92de56f42ca Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-light-high-contrast-linux.png new file mode 100644 index 00000000000..3456f52a55c Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-light-linux.png new file mode 100644 index 00000000000..92de56f42ca Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-light-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-light-tritanopia-linux.png new file mode 100644 index 00000000000..b7e486b1e8b Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Long-Titles-light-tritanopia-linux.png differ diff --git a/e2e/components/SelectPanel.test.ts b/e2e/components/SelectPanel.test.ts index da50e58b652..5fb45a3658b 100644 --- a/e2e/components/SelectPanel.test.ts +++ b/e2e/components/SelectPanel.test.ts @@ -40,6 +40,10 @@ const scenarios = matrix({ id: 'components-selectpanel-dev--with-css', name: 'With Css', }, + { + id: 'components-selectpanel-examples--with-long-titles', + name: 'With Long Titles', + }, ], }) diff --git a/packages/react/src/ActionList/ActionList.module.css b/packages/react/src/ActionList/ActionList.module.css index e82a19d16bf..2bd79c7c0f5 100644 --- a/packages/react/src/ActionList/ActionList.module.css +++ b/packages/react/src/ActionList/ActionList.module.css @@ -628,6 +628,7 @@ default block */ font-weight: var(--base-text-weight-semibold); /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */ word-break: break-word; + flex-shrink: 0; } /* inline */ @@ -640,6 +641,7 @@ default block */ & .ItemLabel { word-break: normal; + flex-shrink: 0; } &:has([data-truncate='true']) { @@ -654,6 +656,9 @@ default block */ /* line-height: calc(var(--control-medium-lineBoxHeight) - var(--base-size-2)); */ /* stylelint-disable-next-line primer/typography */ line-height: 16px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } } } diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx index 864d6e02b62..ff67d5d7e51 100644 --- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx @@ -13,6 +13,7 @@ import styles from './SelectPanel.examples.stories.module.css' import {useVirtualizer, type VirtualItem} from '@tanstack/react-virtual' import Checkbox from '../Checkbox' import Label from '../Label' +import Avatar from '../Avatar' const meta: Meta = { title: 'Components/SelectPanel/Examples', @@ -731,3 +732,50 @@ export const Virtualized = () => { ) } + +const longNamedUsers: ItemInput[] = [ + {login: 'pksjce', name: 'Pavithra Kodmad'}, + {login: 'colebemis', name: 'Cole Bemis'}, + {login: 'mperrotti', name: 'Mike Perrotti'}, + {login: 'langermank', name: 'Katie Langerman'}, + {login: 'siddharthkp', name: 'Siddharth Kshetrapal'}, + {login: 'siddharthkp', name: 'Siddharth NoMiddleName Kshetrapal'}, + {login: 'siddharth-kshetrapal', name: 'Siddharth Kshetrapal'}, + {login: 'siddharth-kshetrapal', name: 'Siddharth NoMiddleName Kshetrapal'}, +].map(user => ({ + ...user, + id: user.login, + text: user.login, + description: user.name, + leadingVisual: () => , +})) + +export const WithLongTitles = () => { + const [selected, setSelected] = useState([]) + const [filter, setFilter] = useState('') + const filteredItems = longNamedUsers.filter(item => item.text?.toLowerCase().startsWith(filter.toLowerCase())) + + const [open, setOpen] = useState(false) + + return ( + + Assignees + ( + + )} + open={open} + onOpenChange={setOpen} + items={filteredItems} + selected={selected} + onSelectedChange={setSelected} + onFilterChange={setFilter} + width="medium" + /> + + ) +}