Skip to content

feat(chip): enhance multi-select group affordance #9286

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 25 commits into from
Jul 15, 2024
Merged

feat(chip): enhance multi-select group affordance #9286

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
1ff6e28
fix(chip): enhance multi-select group affordance
Elijbet May 8, 2024
dfde850
check mark
Elijbet May 8, 2024
f59ac19
WIP
Elijbet May 12, 2024
befa498
padding for selection-mode:multiple
Elijbet May 12, 2024
60a80c9
story
Elijbet May 12, 2024
e736642
rework padding
Elijbet May 14, 2024
83938b1
tweak the overall padding on the entire chip
Elijbet May 15, 2024
d760c7b
WIP: text only and text + closable
Elijbet Jun 25, 2024
04176dc
WIP: all singles
Elijbet Jun 26, 2024
a2c1053
multiple
Elijbet Jun 26, 2024
23cf717
cleanup
Elijbet Jun 26, 2024
007804f
test
Elijbet Jun 26, 2024
84b7a88
apply internal variables
Elijbet Jun 27, 2024
7a01efd
typo
Elijbet Jun 28, 2024
f8bbb38
internal vars also defined on select-icon and title
Elijbet Jul 1, 2024
f5d370d
WIP
Elijbet Jul 1, 2024
db36d5e
is-circle
Elijbet Jul 1, 2024
2edd105
scss nesting refactor
Elijbet Jul 2, 2024
9dd3648
cleanup
Elijbet Jul 3, 2024
a56891e
move stories to chip-group
Elijbet Jul 3, 2024
dabd132
merge conflicts resolved
Elijbet Jul 3, 2024
a39e66f
fix circle chip and remove padding on select-icon if empty
Elijbet Jul 8, 2024
7e18749
polish some padding issues
Elijbet Jul 15, 2024
1f43542
WIP
Elijbet Jul 15, 2024
558cfc8
update an existing story to provide coverage for this instead of addi…
Elijbet Jul 15, 2024
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
47 changes: 45 additions & 2 deletions packages/calcite-components/src/components/chip/chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,19 @@
.container.is-circle {
@apply w-6 h-6;
}

.multiple {
.select-icon {
padding-inline: var(--calcite-spacing-xxs);
}
}

.multiple.image--slotted {
.select-icon {
padding-inline-start: var(--calcite-spacing-xs);
padding-inline-end: var(--calcite-spacing-sm);
}
}
}

:host([scale="m"]) {
Expand All @@ -30,6 +43,19 @@
.container.is-circle {
@apply w-8 h-8;
}

.multiple {
.select-icon {
padding-inline: var(--calcite-spacing-xs);
}
}

.multiple.image--slotted {
.select-icon {
padding-inline-start: var(--calcite-spacing-sm);
padding-inline-end: var(--calcite-spacing-md);
}
}
}

:host([scale="l"]) {
Expand All @@ -45,6 +71,19 @@
.container.is-circle {
@apply w-11 h-11;
}

.multiple {
.select-icon {
padding-inline: var(--calcite-spacing-sm);
}
}

.multiple.image--slotted {
.select-icon {
padding-inline-start: var(--calcite-spacing-md);
padding-inline-end: var(--calcite-spacing-xl);
}
}
}

:host {
Expand Down Expand Up @@ -77,7 +116,7 @@
}
}

:host([scale="s"]) .container.image--slotted {
:host([scale="s"]) .container:not(.multiple).image--slotted {
padding-inline-start: calc(theme("spacing[0.5]") / 2);
}

Expand Down Expand Up @@ -200,7 +239,7 @@
opacity: 0.5;
}
}
.container:not(.is-circle).image--slotted .select-icon.select-icon--active {
.container:not(.is-circle):not(.multiple).image--slotted .select-icon.select-icon--active {
margin-inline-end: var(--calcite-chip-spacing-s-internal);
}

Expand All @@ -212,6 +251,10 @@
opacity: 1;
}

.multiple .select-icon {
@apply flex justify-center items-center;
}

slot[name="image"]::slotted(*) {
@apply rounded-half flex h-full w-full overflow-hidden;
}
Expand Down
33 changes: 33 additions & 0 deletions packages/calcite-components/src/components/chip/chip.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,3 +149,36 @@ export const darkModeRTL_TestOnly = (): string => html`
`;

darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault };

export const multiPadding = (): string => html`
<div style="display: flex; flex-direction: row; gap: 50px;">
<div>
<calcite-chip-group label="demo-group-label" selection-mode="multiple" scale="s">
<calcite-chip kind="inverse" selected closable value="KML"> KML </calcite-chip>
</calcite-chip-group>
<calcite-chip-group label="demo-group-label" selection-mode="multiple" scale="m" style="padding-top: 16px">
<calcite-chip kind="inverse" selected closable value="KML"> KML </calcite-chip>
</calcite-chip-group>
<calcite-chip-group label="demo-group-label" selection-mode="multiple" scale="l" style="padding-top: 16px">
<calcite-chip kind="inverse" selected closable value="KML"> KML </calcite-chip>
</calcite-chip-group>
</div>
<div>
<calcite-chip-group label="demo-group-label" selection-mode="multiple" scale="s">
<calcite-chip kind="inverse" selected icon="file-kml" closable value="KML">
KML <calcite-avatar slot="image" full-name="Alluvial"></calcite-avatar
></calcite-chip>
</calcite-chip-group>
<calcite-chip-group label="demo-group-label" selection-mode="multiple" scale="m" style="padding-top: 16px">
<calcite-chip kind="inverse" selected icon="file-kml" closable value="KML">
KML<calcite-avatar slot="image" full-name="Alluvial"></calcite-avatar>
</calcite-chip>
</calcite-chip-group>
<calcite-chip-group label="demo-group-label" selection-mode="multiple" scale="l" style="padding-top: 16px">
<calcite-chip kind="inverse" selected closable value="KML">
KML<calcite-avatar slot="image" full-name="Alluvial"></calcite-avatar>
</calcite-chip>
</calcite-chip-group>
</div>
</div>
`;
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/chip/chip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -351,9 +351,9 @@ export class Chip
renderSelectionIcon(): VNode {
const icon =
this.selectionMode === "multiple" && this.selected
? ICONS.checked
? ICONS.checkedMultiple
: this.selectionMode === "multiple"
? ICONS.unchecked
? ICONS.uncheckedMultiple
: this.selected
? ICONS.checkedSingle
: undefined;
Expand Down
2 changes: 2 additions & 0 deletions packages/calcite-components/src/components/chip/resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,6 @@ export const ICONS = {
unchecked: "circle",
checkedSingle: "circle-f",
checked: "check-circle-f",
uncheckedMultiple: "square",
checkedMultiple: "check-square-f",
};
Loading