Skip to content

[UIK-5669][accordion] rebranding #3135

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
j-mnizhek wants to merge 4 commits into
base: UIK-5351/add-more-variables-to-theme
Choose a base branch
from
Open

[UIK-5669][accordion] rebranding #3135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9166717
[accordion] update styles
j-mnizhek Aug 18, 2026
62704ba
[chore] Merge branch 'UIK-5351/add-more-variables-to-theme'
j-mnizhek Aug 18, 2026
cc0866c
[accordion] update styles and component
j-mnizhek Aug 18, 2026
1118b60
[accordion] update border variable
j-mnizhek Aug 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion playground/components/ControlPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ function GroupControl({ groupName, controls, groupPropName, onControlChange, isO
<Accordion.Item value={0}>
<Accordion.Item.Toggle className={styles.fullWidthItem}>
<Accordion.Item.ToggleButton>
<Accordion.Item.Chevron mr={2} color='var(--intergalactic-icon-secondary-neutral)' />
<Accordion.Item.Chevron color='var(--intergalactic-icon-secondary-neutral)' />
<Text size={200} fontWeight={500}>
{groupName}
</Text>
Expand Down
80 changes: 75 additions & 5 deletions semcore/accordion/src/style/accordion.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
SItemToggle[use][use='primary']:not(:first-child) {
Comment thread
j-mnizhek marked this conversation as resolved.
margin-top: var(--intergalactic-spacing-content-gap-xsmall, 2px);
}

SItemToggle {
display: flex;
align-items: center;
Expand All @@ -9,25 +13,87 @@ SItemToggle[use][use] {
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
font-weight: var(--intergalactic-regular, 400);
}

SItemToggle[use][use='primary'] {
box-sizing: border-box;

@ilyabrower ilyabrower Aug 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we need this?

overflow: clip;
Comment thread
j-mnizhek marked this conversation as resolved.
background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);
margin-bottom: var(--intergalactic-spacing-05x, 2px);
border-radius: var(--intergalactic-surface-rounded, 8px);
padding: var(--intergalactic-spacing-content-padding-small, 8px)
var(--intergalactic-spacing-content-padding-large, 16px)
var(--intergalactic-spacing-content-padding-small, 8px)
var(--intergalactic-spacing-content-padding-xlarge, 20px);
}
SItemToggle[use][use='primary']:has(SItemChevron[selected]) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
SItemToggle[use][use='primary']:hover {
background-color: var(--intergalactic-bg-secondary-neutral-hover, oklch(0.97 0.001 180));
}
SItemToggle[use][use='primary']::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 2px;
z-index: 1;
Comment thread
j-mnizhek marked this conversation as resolved.
background-color: var(--intergalactic-border-accent, oklch(0.23 0.01 140));
opacity: 0;
transition: opacity calc(var(--intergalactic-duration-accordion, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12));
}
SItemToggle[use][use='primary']:has(SItemChevron[selected])::before {
opacity: 1;
}
SItemToggle[use][use='primary']:has(SItemChevron[selected]) + * {

@ilyabrower ilyabrower Aug 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think, we can use here more relevant selector

position: relative;
overflow: clip;
background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
border-bottom-left-radius: var(--intergalactic-surface-rounded, 8px);
border-bottom-right-radius: var(--intergalactic-surface-rounded, 8px);
}
SItemToggle[use][use='primary']:has(SItemChevron[selected]) + *::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 2px;
z-index: 1;
background-color: var(--intergalactic-border-accent, oklch(0.23 0.01 140));
}
SItemToggle[use][use='secondary'] {
padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xxsmall, 2px);
}
SItemToggle[use][use='secondary']:has(SItemChevron[selected]) + * {
border-left: 2px solid var(--intergalactic-border-accent, oklch(0.23 0.01 140));
}

SItemToggle[disabled] {
opacity: var(--intergalactic-disabled-opacity, 0.4);
cursor: default;
}

SItemToggle[use][use='primary'] SItemChevron {
position: absolute;
top: 50%;
right: var(--intergalactic-spacing-content-padding-large, 16px);
flex-shrink: 0;
transform: translateY(-50%) rotate(0deg);
}
SItemToggle[use][use='primary'] SItemChevron[selected] {
transform: translateY(-50%) rotate(90deg);
}

SItemToggle[use][use='secondary'] SItemChevron {
margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
}

SItemChevron {
margin-right: var(--intergalactic-spacing-2x, 8px);
transform: rotate(0deg);
transition: transform calc(var(--intergalactic-duration-accordion, 200) * 1ms) ease-out;
fill: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526));
transition: transform calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12));
fill: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));

