Skip to content
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

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

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 all 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
20 changes: 10 additions & 10 deletions packages/calcite-components/src/components/chip-group/chip-group.stories.ts
View file
Open in desktop
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
Open in desktop
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 {
Elijbet marked this conversation as resolved.
Show resolved Hide resolved
.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 {
Elijbet marked this conversation as resolved.
Show resolved Hide resolved
--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);
Copy link
Member

Choose a reason for hiding this comment

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

Per our conversation, can you create a refactor issue to clean up chip's styling to reduce duplication and improve maintainability?

Copy link
Contributor Author

@Elijbet Elijbet Jul 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Refactor chip styling #9785

--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
Open in desktop
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
Loading