From f1d33a84190302b1d1dc3b64982a2fb744440e05 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Mon, 15 Apr 2024 12:04:08 +0200 Subject: [PATCH 1/5] refactor: :recycle: Change how gap is solved --- packages/css/react-css-modules.css | 8 ++------ .../src/components/Accordion/Accordion.module.css | 12 ++---------- 2 files changed, 4 insertions(+), 16 deletions(-) diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css index ddb357500a..f3770c1385 100644 --- a/packages/css/react-css-modules.css +++ b/packages/css/react-css-modules.css @@ -918,6 +918,8 @@ border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle); box-sizing: border-box; + display: flex; + gap: 1px; } .fds-accordion-border-a8137c3d { @@ -1015,12 +1017,6 @@ border-top: 0; } - .fds-accordion-first-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d, - .fds-accordion-second-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d, - .fds-accordion-third-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d { - border-top: 1px solid var(--fds-semantic-border-on_inverted-default); - } - @media (hover: hover) and (pointer: fine) { .fds-accordion-accordionButton-a8137c3d:hover .fds-accordion-expandIcon-a8137c3d { background-color: rgba(0 0 0 / 0.1); diff --git a/packages/react/src/components/Accordion/Accordion.module.css b/packages/react/src/components/Accordion/Accordion.module.css index 7ed84a97b2..c005cf871f 100644 --- a/packages/react/src/components/Accordion/Accordion.module.css +++ b/packages/react/src/components/Accordion/Accordion.module.css @@ -5,6 +5,8 @@ border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle); box-sizing: border-box; + display: flex; + gap: 1px; } .border { @@ -98,16 +100,6 @@ background-color: var(--fds-semantic-surface-action-first-no_fill-hover); } - .border .item:first-child .accordionButton { - border-top: 0; - } - - .first .item:not(:first-child) .accordionButton, - .second .item:not(:first-child) .accordionButton, - .third .item:not(:first-child) .accordionButton { - border-top: 1px solid var(--fds-semantic-border-on_inverted-default); - } - @media (hover: hover) and (pointer: fine) { .accordionButton:hover .expandIcon { background-color: rgba(0 0 0 / 0.1); From 2720a68c6b4fc31eff22fb223ef6bf8ffaaffccf Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Mon, 15 Apr 2024 12:08:06 +0200 Subject: [PATCH 2/5] remove top border for accordion button --- packages/react/src/components/Accordion/Accordion.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/components/Accordion/Accordion.module.css b/packages/react/src/components/Accordion/Accordion.module.css index c005cf871f..d52d870c2b 100644 --- a/packages/react/src/components/Accordion/Accordion.module.css +++ b/packages/react/src/components/Accordion/Accordion.module.css @@ -38,7 +38,6 @@ text-align: left; cursor: pointer; border: none; - border-top: 1px solid var(--fds-semantic-border-neutral-subtle); padding: var(--fds-spacing-4); } From f2c47a1de8c80a621bd3ce54cee326d5fc682eb9 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Mon, 15 Apr 2024 12:09:06 +0200 Subject: [PATCH 3/5] fix direction --- packages/react/src/components/Accordion/Accordion.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/components/Accordion/Accordion.module.css b/packages/react/src/components/Accordion/Accordion.module.css index d52d870c2b..71e2dda023 100644 --- a/packages/react/src/components/Accordion/Accordion.module.css +++ b/packages/react/src/components/Accordion/Accordion.module.css @@ -6,6 +6,7 @@ border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle); box-sizing: border-box; display: flex; + flex-direction: column; gap: 1px; } From 41d724e236dbe322e96f82b48e41d5ad7ef673f9 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Mon, 15 Apr 2024 13:11:42 +0200 Subject: [PATCH 4/5] Replace "gap" color token --- .../src/components/Accordion/Accordion.module.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/Accordion/Accordion.module.css b/packages/react/src/components/Accordion/Accordion.module.css index 71e2dda023..193381fa36 100644 --- a/packages/react/src/components/Accordion/Accordion.module.css +++ b/packages/react/src/components/Accordion/Accordion.module.css @@ -5,9 +5,6 @@ border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle); box-sizing: border-box; - display: flex; - flex-direction: column; - gap: 1px; } .border { @@ -39,6 +36,7 @@ text-align: left; cursor: pointer; border: none; + border-top: 1px solid var(--fds-semantic-border-neutral-subtle); padding: var(--fds-spacing-4); } @@ -100,6 +98,16 @@ background-color: var(--fds-semantic-surface-action-first-no_fill-hover); } + .border .item:first-child .accordionButton { + border-top: 0; + } + + .first .item:not(:first-child) .accordionButton, + .second .item:not(:first-child) .accordionButton, + .third .item:not(:first-child) .accordionButton { + border-top: 1px solid var(--fds-semantic-surface-neutral-default); + } + @media (hover: hover) and (pointer: fine) { .accordionButton:hover .expandIcon { background-color: rgba(0 0 0 / 0.1); From 176dbb190691da7f841ce118c5d64549a3f627dc Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Mon, 15 Apr 2024 13:13:38 +0200 Subject: [PATCH 5/5] update css file --- packages/css/react-css-modules.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css index f3770c1385..4a60bea925 100644 --- a/packages/css/react-css-modules.css +++ b/packages/css/react-css-modules.css @@ -918,8 +918,6 @@ border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle); box-sizing: border-box; - display: flex; - gap: 1px; } .fds-accordion-border-a8137c3d { @@ -1017,6 +1015,12 @@ border-top: 0; } + .fds-accordion-first-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d, + .fds-accordion-second-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d, + .fds-accordion-third-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d { + border-top: 1px solid var(--fds-semantic-surface-neutral-default); + } + @media (hover: hover) and (pointer: fine) { .fds-accordion-accordionButton-a8137c3d:hover .fds-accordion-expandIcon-a8137c3d { background-color: rgba(0 0 0 / 0.1);