Merge branch 'main' into fix/dialog-add-granular-padding-control

Frontify · Dec 17, 2024 · c976b6e · c976b6e
2 parents 5a17192 + 0068c39
commit c976b6e
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 10 deletions.
diff --git a/.changeset/short-wombats-crash.md 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
@@ -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
@@ -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
@@ -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
@@ -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] {