diff --git a/.changeset/deep-impalas-wave.md b/.changeset/deep-impalas-wave.md new file mode 100644 index 00000000000..4a6d5de55cf --- /dev/null +++ b/.changeset/deep-impalas-wave.md @@ -0,0 +1,5 @@ +--- +'@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 abc58e7d55f..0ab014fbe3a 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..800c76f703d 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..b9fb89e9c69 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..0ab014fbe3a 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..0ab014fbe3a 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..63dfc9a5977 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..5059d67cc92 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..63dfc9a5977 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..63dfc9a5977 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 f8007fb3e63..9cc0d09eef7 100644 --- a/packages/react/src/ActionList/ActionList.module.css +++ b/packages/react/src/ActionList/ActionList.module.css @@ -628,27 +628,23 @@ default block */ /* inline */ &:where([data-description-variant='inline']) { position: relative; + display: block; word-break: normal; - flex-direction: row; - align-items: baseline; - gap: var(--base-size-8); + /* stylelint-disable-next-line primer/typography */ + line-height: normal; & .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; } } }