Skip to content

fix(list-item): fix selection indicator placement in RTL #11288

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

Merged
merged 4 commits into from
Jan 14, 2025
Merged

fix(list-item): fix selection indicator placement in RTL #11288

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
378c826
fix(list-item): fix selection indicator placement in RTL
jcfranco Jan 14, 2025
9197d4b
add test coverage
jcfranco Jan 14, 2025
d80dfe0
update story description to match test case
jcfranco Jan 14, 2025
aadb510
update themed test
jcfranco Jan 14, 2025
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
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/list-item/list-item.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -534,8 +534,8 @@ describe("calcite-list-item", () => {
></calcite-list-item>`,
{
"--calcite-list-selection-border-color": {
shadowSelector: `.${CSS.container}`,
targetProp: "boxShadow",
shadowSelector: `.${CSS.container}::before`,
targetProp: "backgroundColor",
},
},
);
Expand Down
23 changes: 18 additions & 5 deletions packages/calcite-components/src/components/list-item/list-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,17 +49,30 @@
background-color: var(--calcite-list-background-color-press, var(--calcite-color-foreground-1));
}

.container--border-selected {
box-shadow: inset 4px 0 0 0 var(--calcite-list-selection-border-color, var(--calcite-color-brand));
.container--border {
position: relative;

&::before {
position: absolute;
inline-size: var(--calcite-border-width-lg);
inset-block: 0;
inset-inline-start: 0;
background-color: transparent;
content: "";
}
}

.container--border-unselected {
box-shadow: inset 4px 0 0 0 transparent;
.container--border-selected {
&::before {
background-color: var(--calcite-list-selection-border-color, var(--calcite-color-brand));
}
}

.container:hover {
&.container--border-unselected {
box-shadow: inset 4px 0 0 0 var(--calcite-list-selection-border-color, var(--calcite-color-border-1));
&::before {
background-color: var(--calcite-list-selection-border-color, var(--calcite-color-border-1));
}
}
}

Expand Down
33 changes: 23 additions & 10 deletions packages/calcite-components/src/components/list/list.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default {

const thumbnailImage = placeholderImage({ width: 44, height: 44 });

const listHTML = (): string => html` selection-mode="none" selection-appearance="icon" label="My List" `;
const listAttributes = (): string => html` selection-mode="none" selection-appearance="icon" label="My List" `;

export const simple = (args: ListStoryArgs): string => html`
<calcite-list
Expand Down Expand Up @@ -3965,7 +3965,7 @@ export const scales = (): string => html`
`;

export const onlyLabelVersusOnlyDescription_TestOnly = (): string => html`
<calcite-list ${listHTML()}>
<calcite-list ${listAttributes()}>
<calcite-list-item label="This has no description."> </calcite-list-item>
</calcite-list>
<calcite-list>
Expand All @@ -3974,7 +3974,7 @@ export const onlyLabelVersusOnlyDescription_TestOnly = (): string => html`
`;

export const stretchSlottedContent = (): string => html`
<calcite-list ${listHTML()}>
<calcite-list ${listAttributes()}>
<calcite-list-item label="This has no description.">
<calcite-handle slot="actions-start"></calcite-handle>
<calcite-action
Expand Down Expand Up @@ -4002,7 +4002,7 @@ export const stretchSlottedContent = (): string => html`
`;

export const nestedItems = (): string => html`
<calcite-list display-mode="nested" ${listHTML()}>
<calcite-list display-mode="nested" ${listAttributes()}>
<calcite-list-item
open
label="Level 1 item 1"
Expand Down Expand Up @@ -4080,7 +4080,7 @@ nestedItems.parameters = {
};

export const groupedItems = (): string => html`
<calcite-list display-mode="nested" ${listHTML()}>
<calcite-list display-mode="nested" ${listAttributes()}>
<calcite-list-item-group heading="Nested">
<calcite-list-item
open
Expand Down Expand Up @@ -4131,7 +4131,7 @@ groupedItems.parameters = {
};

export const startAndEndContentSlots = (): string =>
html`<calcite-list ${listHTML()}>
html`<calcite-list ${listAttributes()}>
<calcite-list-item>
<calcite-action slot="actions-end" icon="ellipsis"> </calcite-action>
<calcite-icon icon="layers" scale="m" slot="content-start"></calcite-icon>
Expand Down Expand Up @@ -4168,7 +4168,7 @@ export const startAndEndContentSlots = (): string =>
</calcite-list> `;

export const contentBottomSlots = (): string =>
html`<calcite-list ${listHTML()}>
html`<calcite-list ${listAttributes()}>
<calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom">
<span slot="content-bottom">Some value or something and a <b>thing</b>.</span>
</calcite-list-item>
Expand All @@ -4184,7 +4184,7 @@ export const contentBottomSlots = (): string =>
</calcite-list> `;

export const contentBottomSlotsNested = (): string =>
html`<calcite-list display-mode="nested" ${listHTML()}>
html`<calcite-list display-mode="nested" ${listAttributes()}>
<calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom" open>
<span slot="content-bottom">Some value or something and a <b>thing</b>.</span>
<calcite-list display-mode="nested"
Expand All @@ -4201,7 +4201,7 @@ export const contentBottomSlotsNested = (): string =>
</calcite-list> `;

export const richContent = (): string => html`
<calcite-list ${listHTML()}>
<calcite-list ${listAttributes()}>
<calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom">
<calcite-action icon="web" label="Princess Bubblegum website" scale="s" slot="actions-start"></calcite-action>
<calcite-icon scale="l" icon="effects" slot="content-start"></calcite-icon>
Expand Down Expand Up @@ -4300,7 +4300,8 @@ export const filterEnabledWithHiddenItems = (): string => html`
`;

export const darkModeRTL_TestOnly = (): string => html`
<calcite-list class="calcite-mode-dark" dir="rtl" ${listHTML()}>
<h1>selection-mode="none" + selection-appearance="icon"</h1>
<calcite-list class="calcite-mode-dark" dir="rtl" ${listAttributes()}>
<calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom">
<calcite-action icon="web" label="Princess Bubblegum website" scale="s" slot="actions-start"></calcite-action>
<calcite-icon scale="l" icon="effects" slot="content-start"></calcite-icon>
Expand Down Expand Up @@ -4341,6 +4342,18 @@ export const darkModeRTL_TestOnly = (): string => html`
<calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
</calcite-list-item>
</calcite-list>

<h1>selection-mode="single-persist" + selection-appearance="border" + dir="rtl"</h1>
<calcite-list
class="calcite-mode-dark"
label="RTL list"
selection-appearance="border"
selection-mode="single-persist"
dir="rtl"
>
<calcite-list-item label="My first list item" selected>First </calcite-list-item>
<calcite-list-item label="My second list item">Second </calcite-list-item>
</calcite-list>
`;

darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault };
Expand Down
Loading