Skip to content

fix(side-panel): Parity work #9136

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
ruchas31 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

fix(side-panel): Parity work #9136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1ee96ea
fix(sidepanel): parity
ruchas31 Mar 16, 2026
38ce737
fix(sidepanel): parity - fix tab focus and action item options
ruchas31 Mar 16, 2026
0f8e7bf
fix(sidepanel): parity - fix spacing in collapse header
ruchas31 Mar 18, 2026
fd23db9
Merge branch 'main' into sidepanel-8734-8735
ruchas31 Mar 18, 2026
d67d694
fix(sidepanel): parity - fix ai gradient
ruchas31 Mar 18, 2026
a478783
fix(sidepanel): parity - fix failing test
ruchas31 Mar 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
58 changes: 33 additions & 25 deletions packages/ibm-products-web-components/src/components/side-panel/_story-assets/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,26 +129,43 @@ export const getActionToolbarItems = (index) => {
// TODO: There are problems switching this
export const getActionItems = (index) => {
switch (index) {
case 1:
return html`<cds-button key="p" slot="actions" kind=${BUTTON_KIND.PRIMARY}
case 1: // One button
return html`<cds-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
>Primary</cds-button
>`;
case 2:
case 2: // One button (ghost)
return html`<cds-button slot="actions" kind=${BUTTON_KIND.GHOST}
>Ghost</cds-button
>`;
case 3: // One button (danger)
return html`<cds-button slot="actions" kind=${BUTTON_KIND.DANGER}
>Danger</cds-button
>`;
case 4: // Two buttons
return html`
<cds-button slot="actions" kind=${BUTTON_KIND.SECONDARY}
>Secondary</cds-button
>
<cds-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
>Primary</cds-button
>
`;
case 5: // Two buttons with ghost
return html`
<cds-button slot="actions" kind=${BUTTON_KIND.GHOST}>Ghost</cds-button>
<cds-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
>Primary</cds-button
>
`;
case 3:
return html` <cds-button slot="actions" kind=${BUTTON_KIND.DANGER}
case 6: // Two buttons with danger
return html`<cds-button slot="actions" kind=${BUTTON_KIND.DANGER}
>Danger</cds-button
>
<cds-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
>Primary</cds-button
>`;
case 4:
return html` <cds-button slot="actions" kind=${BUTTON_KIND.GHOST}
case 7: // Three buttons with ghost
return html`<cds-button slot="actions" kind=${BUTTON_KIND.GHOST}
>Ghost</cds-button
>
<cds-button slot="actions" kind=${BUTTON_KIND.SECONDARY}
Expand All @@ -157,33 +174,24 @@ export const getActionItems = (index) => {
<cds-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
>Primary</cds-button
>`;
case 5:
return html`<cds-button
key="danger"
slot="actions"
kind=${BUTTON_KIND.DANGER}
case 8: // Three buttons with danger
return html`<cds-button slot="actions" kind=${BUTTON_KIND.DANGER}
>Danger</cds-button
>
<cds-button key="secondary" slot="actions" kind=${BUTTON_KIND.SECONDARY}
<cds-button slot="actions" kind=${BUTTON_KIND.SECONDARY}
>Secondary</cds-button
>
<cds-button key="primary" slot="actions" kind=${BUTTON_KIND.PRIMARY}
<cds-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
>Primary</cds-button
>`;
case 6:
return html`<cds-button
key="danger"
slot="actions"
kind=${BUTTON_KIND.DANGER}
>Danger</cds-button
>
<cds-button key="tertiary" slot="actions" kind=${BUTTON_KIND.TERTIARY}
>Tertiary</cds-button
case 9: // Three buttons
return html`<cds-button slot="actions" kind=${BUTTON_KIND.SECONDARY}
>Secondary</cds-button
>
<cds-button key="secondary" slot="actions" kind=${BUTTON_KIND.SECONDARY}
<cds-button slot="actions" kind=${BUTTON_KIND.SECONDARY}
>Secondary</cds-button
>
<cds-button key="primary" slot="actions" kind=${BUTTON_KIND.PRIMARY}
<cds-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
>Primary</cds-button
>`;
default:
Expand Down
5 changes: 5 additions & 0 deletions packages/ibm-products-web-components/src/components/side-panel/defs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,11 @@ export enum SIDE_PANEL_SIZE {
*/
LARGE = 'lg',

/**
* Extra Large size.
*/
EXTRA_LARGE = 'xl',

/**
* 2X-Large size.
*/
Expand Down
38 changes: 34 additions & 4 deletions packages/ibm-products-web-components/src/components/side-panel/side-panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ $block-class-action-set: #{$prefix}--action-set;
@extend .#{$block-class}--right-placement;

/* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */
border-inline-end: 1px solid $border-subtle-02;
border-inline-end: none;
inset-inline-end: 0;
}

Expand All @@ -86,7 +86,7 @@ $block-class-action-set: #{$prefix}--action-set;
@extend .#{$block-class}--left-placement;

/* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */
border-inline-end: 1px solid $border-subtle-02;
border-inline-end: 1px solid $border-subtle-01;
inset-inline-start: 0;
}

Expand Down Expand Up @@ -167,9 +167,17 @@ $block-class-action-set: #{$prefix}--action-set;
content: initial; /* remove border below */
}

.#{$block-class}__title-text {
padding-inline-end: 0;
}

.#{$block-class}__subtitle-text {
@extend .#{$block-class}__subtitle-text;

&[hidden] {
@extend .#{carbon-config.$prefix}--visually-hidden !optional;

display: none;
}
}

Expand All @@ -180,6 +188,10 @@ $block-class-action-set: #{$prefix}--action-set;
&[hidden] {
@extend .#{carbon-config.$prefix}--visually-hidden !optional;
}

::slotted(.#{$block-class}__action-toolbar-leading-button) {
margin-inline-end: $spacing-03;
}
}

.#{$block-class} .#{$block-class}__action-toolbar[hidden] {
Expand All @@ -190,6 +202,23 @@ $block-class-action-set: #{$prefix}--action-set;
@extend .#{$block-class}--has-slug;
}

.#{$block-class}[has-slug] [scrolls] {
/* override carbon ai removing background gradient */
background:
linear-gradient(
to top,
var(--cds-layer) 0%,
$ai-aura-start 0%,
15%,
$ai-aura-end 50%
)
padding-box,
linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box,
linear-gradient(to bottom, $ai-border-start, $ai-border-end) border-box,
linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
}

[scrolls] {
@extend .#{$block-class}--scrolls;
}
Expand Down Expand Up @@ -244,7 +273,7 @@ $block-class-action-set: #{$prefix}--action-set;
}

&[actions-multiple='triple'] {
--flex-direction: column;
--flex-direction: column-reverse;

::slotted(#{carbon-config.$prefix}-button) {
flex: initial;
Expand All @@ -256,7 +285,7 @@ $block-class-action-set: #{$prefix}--action-set;

// -1 in @container query is for 1px left border
@container (width <= #{map.get(spv.$side-panel-sizes, sm)}) {
--flex-direction: column;
--flex-direction: column-reverse;

::slotted(#{carbon-config.$prefix}-button) {
flex: initial;
Expand All @@ -271,6 +300,7 @@ $block-class-action-set: #{$prefix}--action-set;
@include actions-placement();

display: flex;
gap: 1px;
inline-size: 100%;

::slotted(#{carbon-config.$prefix}-button) {
Expand Down
17 changes: 11 additions & 6 deletions packages/ibm-products-web-components/src/components/side-panel/side-panel.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ const sizes = {
[`Small size (${SIDE_PANEL_SIZE.SMALL})`]: SIDE_PANEL_SIZE.SMALL,
[`Medium size (default) (${SIDE_PANEL_SIZE.MEDIUM})`]: SIDE_PANEL_SIZE.MEDIUM,
[`Large size (${SIDE_PANEL_SIZE.LARGE})`]: SIDE_PANEL_SIZE.LARGE,
[`Extra Large size (${SIDE_PANEL_SIZE.EXTRA_LARGE})`]:
SIDE_PANEL_SIZE.EXTRA_LARGE,
[`Extra Extra Large size (${SIDE_PANEL_SIZE.EXTRA_EXTRA_LARGE})`]:
SIDE_PANEL_SIZE.EXTRA_EXTRA_LARGE,
};
Expand Down Expand Up @@ -97,13 +99,16 @@ const actionToolbarItems = {
};

const actionItems = {
'No actions': 0,
'One button': 1,
'Two buttons with ghost': 2,
'Two buttons with danger': 3,
'Three buttons with ghost': 4,
'Three buttons with danger': 5,
'Too many buttons': 6,
'One button (ghost)': 2,
'One button (danger)': 3,
'Two buttons': 4,
'Two buttons with ghost': 5,
'Two buttons with danger': 6,
'Three buttons with ghost': 7,
'Three buttons with danger': 8,
'Three buttons': 9,
None: 0,
};

const slugs = {
Expand Down
2 changes: 1 addition & 1 deletion packages/ibm-products-web-components/src/components/side-panel/side-panel.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -342,7 +342,7 @@ describe('c4p-side-panel', () => {
`.${prefix}--action-set__action-button`
);

expect(actionItems).toHaveLength(3);
expect(actionItems).toHaveLength(2);
});

it('should display a close button by default', async () => {
Expand Down
Loading
Loading