Skip to content

Commit

Permalink
feat(chip): enhance multi-select group affordance (#9286)
Browse files Browse the repository at this point in the history 
**Related Issue:** #9055, #7425

## Summary
Enhance `multi-select` group affordance.
  • Loading branch information
@Elijbet @github-actions
Elijbet authored and github-actions[bot] committed Jul 30, 2024
1 parent 704f5df commit fd150e1
Show file tree
Hide file tree
Showing 4 changed files with 221 additions and 41 deletions.
20 changes: 10 additions & 10 deletions packages/calcite-components/src/components/chip-group/chip-group.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,12 @@ export const singleWithIcon_TestOnly = (): string => html`
</calcite-chip-group>
`;

export const multiple_TestOnly = (): string => html`
export const multipleClosable_TestOnly = (): string => html`
<calcite-chip-group selection-mode="multiple">
<calcite-chip value="forest">Forest</calcite-chip>
<calcite-chip selected value="tundra">Tundra</calcite-chip>
<calcite-chip value="shore">Seashore</calcite-chip>
<calcite-chip selected value="estuary">Estuary</calcite-chip>
<calcite-chip value="forest" closable>Forest</calcite-chip>
<calcite-chip selected value="tundra" closable>Tundra</calcite-chip>
<calcite-chip value="shore" closable>Seashore</calcite-chip>
<calcite-chip selected value="estuary" closable>Estuary</calcite-chip>
</calcite-chip-group>
`;

Expand All @@ -62,21 +62,21 @@ export const multipleWithIcon_TestOnly = (): string => html`
</calcite-chip-group>
`;

export const multipleWithAvatar_TestOnly = (): string => html`
export const multipleClosableWithAvatar_TestOnly = (): string => html`
<calcite-chip-group selection-mode="multiple">
<calcite-chip icon="layer" value="forest">
<calcite-chip icon="layer" value="forest" closable>
<calcite-avatar slot="image" user-id="25684463a00c449585dbb32a065f6b74" full-name="user name"></calcite-avatar>
Forest</calcite-chip
>
<calcite-chip icon="layer" value="tundra">
<calcite-chip icon="layer" value="tundra" closable>
<calcite-avatar slot="image" user-id="25684463a00c449585dbb32a065f6b74" full-name="user name"></calcite-avatar>
Tundra</calcite-chip
>
<calcite-chip icon="layer" value="shore">
<calcite-chip icon="layer" value="shore" closable>
<calcite-avatar slot="image" user-id="25684463a00c449585dbb32a065f6b74" full-name="user name"></calcite-avatar>
Seashore</calcite-chip
>
<calcite-chip icon="layer" value="estuary">
<calcite-chip icon="layer" value="estuary" closable>
<calcite-avatar slot="image" user-id="25684463a00c449585dbb32a065f6b74" full-name="user name"></calcite-avatar>
Estuary</calcite-chip
>
Expand Down
219 changes: 197 additions & 22 deletions packages/calcite-components/src/components/chip/chip.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,20 @@
.container,
.select-icon,
.title {
padding-inline-start: var(--calcite-internal-chip-padding-start);
padding-inline-end: var(--calcite-internal-chip-padding-end);
}

.select-icon:not(.select-icon--active) {
padding-inline: 0;
}

:host([scale="s"]) {
@apply text-n2 h-6;

--calcite-chip-spacing-s-internal: theme("spacing[1]");
--calcite-chip-spacing-l-internal: theme("spacing[2]");

.close,
.select-icon--active {
@apply h-4 w-4;
Expand All @@ -11,9 +24,63 @@
@apply h-5 w-5;
}

.container.is-circle {
.container.is-circle,
.container.is-circle.image--slotted {
@apply w-6 h-6;

--calcite-internal-chip-padding-start: var(--calcite-spacing-px);
--calcite-internal-chip-padding-end: var(--calcite-spacing-px);
}

.multiple {
.select-icon {
--calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
--calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
}

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

&.text--slotted {
--calcite-internal-chip-padding-start: var(--calcite-spacing-px);
--calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
}
}
}

.container {
--calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
--calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);

&.image--slotted {
--calcite-internal-chip-padding-start: var(--calcite-spacing-px);
--calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);

&.closable {
--calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
}
}
}

.container:not(.is-circle):not(.multiple) {
&:not(.image-slotted) .select-icon.select-icon--active {
padding-inline-start: 0;
padding-inline-end: var(--calcite-spacing-xs);
}

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

:host([scale="s"][closable]) .container {
--calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
--calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
}

:host([scale="m"]) {
Expand All @@ -25,28 +92,141 @@
.image-container,
.select-icon--active {
@apply h-6 w-6;

--calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
--calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
}

.container.is-circle {
.container.is-circle,
.container.is-circle.image--slotted {
@apply w-8 h-8;

--calcite-internal-chip-padding-start: var(--calcite-spacing-px);
--calcite-internal-chip-padding-end: var(--calcite-spacing-px);
}

.multiple {
.select-icon {
--calcite-internal-chip-padding-start: var(--calcite-spacing-base);
--calcite-internal-chip-padding-end: var(--calcite-spacing-base);
}

&.image--slotted {
.select-icon {
--calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
--calcite-internal-chip-padding-end: var(--calcite-spacing-sm);
}

&.text--slotted {
--calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
--calcite-internal-chip-padding-end: var(--calcite-spacing-xs);
}
}
}

.container {
--calcite-internal-chip-padding-start: var(--calcite-spacing-xs);
--calcite-internal-chip-padding-end: var(--calcite-spacing-xs);

&.image--slotted {
--calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
--calcite-internal-chip-padding-end: var(--calcite-spacing-xs);

&.closable {
--calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
--calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
}
}
}

.container:not(.is-circle):not(.multiple) {
&:not(.image-slotted) .select-icon.select-icon--active {
padding-inline-start: 0;
padding-inline-end: var(--calcite-spacing-px);
}

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

:host([scale="m"][closable]) .container {
--calcite-internal-chip-padding-start: var(--calcite-spacing-xs);
--calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
}

:host([scale="l"]) {
@apply text-0 h-11;

--calcite-chip-spacing-s-internal: theme("spacing[2]");
--calcite-chip-spacing-l-internal: theme("spacing[3]");

.image-container,
.close,
.select-icon--active {
@apply h-8 w-8;

--calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
--calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
}

.container.is-circle {
.container.is-circle,
.container.is-circle.image--slotted {
@apply w-11 h-11;

--calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
--calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
}

.multiple {
.select-icon {
--calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
--calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
}

&.image--slotted {
.select-icon {
--calcite-internal-chip-padding-start: var(--calcite-spacing-xs);
--calcite-internal-chip-padding-end: var(--calcite-spacing-md);
}
}
}

.container {
--calcite-internal-chip-padding-start: var(--calcite-spacing-sm);
--calcite-internal-chip-padding-end: var(--calcite-spacing-sm);

&.image--slotted {
--calcite-internal-chip-padding-start: var(--calcite-spacing-xs);
--calcite-internal-chip-padding-end: var(--calcite-spacing-sm);

&.closable {
--calcite-internal-chip-padding-start: var(--calcite-spacing-xs);
--calcite-internal-chip-padding-end: var(--calcite-spacing-xs);
}
}
}

.container:not(.is-circle):not(.multiple) {
&:not(.image-slotted) .select-icon.select-icon--active {
padding-inline-start: 0;
padding-inline-end: var(--calcite-spacing-xxs);
}

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

:host([scale="l"][closable]) .container {
--calcite-internal-chip-padding-start: var(--calcite-spacing-sm);
--calcite-internal-chip-padding-end: var(--calcite-spacing-xs);
}

:host {
@apply inline-flex
cursor-default
Expand All @@ -66,9 +246,7 @@
border-color-1
box-border
font-medium;
&:not(.is-circle) {
padding-inline: var(--calcite-chip-spacing-s-internal);
}

&.selectable {
@apply cursor-pointer;
}
Expand All @@ -77,17 +255,19 @@
}
}

:host([scale="s"]) .container.image--slotted {
padding-inline-start: calc(theme("spacing[0.5]") / 2);
:host([scale="s"]) .container.selectable.single.image--slotted {
--calcite-internal-chip-padding-end: calc(theme("spacing[0.5]") / 2);
}

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

.container.text--slotted .title {
@apply truncate;
padding-inline: var(--calcite-chip-spacing-s-internal);

--calcite-internal-chip-padding-start: var(--calcite-chip-spacing-s-internal);
--calcite-internal-chip-padding-end: var(--calcite-chip-spacing-s-internal);
}

.container:not(.text--slotted) .title {
Expand All @@ -98,15 +278,7 @@
display: none;
}

.container.closable {
padding-inline-end: calc(var(--calcite-chip-spacing-l-internal) / 2);
}

.container:not(.is-circle) {
&.image--slotted {
padding-inline-start: calc(var(--calcite-chip-spacing-l-internal) / 2);
}

&.image--slotted .image-container {
margin-inline-end: var(--calcite-chip-spacing-s-internal);
}
Expand Down Expand Up @@ -167,6 +339,8 @@
justify-content: center;
--calcite-chip-transparent-hover: var(--calcite-color-transparent-hover);
--calcite-chip-transparent-press: var(--calcite-color-transparent-press);
--calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
--calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
&:hover {
background-color: var(--calcite-chip-transparent-hover);
}
Expand Down Expand Up @@ -200,9 +374,6 @@
opacity: 0.5;
}
}
.container:not(.is-circle).image--slotted .select-icon.select-icon--active {
margin-inline-end: var(--calcite-chip-spacing-s-internal);
}

:host([selected]) .select-icon {
opacity: 1;
Expand All @@ -212,6 +383,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
17 changes: 10 additions & 7 deletions packages/calcite-components/src/components/chip/chip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,13 +351,13 @@ export class Chip

renderSelectionIcon(): VNode {
const icon =
this.selectionMode === "multiple" && this.selected
? ICONS.checked
: this.selectionMode === "multiple"
? ICONS.unchecked
: this.selected
? ICONS.checkedSingle
: undefined;
this.selectionMode === "multiple"
? this.selected
? ICONS.checkedMultiple
: ICONS.uncheckedMultiple
: this.selected
? ICONS.checkedSingle
: undefined;

return (
<div
Expand Down Expand Up @@ -425,6 +425,9 @@ export class Chip
[CSS.imageSlotted]: this.hasImage,
[CSS.selectable]: this.selectionMode !== "none",
[CSS.multiple]: this.selectionMode === "multiple",
[CSS.single]:
this.selectionMode === "single" || this.selectionMode === "single-persist",
[CSS.selected]: this.selected,
[CSS.closable]: this.closable,
[CSS.nonInteractive]: !this.interactive,
[CSS.isCircle]:
Expand Down
Loading

0 comments on commit fd150e1

Please sign in to comment.