diff --git a/.changeset/deep-impalas-wave.md b/.changeset/deep-impalas-wave.md deleted file mode 100644 index 4a6d5de55cf..00000000000 --- a/.changeset/deep-impalas-wave.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -Change actionlist item inline description styling from flex to block to fix overflow 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 0ab014fbe3a..abc58e7d55f 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 800c76f703d..296383338e1 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 b9fb89e9c69..dde2d5f7286 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 0ab014fbe3a..abc58e7d55f 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 0ab014fbe3a..abc58e7d55f 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 63dfc9a5977..a24621ccb8d 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 5059d67cc92..363c849ade0 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 63dfc9a5977..a24621ccb8d 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 63dfc9a5977..a24621ccb8d 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/packages/react/src/ActionList/ActionList.module.css b/packages/react/src/ActionList/ActionList.module.css index 9cc0d09eef7..f8007fb3e63 100644 --- a/packages/react/src/ActionList/ActionList.module.css +++ b/packages/react/src/ActionList/ActionList.module.css @@ -628,23 +628,27 @@ default block */ /* inline */ &:where([data-description-variant='inline']) { position: relative; - display: block; word-break: normal; - /* stylelint-disable-next-line primer/typography */ - line-height: normal; + flex-direction: row; + align-items: baseline; + gap: var(--base-size-8); & .ItemLabel { word-break: normal; } + &:has([data-truncate='true']) { + & .ItemLabel { + flex: 1 0 auto; + } + } + & .Description { - margin-left: var(--base-size-8); /* adjust line-height for baseline alignment */ /* line-height: calc(var(--control-medium-lineBoxHeight) - var(--base-size-2)); */ /* stylelint-disable-next-line primer/typography */ line-height: 16px; - overflow-wrap: break-word; } } }