From 5bee5e4851fe5180f67881b15d464a74b966c024 Mon Sep 17 00:00:00 2001 From: orest-s Date: Wed, 10 Jan 2024 17:04:02 +0200 Subject: [PATCH 1/5] fix: synced some styles with uxpin --- packages/styles/accordion.css | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/packages/styles/accordion.css b/packages/styles/accordion.css index 79fb0f8d3..f68d2a203 100644 --- a/packages/styles/accordion.css +++ b/packages/styles/accordion.css @@ -3,28 +3,32 @@ --accordion-trigger-background-color-expanded: var(--white); --accordion-trigger-text-color: var(--gray-90); --accordion-trigger-text-color-hover: var(--accent-primary); - --accordion-trigger-box-shadow-hover: var(--accent-primary); + --accordion-trigger-box-shadow-expanded: var(--accent-primary); --accordion-trigger-border-color: var(--gray-40); --accordion-trigger-icon-color: var(--gray-90); --accordion-panel-background-color: var(--white); - --accordion-panel-text-color: var(--gray-90); + --accordion-panel-text-color: var(--gray-80); --accordion-panel-border-color: var(--gray-40); --accordion-box-shadow-color: rgba(0, 0, 0, 0.15); } .cauldron--theme-dark { --accordion-trigger-background-color: var(--accent-medium); - --accordion-trigger-background-color-expanded: var(--accent-dark); - --accordion-trigger-text-color: var(--white); - --accordion-trigger-text-color-hover: var(--accent-light); - --accordion-trigger-box-shadow-hover: var(--accent-info); + --accordion-trigger-background-color-expanded: var(--accent-medium); + --accordion-trigger-text-color: var(--accent-light); + --accordion-trigger-text-color-hover: var(--white); + --accordion-trigger-box-shadow-expanded: var(--accent-info); --accordion-trigger-border-color: var(--stroke-dark); --accordion-trigger-icon-color: var(--white); --accordion-panel-background-color: var(--accent-medium); - --accordion-panel-text-color: var(--white); + --accordion-panel-text-color: var(--accent-light); --accordion-panel-border-color: var(--stroke-dark); } +.Accordion:has(.Accordion__trigger[aria-expanded='true']) { + filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.15)); +} + .Accordion > :is(h1, h2, h3, h4, h5, h6):first-of-type { all: unset; } @@ -32,38 +36,41 @@ .Accordion__trigger, button.Accordion__trigger { background-color: var(--accordion-trigger-background-color); - padding: calc(var(--space-small) - var(--space-half)); + padding: var(--space-small); width: 100%; display: flex; align-items: center; border-radius: 3px; border: 1px solid var(--accordion-trigger-border-color); font-size: var(--text-size-small); + font-weight: var(--font-weight-normal); margin-top: var(--space-small); color: var(--accordion-trigger-text-color); text-decoration: underline solid var(--accordion-trigger-text-color); } .Accordion__trigger[aria-expanded='true'] { + box-shadow: inset 5px 0 0 var(--accordion-trigger-box-shadow-expanded); border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: var(--accordion-trigger-background-color-expanded); } .Accordion__trigger:hover { - box-shadow: inset 8px 0 0 -4px var(--accordion-trigger-box-shadow-hover); color: var(--accordion-trigger-text-color-hover); transition: all 0.2s ease-in-out; text-decoration: underline solid var(--accordion-trigger-text-color-hover); } -.Accordion__trigger:hover .Icon { - color: var(--accordion-trigger-icon-color); -} - .Accordion .Icon { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.2s; + color: var(--accordion-trigger-icon-color); +} + +.Accordion .Icon svg { + height: var(--space-small); + width: var(--space-small); } .Accordion__panel { @@ -73,5 +80,4 @@ button.Accordion__trigger { border: 1px solid var(--accordion-panel-border-color); border-top: 0; border-radius: 0 0 3px 3px; - box-shadow: 0 2px 3px 0 var(--accordion-box-shadow-color); } From 93f665ca51e0d95a117cc0f01c742412e38e4bf2 Mon Sep 17 00:00:00 2001 From: orest-s Date: Wed, 10 Jan 2024 17:04:32 +0200 Subject: [PATCH 2/5] fix: changed icon to solid triangle and added it to the list --- packages/react/scripts/buildIconTypes.js | 9 +++++---- packages/react/src/components/Accordion/Accordion.tsx | 6 +++--- .../react/src/components/Icon/icons/triangle-solid.svg | 1 + 3 files changed, 9 insertions(+), 7 deletions(-) create mode 100644 packages/react/src/components/Icon/icons/triangle-solid.svg diff --git a/packages/react/scripts/buildIconTypes.js b/packages/react/scripts/buildIconTypes.js index 33a5d9441..056a7f9c5 100644 --- a/packages/react/scripts/buildIconTypes.js +++ b/packages/react/scripts/buildIconTypes.js @@ -16,7 +16,8 @@ const ICONS_WITH_DIRECTIONS = [ 'arrow-circle', 'chevron', 'chevron-double', - 'triangle' + 'triangle', + 'triangle-solid' ]; const DIRECTIONS = ['up', 'down', 'left', 'right']; @@ -36,7 +37,7 @@ for (const file of files) { const name = file.replace('.svg', ''); if (ICONS_WITH_DIRECTIONS.includes(name)) { - iconTypes.push(...DIRECTIONS.map(d => `${name}-${d}`)); + iconTypes.push(...DIRECTIONS.map((d) => `${name}-${d}`)); } else { iconTypes.push(name); } @@ -51,11 +52,11 @@ fs.writeFileSync( /** IconType represents each valid icon type. */ export type IconType = -${iconTypes.map(i => ` | '${i}'`).join('\n')}; +${iconTypes.map((i) => ` | '${i}'`).join('\n')}; /** iconTypes holds each valid icon type. */ export const iconTypes = [ -${iconTypes.map(i => ` '${i}'`).join(',\n')} +${iconTypes.map((i) => ` '${i}'`).join(',\n')} ]; `.trim() ); diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx index 86baa5158..9b71dddba 100644 --- a/packages/react/src/components/Accordion/Accordion.tsx +++ b/packages/react/src/components/Accordion/Accordion.tsx @@ -84,7 +84,7 @@ const Accordion = ({ } return ( -
+
\ No newline at end of file From ed2bab4cbc81fd59a7e2045cb5cb6636e8cedf1b Mon Sep 17 00:00:00 2001 From: orest-s <139442720+orest-s@users.noreply.github.com> Date: Tue, 23 Jan 2024 14:11:57 +0200 Subject: [PATCH 3/5] Update packages/react/src/components/Accordion/Accordion.tsx Co-authored-by: Jason --- packages/react/src/components/Accordion/Accordion.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx index 9b71dddba..2967cecc8 100644 --- a/packages/react/src/components/Accordion/Accordion.tsx +++ b/packages/react/src/components/Accordion/Accordion.tsx @@ -84,7 +84,7 @@ const Accordion = ({ } return ( -
+
Date: Tue, 23 Jan 2024 16:19:30 +0200 Subject: [PATCH 4/5] fix: changed using space for height and width and returned some variables and marked them as deprecated --- packages/styles/accordion.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/styles/accordion.css b/packages/styles/accordion.css index f68d2a203..ad7f079e0 100644 --- a/packages/styles/accordion.css +++ b/packages/styles/accordion.css @@ -10,6 +10,9 @@ --accordion-panel-text-color: var(--gray-80); --accordion-panel-border-color: var(--gray-40); --accordion-box-shadow-color: rgba(0, 0, 0, 0.15); + + /* Deprecated variables */ + --accordion-trigger-box-shadow-hover: var(--accent-primary); } .cauldron--theme-dark { @@ -23,6 +26,9 @@ --accordion-panel-background-color: var(--accent-medium); --accordion-panel-text-color: var(--accent-light); --accordion-panel-border-color: var(--stroke-dark); + + /* Deprecated variables */ + --accordion-trigger-box-shadow-hover: var(--accent-info); } .Accordion:has(.Accordion__trigger[aria-expanded='true']) { @@ -69,8 +75,8 @@ button.Accordion__trigger { } .Accordion .Icon svg { - height: var(--space-small); - width: var(--space-small); + height: 16px; + width: 16px; } .Accordion__panel { From d26864eb5fd5e90c637c2a244fc28767f0b44020 Mon Sep 17 00:00:00 2001 From: orest-s Date: Fri, 9 Feb 2024 17:51:36 +0200 Subject: [PATCH 5/5] fix: some comments, keep old icon and changed filter drop shadow to box-shadow --- packages/react/scripts/buildIconTypes.js | 3 +-- packages/react/src/components/Accordion/Accordion.tsx | 4 ++-- packages/react/src/components/Icon/icons/triangle-solid.svg | 1 - packages/styles/accordion.css | 2 +- 4 files changed, 4 insertions(+), 6 deletions(-) delete mode 100644 packages/react/src/components/Icon/icons/triangle-solid.svg diff --git a/packages/react/scripts/buildIconTypes.js b/packages/react/scripts/buildIconTypes.js index 056a7f9c5..ac9b3efd6 100644 --- a/packages/react/scripts/buildIconTypes.js +++ b/packages/react/scripts/buildIconTypes.js @@ -16,8 +16,7 @@ const ICONS_WITH_DIRECTIONS = [ 'arrow-circle', 'chevron', 'chevron-double', - 'triangle', - 'triangle-solid' + 'triangle' ]; const DIRECTIONS = ['up', 'down', 'left', 'right']; diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx index 2967cecc8..86baa5158 100644 --- a/packages/react/src/components/Accordion/Accordion.tsx +++ b/packages/react/src/components/Accordion/Accordion.tsx @@ -93,8 +93,8 @@ const Accordion = ({ {...panelElement.props} > \ No newline at end of file diff --git a/packages/styles/accordion.css b/packages/styles/accordion.css index ad7f079e0..ceb7dd9a9 100644 --- a/packages/styles/accordion.css +++ b/packages/styles/accordion.css @@ -32,7 +32,7 @@ } .Accordion:has(.Accordion__trigger[aria-expanded='true']) { - filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.15)); + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15); } .Accordion > :is(h1, h2, h3, h4, h5, h6):first-of-type {