diff --git a/.changeset/short-wombats-crash.md b/.changeset/short-wombats-crash.md new file mode 100644 index 0000000000..f8250289d7 --- /dev/null +++ b/.changeset/short-wombats-crash.md @@ -0,0 +1,5 @@ +--- +"@frontify/fondue-components": patch +--- + +feat: align dropdown colors with design diff --git a/.changeset/wet-otters-press.md b/.changeset/wet-otters-press.md new file mode 100644 index 0000000000..9bbdba09fe --- /dev/null +++ b/.changeset/wet-otters-press.md @@ -0,0 +1,5 @@ +--- +"@frontify/fondue-components": patch +--- + +fix(`Button`): buttons within table cells are overflowing container diff --git a/packages/components/src/components/Button/styles/buttonStyles.ts b/packages/components/src/components/Button/styles/buttonStyles.ts index 7a1d24b931..4ab35b426e 100644 --- a/packages/components/src/components/Button/styles/buttonStyles.ts +++ b/packages/components/src/components/Button/styles/buttonStyles.ts @@ -5,7 +5,7 @@ import { sv } from '#/utilities/styleUtilities'; export const buttonStyles = sv({ base: - 'tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium ' + + 'tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium tw-box-border ' + `${FOCUS_OUTLINE}`, variants: { disabled: { diff --git a/packages/components/src/components/Dropdown/__tests__/Dropdown.ct.tsx b/packages/components/src/components/Dropdown/__tests__/Dropdown.ct.tsx index 0b18afb90a..6eb655dad0 100644 --- a/packages/components/src/components/Dropdown/__tests__/Dropdown.ct.tsx +++ b/packages/components/src/components/Dropdown/__tests__/Dropdown.ct.tsx @@ -172,12 +172,12 @@ test('should open submenu by keyboard', async ({ mount, page }) => { await page.keyboard.press('ArrowDown'); await page.keyboard.press('ArrowDown'); await page.keyboard.press('ArrowDown'); - await expect(page.getByTestId(DROPDOWN_SUB_TRIGGER_TEST_ID)).toHaveCSS('background-color', 'rgb(66, 71, 71)'); + await expect(page.getByTestId(DROPDOWN_SUB_TRIGGER_TEST_ID)).toHaveCSS('background-color', 'rgb(241, 241, 241)'); await page.keyboard.press('ArrowRight'); await expect(page.getByTestId(DROPDOWN_SUB_CONTENT_TEST_ID)).toBeVisible(); await page.keyboard.press('ArrowDown'); await expect(page.getByTestId(DROPDOWN_SUB_TRIGGER_TEST_ID)).toHaveCSS('background-color', 'rgb(241, 241, 241)'); - await expect(page.getByTestId(DROPDOWN_ITEM_TEST_ID)).toHaveCSS('background-color', 'rgb(66, 71, 71)'); + await expect(page.getByTestId(DROPDOWN_ITEM_TEST_ID)).toHaveCSS('background-color', 'rgb(241, 241, 241)'); await page.keyboard.press('Enter'); expect(onSelect.calledOnce).toBe(true); }); @@ -213,11 +213,11 @@ test('should open submenu by mouse', async ({ mount, page }) => { await page.getByTestId(DROPDOWN_TRIGGER_TEST_ID).click(); await expect(page.getByTestId(DROPDOWN_CONTENT_TEST_ID)).toBeVisible(); await page.getByTestId(DROPDOWN_SUB_TRIGGER_TEST_ID).hover(); - await expect(page.getByTestId(DROPDOWN_SUB_TRIGGER_TEST_ID)).toHaveCSS('background-color', 'rgb(66, 71, 71)'); + await expect(page.getByTestId(DROPDOWN_SUB_TRIGGER_TEST_ID)).toHaveCSS('background-color', 'rgb(241, 241, 241)'); await expect(page.getByTestId(DROPDOWN_SUB_CONTENT_TEST_ID)).toBeVisible(); await page.getByTestId(DROPDOWN_ITEM_TEST_ID).hover(); await expect(page.getByTestId(DROPDOWN_SUB_TRIGGER_TEST_ID)).toHaveCSS('background-color', 'rgb(241, 241, 241)'); - await expect(page.getByTestId(DROPDOWN_ITEM_TEST_ID)).toHaveCSS('background-color', 'rgb(66, 71, 71)'); + await expect(page.getByTestId(DROPDOWN_ITEM_TEST_ID)).toHaveCSS('background-color', 'rgb(241, 241, 241)'); await page.getByTestId(DROPDOWN_ITEM_TEST_ID).click(); expect(onSelect.calledOnce).toBe(true); }); diff --git a/packages/components/src/components/Dropdown/styles/dropdown.module.scss b/packages/components/src/components/Dropdown/styles/dropdown.module.scss index 230681fafe..7c84655ebc 100644 --- a/packages/components/src/components/Dropdown/styles/dropdown.module.scss +++ b/packages/components/src/components/Dropdown/styles/dropdown.module.scss @@ -9,14 +9,14 @@ display: block; border-radius: var(--radius); background-color: var(--base-color); - border: var(--line-width) solid var(--line-color-strong); + border: var(--line-width) solid var(--line-color); box-shadow: var(--shadow-matrix); width: 250px; overflow: auto; max-height: var(--radix-dropdown-menu-content-available-height); &:focus-within { - border-color: var(--line-color-xx-strong); + border-color: var(--line-color-x-strong); } &[data-padding='compact'] .item, @@ -52,7 +52,7 @@ text-align: start; font-size: var(--body-size-medium); line-height: var(--body-size-medium-line-height); - color: var(--text-color); + color: var(--text-color-weak); outline-style: none; &[data-state='open'] { @@ -65,8 +65,8 @@ } &[data-highlighted] { - background-color: var(--box-neutral-strong-color); - color: var(--box-neutral-strong-inverse-color); + background-color: var(--box-neutral-color); + color: var(--box-neutral-inverse-color-hover); } &[data-emphasis='danger'][data-highlighted] {