&[selected] {
transform: rotate(90deg);
Expand All @@ -38,4 +104,8 @@ SItemChevron {
SItemChevron {
transition: none;
}

SItemToggle[use][use='primary']::before {
transition: none;
}
}
12 changes: 4 additions & 8 deletions stories/components/accordion/docs/Accordion.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react-vite';

import { BasicUsageTest } from './__tests__/basic-usage.test';
import BasicExample, { defaultProps as BasicExampleProps } from './examples/basic_usage';
import CustomStylesExample from './examples/custom_styles';
import HeadingTagExample from './examples/heading_tag';
import NonCompactExample from './examples/non_compact';
import OneSectionOpeningExample from './examples/one_section_opening';
import PrimaryAccordionExample from './examples/primary_accordion';
import SeoExample from './examples/seo';
import { playWrapper } from '../../../utils/playWrapper';

Expand Down Expand Up @@ -46,16 +45,13 @@ export const Basic: StoryObj<typeof BasicExampleProps> = {
play: playWrapper(BasicUsageTest),
};

export const CustomStyles: Story = {
render: CustomStylesExample,
};

export const HeadingTag: Story = {
render: HeadingTagExample,
};

export const NonCompact: Story = {
render: NonCompactExample,
export const PrimaryAccordion: Story = {
name: 'Primary accordion',
render: PrimaryAccordionExample,
};

export const OneSectionOpening: Story = {
Expand Down
4 changes: 2 additions & 2 deletions stories/components/accordion/docs/examples/basic_usage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@ const Demo = (props: ExampleAccordionProps) => {
<Accordion.Item value={index} key={index} disabled={index === 2}>
<Accordion.Item.Toggle pb={2} w={props.w} h={props.h}>
<Accordion.Item.ToggleButton>
<Accordion.Item.Chevron mr={2} />
<Accordion.Item.Chevron />
Section
{' '}
{index + 1}
</Accordion.Item.ToggleButton>
</Accordion.Item.Toggle>
<Accordion.Item.Collapse overflowHidden={props.overflowHidden} defaultHeight={props.defaultHeight}>
<Box pt={3} px={6} pb={6}>{`This is section ${index + 1}`}</Box>
<Box pt={3} px={5} pb={6}>{`This is section ${index + 1}`}</Box>
</Accordion.Item.Collapse>
</Accordion.Item>
))}
Expand Down
61 changes: 0 additions & 61 deletions stories/components/accordion/docs/examples/custom_styles.tsx
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions stories/components/accordion/docs/examples/heading_tag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ const Demo = () => {
<Accordion.Item value={index} key={index} disabled={index === 2}>
<Accordion.Item.Toggle pb={2} tag='h2'>
<Accordion.Item.ToggleButton>
<Accordion.Item.Chevron mr={2} />
<Accordion.Item.Chevron />
Section
{' '}
{index + 1}
</Accordion.Item.ToggleButton>
</Accordion.Item.Toggle>
<Accordion.Item.Collapse>
<Box pt={3} px={6} pb={6}>{`This is section ${index + 1}`}</Box>
<Box pt={3} px={5} pb={6}>{`This is section ${index + 1}`}</Box>
</Accordion.Item.Collapse>
</Accordion.Item>
))}
Expand Down
4 changes: 2 additions & 2 deletions stories/components/accordion/docs/examples/one_section_opening.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ const Demo = () => {
<Accordion.Item value={index} key={index} disabled={index === 2}>
<Accordion.Item.Toggle pb={2}>
<Accordion.Item.ToggleButton>
<Accordion.Item.Chevron mr={2} />
<Accordion.Item.Chevron />
Section
{' '}
{index + 1}
</Accordion.Item.ToggleButton>
</Accordion.Item.Toggle>
<Accordion.Item.Collapse>
<Box pt={3} px={6} pb={6}>{`This is section ${index + 1}`}</Box>
<Box pt={3} px={5} pb={6}>{`This is section ${index + 1}`}</Box>
</Accordion.Item.Collapse>
</Accordion.Item>
))}
Expand Down
4 changes: 2 additions & 2 deletions ...s/accordion/docs/examples/non_compact.tsx → ...rdion/docs/examples/primary_accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@ const Demo = () => {
<Accordion.Item value={index} key={index} disabled={index === 2}>
<Accordion.Item.Toggle pb={2}>
<Accordion.Item.ToggleButton>
<Accordion.Item.Chevron mr={2} />
<Accordion.Item.Chevron />
Section
{' '}
{index + 1}
</Accordion.Item.ToggleButton>
</Accordion.Item.Toggle>
<Accordion.Item.Collapse>
<Box pt={3} px={6} pb={6}>{`This is section ${index + 1}`}</Box>
<Box pt={3} px={5} pb={6}>{`This is section ${index + 1}`}</Box>

@ilyabrower ilyabrower Aug 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like this padding should be in Collapse component...

@j-mnizhek j-mnizhek Aug 19, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Totally agree, but there is a nuance... We'll discuss this

</Accordion.Item.Collapse>
</Accordion.Item>
))}
Expand Down
4 changes: 2 additions & 2 deletions stories/components/accordion/docs/examples/seo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ const Demo = () => {
<Accordion.Item value={index} key={index} disabled={index === 1}>
<Accordion.Item.Toggle pb={2}>
<Accordion.Item.ToggleButton>
<Accordion.Item.Chevron mr={2} />
<Accordion.Item.Chevron />
Section
{' '}
{index + 1}
</Accordion.Item.ToggleButton>
</Accordion.Item.Toggle>
<Accordion.Item.Collapse preserveNode>
<Box pt={3} px={6} pb={6}>
<Box pt={3} px={5} pb={6}>
{`This is section ${index + 1}`}
,
{' '}
Expand Down
8 changes: 4 additions & 4 deletions stories/components/accordion/tests/examples/accordion-collapse-duration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const Demo = () => {
<Accordion.Item value={11}>
<Accordion.Item.Toggle pb={2}>
<Accordion.Item.ToggleButton>
<Accordion.Item.Chevron mr={2} />
<Accordion.Item.Chevron />
Duration 500
</Accordion.Item.ToggleButton>
</Accordion.Item.Toggle>
Expand All @@ -37,7 +37,7 @@ const Demo = () => {
}}
>
<Accordion.Item.ToggleButton>
<Accordion.Item.Chevron mr={2} />
<Accordion.Item.Chevron />
Duration 500 Delay 500
</Accordion.Item.ToggleButton>
</Accordion.Item.Toggle>
Expand All @@ -50,7 +50,7 @@ const Demo = () => {
<Accordion.Item value={2}>
<Accordion.Item.Toggle pb={2}>
<Accordion.Item.ToggleButton>
<Accordion.Item.Chevron mr={2} />
<Accordion.Item.Chevron />
Duration 0
</Accordion.Item.ToggleButton>
</Accordion.Item.Toggle>
Expand All @@ -63,7 +63,7 @@ const Demo = () => {
<Accordion.Item value={3}>
<Accordion.Item.Toggle pb={2}>
<Accordion.Item.ToggleButton>
<Accordion.Item.Chevron mr={2} />
<Accordion.Item.Chevron />
Default
</Accordion.Item.ToggleButton>
</Accordion.Item.Toggle>
Expand Down
8 changes: 4 additions & 4 deletions stories/components/accordion/tests/examples/default-values.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,24 @@ const Demo = () => {
<Accordion.Item value={1}>
<Accordion.Item.Toggle pb={2}>
<Accordion.Item.ToggleButton>
<Accordion.Item.Chevron mr={2} />
<Accordion.Item.Chevron />
Section 1
</Accordion.Item.ToggleButton>
</Accordion.Item.Toggle>
<Accordion.Item.Collapse data-test-id='default-value'>
<Box pt={3} px={6} pb={6}>Hello Section 1</Box>
<Box pt={3} px={5} pb={6}>Hello Section 1</Box>
</Accordion.Item.Collapse>
</Accordion.Item>

<Accordion.Item value='two'>
<Accordion.Item.Toggle pb={2}>
<Accordion.Item.ToggleButton>
<Accordion.Item.Chevron mr={2} />
<Accordion.Item.Chevron />
Section "two"
</Accordion.Item.ToggleButton>
</Accordion.Item.Toggle>
<Accordion.Item.Collapse>
<Box pt={3} px={6} pb={6}>Hello Section "two"</Box>
<Box pt={3} px={5} pb={6}>Hello Section "two"</Box>
</Accordion.Item.Collapse>
</Accordion.Item>
</Accordion>
Expand Down
8 changes: 4 additions & 4 deletions stories/components/accordion/tests/examples/values.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,24 @@ const Demo = () => {
<Accordion.Item value={0}>
<Accordion.Item.Toggle pb={2}>
<Accordion.Item.ToggleButton>
<Accordion.Item.Chevron mr={2} />
<Accordion.Item.Chevron />
Number: 0
</Accordion.Item.ToggleButton>
</Accordion.Item.Toggle>
<Accordion.Item.Collapse data-test-id='number'>
<Box pt={3} px={6} pb={6}>Section with value = 0 (number)</Box>
<Box pt={3} px={5} pb={6}>Section with value = 0 (number)</Box>
</Accordion.Item.Collapse>
</Accordion.Item>

<Accordion.Item value='one'>
<Accordion.Item.Toggle pb={2}>
<Accordion.Item.ToggleButton>
<Accordion.Item.Chevron mr={2} />
<Accordion.Item.Chevron />
String: "one"
</Accordion.Item.ToggleButton>
</Accordion.Item.Toggle>
<Accordion.Item.Collapse data-test-id='string'>
<Box pt={3} px={6} pb={6}>Section with value = "one" (string)</Box>
<Box pt={3} px={5} pb={6}>Section with value = "one" (string)</Box>
</Accordion.Item.Collapse>
</Accordion.Item>
</Accordion>
Expand Down
Loading
Loading