From 1ff6e28c9cd4337786566d0f3e219eff254fbd93 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 8 May 2024 15:08:28 -0700 Subject: [PATCH 01/24] fix(chip): enhance multi-select group affordance --- packages/calcite-components/src/components/chip/chip.tsx | 4 ++-- packages/calcite-components/src/components/chip/resources.ts | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx index aab3067e3bb..42c7dac3b89 100644 --- a/packages/calcite-components/src/components/chip/chip.tsx +++ b/packages/calcite-components/src/components/chip/chip.tsx @@ -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; diff --git a/packages/calcite-components/src/components/chip/resources.ts b/packages/calcite-components/src/components/chip/resources.ts index 7f9bacb67fd..85e127b52e3 100644 --- a/packages/calcite-components/src/components/chip/resources.ts +++ b/packages/calcite-components/src/components/chip/resources.ts @@ -24,4 +24,6 @@ export const ICONS = { unchecked: "circle", checkedSingle: "circle-f", checked: "check-circle-f", + uncheckedMultiple: "square", + checkedMultiple: "square-f", }; From dfde850509711b785db5ee8f618291f83fdeac8a Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 8 May 2024 15:17:50 -0700 Subject: [PATCH 02/24] check mark --- packages/calcite-components/src/components/chip/resources.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/chip/resources.ts b/packages/calcite-components/src/components/chip/resources.ts index 85e127b52e3..31b8cb0a3ae 100644 --- a/packages/calcite-components/src/components/chip/resources.ts +++ b/packages/calcite-components/src/components/chip/resources.ts @@ -25,5 +25,5 @@ export const ICONS = { checkedSingle: "circle-f", checked: "check-circle-f", uncheckedMultiple: "square", - checkedMultiple: "square-f", + checkedMultiple: "check-square-f", }; From f59ac19c4bdc76b9ab8c165a5906b4ba202d0d97 Mon Sep 17 00:00:00 2001 From: eliza Date: Sun, 12 May 2024 13:53:44 -0700 Subject: [PATCH 03/24] WIP --- .../src/components/chip/chip.scss | 123 ++++++++++++------ .../calcite-components/src/demos/chip.html | 104 ++++++++++++--- 2 files changed, 170 insertions(+), 57 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index efeb5164428..70adffc8136 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -14,6 +14,19 @@ .container.is-circle { @apply w-6 h-6; } + + .multiple { + .select-icon { + padding-inline: var(--calcite-spacing-xxs); + } + } + + .image--slotted { + .select-icon { + padding-inline-start: var(--calcite-spacing-xs); + padding-inline-end: var(--calcite-spacing-sm); + } + } } :host([scale="m"]) { @@ -30,6 +43,19 @@ .container.is-circle { @apply w-8 h-8; } + + .multiple { + .select-icon { + padding-inline: var(--calcite-spacing-xs); + } + } + + .image--slotted { + .select-icon { + padding-inline-start: var(--calcite-spacing-sm); + padding-inline-end: var(--calcite-spacing-md); + } + } } :host([scale="l"]) { @@ -45,6 +71,19 @@ .container.is-circle { @apply w-11 h-11; } + + .multiple { + .select-icon { + padding-inline: var(--calcite-spacing-sm); + } + } + + .image--slotted { + .select-icon { + padding-inline-start: var(--calcite-spacing-md); + padding-inline-end: var(--calcite-spacing-xl); + } + } } :host { @@ -77,9 +116,9 @@ } } -:host([scale="s"]) .container.image--slotted { - padding-inline-start: calc(theme("spacing[0.5]") / 2); -} +// :host([scale="s"]) .container.image--slotted { +// // padding-inline-start: calc(theme("spacing[0.5]") / 2); +// } :host([scale="s"]) .container.is-circle { padding-inline: 0; @@ -103,40 +142,40 @@ } .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); - } - - &.image--slotted .image-container ~ .chip-icon { - margin-inline-start: var(--calcite-chip-spacing-s-internal); - } - - &.selectable:not(.text--slotted) .chip-icon { - margin-inline-end: var(--calcite-chip-spacing-s-internal); - } - - &:not(.selectable):not(.text--slotted) .chip-icon { - margin-inline-start: var(--calcite-chip-spacing-s-internal); - } - - &:not(.text--slotted) .chip-icon { - margin-inline-end: var(--calcite-chip-spacing-s-internal); - } - - &:not(.text-slotted).image--slotted .image-container { - margin-inline-end: var(--calcite-chip-spacing-s-internal); - } - - &:not(.closable):not(.text--slotted).image--slotted.selectable .image-container { - margin-inline-end: 0; - ~ .chip-icon { - margin-inline-start: calc(var(--calcite-chip-spacing-s-internal) * 2); - } - } + // &.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); + // } + + // &.image--slotted .image-container ~ .chip-icon { + // margin-inline-start: var(--calcite-chip-spacing-s-internal); + // } + + // &.selectable:not(.text--slotted) .chip-icon { + // margin-inline-end: var(--calcite-chip-spacing-s-internal); + // } + + // &:not(.selectable):not(.text--slotted) .chip-icon { + // margin-inline-start: var(--calcite-chip-spacing-s-internal); + // } + + // &:not(.text--slotted) .chip-icon { + // margin-inline-end: var(--calcite-chip-spacing-s-internal); + // } + + // &:not(.text-slotted).image--slotted .image-container { + // margin-inline-end: var(--calcite-chip-spacing-s-internal); + // } + + // &:not(.closable):not(.text--slotted).image--slotted.selectable .image-container { + // margin-inline-end: 0; + // ~ .chip-icon { + // margin-inline-start: calc(var(--calcite-chip-spacing-s-internal) * 2); + // } + // } } .chip-icon { @@ -200,9 +239,9 @@ opacity: 0.5; } } -.container:not(.is-circle).image--slotted .select-icon.select-icon--active { - margin-inline-end: var(--calcite-chip-spacing-s-internal); -} +// .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; @@ -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; } diff --git a/packages/calcite-components/src/demos/chip.html b/packages/calcite-components/src/demos/chip.html index 9b9d752f205..b6681c9c9f0 100644 --- a/packages/calcite-components/src/demos/chip.html +++ b/packages/calcite-components/src/demos/chip.html @@ -127,32 +127,102 @@

Chip

Outline-fill
-
-
Basic
+
Basic MULTI
+ +
+ + KML + + + KML + + + KML + +
-
- My great chip - My great chip - My great chip -
+ + + + KML + + + + KML + + + + + KML + +
-
- My great chip - My great chip - My great chip -
+ + + KML + + + KML + + + KML +
-
- My great chip - My great chip - My great chip -
+ + + + KML + + + + KML + + + + KML +
From befa49826d057cbcb4484ecbab78e7933c05e937 Mon Sep 17 00:00:00 2001 From: eliza Date: Sun, 12 May 2024 14:07:10 -0700 Subject: [PATCH 04/24] padding for selection-mode:multiple --- .../src/components/chip/chip.scss | 72 ++++++------ .../calcite-components/src/demos/chip.html | 104 +++--------------- 2 files changed, 53 insertions(+), 123 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index 70adffc8136..b7df56d637e 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -21,7 +21,7 @@ } } - .image--slotted { + .multiple.image--slotted { .select-icon { padding-inline-start: var(--calcite-spacing-xs); padding-inline-end: var(--calcite-spacing-sm); @@ -50,7 +50,7 @@ } } - .image--slotted { + .multiple.image--slotted { .select-icon { padding-inline-start: var(--calcite-spacing-sm); padding-inline-end: var(--calcite-spacing-md); @@ -78,7 +78,7 @@ } } - .image--slotted { + .multiple.image--slotted { .select-icon { padding-inline-start: var(--calcite-spacing-md); padding-inline-end: var(--calcite-spacing-xl); @@ -116,9 +116,9 @@ } } -// :host([scale="s"]) .container.image--slotted { -// // padding-inline-start: calc(theme("spacing[0.5]") / 2); -// } +:host([scale="s"]) .container:not(.multiple).image--slotted { + padding-inline-start: calc(theme("spacing[0.5]") / 2); +} :host([scale="s"]) .container.is-circle { padding-inline: 0; @@ -142,40 +142,40 @@ } .container:not(.is-circle) { - // &.image--slotted { - // padding-inline-start: calc(var(--calcite-chip-spacing-l-internal) / 2); - // } + &.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); - // } + &.image--slotted .image-container { + margin-inline-end: var(--calcite-chip-spacing-s-internal); + } - // &.image--slotted .image-container ~ .chip-icon { - // margin-inline-start: var(--calcite-chip-spacing-s-internal); - // } + &.image--slotted .image-container ~ .chip-icon { + margin-inline-start: var(--calcite-chip-spacing-s-internal); + } - // &.selectable:not(.text--slotted) .chip-icon { - // margin-inline-end: var(--calcite-chip-spacing-s-internal); - // } + &.selectable:not(.text--slotted) .chip-icon { + margin-inline-end: var(--calcite-chip-spacing-s-internal); + } - // &:not(.selectable):not(.text--slotted) .chip-icon { - // margin-inline-start: var(--calcite-chip-spacing-s-internal); - // } + &:not(.selectable):not(.text--slotted) .chip-icon { + margin-inline-start: var(--calcite-chip-spacing-s-internal); + } - // &:not(.text--slotted) .chip-icon { - // margin-inline-end: var(--calcite-chip-spacing-s-internal); - // } + &:not(.text--slotted) .chip-icon { + margin-inline-end: var(--calcite-chip-spacing-s-internal); + } - // &:not(.text-slotted).image--slotted .image-container { - // margin-inline-end: var(--calcite-chip-spacing-s-internal); - // } + &:not(.text-slotted).image--slotted .image-container { + margin-inline-end: var(--calcite-chip-spacing-s-internal); + } - // &:not(.closable):not(.text--slotted).image--slotted.selectable .image-container { - // margin-inline-end: 0; - // ~ .chip-icon { - // margin-inline-start: calc(var(--calcite-chip-spacing-s-internal) * 2); - // } - // } + &:not(.closable):not(.text--slotted).image--slotted.selectable .image-container { + margin-inline-end: 0; + ~ .chip-icon { + margin-inline-start: calc(var(--calcite-chip-spacing-s-internal) * 2); + } + } } .chip-icon { @@ -239,9 +239,9 @@ opacity: 0.5; } } -// .container:not(.is-circle).image--slotted .select-icon.select-icon--active { -// margin-inline-end: var(--calcite-chip-spacing-s-internal); -// } +.container:not(.is-circle):not(.multiple).image--slotted .select-icon.select-icon--active { + margin-inline-end: var(--calcite-chip-spacing-s-internal); +} :host([selected]) .select-icon { opacity: 1; diff --git a/packages/calcite-components/src/demos/chip.html b/packages/calcite-components/src/demos/chip.html index b6681c9c9f0..9b9d752f205 100644 --- a/packages/calcite-components/src/demos/chip.html +++ b/packages/calcite-components/src/demos/chip.html @@ -127,102 +127,32 @@

Chip

Outline-fill
+
-
Basic MULTI
- -
- - KML - - - KML - - - KML - -
+
Basic
- - - - KML - - - - KML - - - - - KML - - +
+ My great chip + My great chip + My great chip +
- - - KML - - - KML - - - KML - +
+ My great chip + My great chip + My great chip +
- - - - KML - - - - KML - - - - KML - +
+ My great chip + My great chip + My great chip +
From 60a80c9759fa40f495960ac55b61fae3b5bf6b29 Mon Sep 17 00:00:00 2001 From: eliza Date: Sun, 12 May 2024 14:28:03 -0700 Subject: [PATCH 05/24] story --- .../src/components/chip/chip.stories.ts | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/packages/calcite-components/src/components/chip/chip.stories.ts b/packages/calcite-components/src/components/chip/chip.stories.ts index f0fae8e2958..a70d251915a 100644 --- a/packages/calcite-components/src/components/chip/chip.stories.ts +++ b/packages/calcite-components/src/components/chip/chip.stories.ts @@ -149,3 +149,36 @@ export const darkModeRTL_TestOnly = (): string => html` `; darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; + +export const multiPadding = (): string => html` +
+
+ + KML + + + KML + + + KML + +
+
+ + + KML + + + + KML + + + + + KML + + +
+
+`; From e73664256d994b1bfe1322c8afd551fd1ca453ca Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 14 May 2024 13:49:46 -0700 Subject: [PATCH 06/24] rework padding --- .../calcite-components/src/components/chip/chip.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index b7df56d637e..1bbd55b3fb6 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -46,14 +46,14 @@ .multiple { .select-icon { - padding-inline: var(--calcite-spacing-xs); + padding-inline: var(--calcite-spacing-xxxs); } } .multiple.image--slotted { .select-icon { - padding-inline-start: var(--calcite-spacing-sm); - padding-inline-end: var(--calcite-spacing-md); + padding-inline-start: var(--calcite-spacing-xxs); + padding-inline-end: var(--calcite-spacing-sm); } } } @@ -74,14 +74,14 @@ .multiple { .select-icon { - padding-inline: var(--calcite-spacing-sm); + padding-inline: var(--calcite-spacing-xxs); } } .multiple.image--slotted { .select-icon { - padding-inline-start: var(--calcite-spacing-md); - padding-inline-end: var(--calcite-spacing-xl); + padding-inline-start: var(--calcite-spacing-xs); + padding-inline-end: var(--calcite-spacing-md); } } } From 83938b1e4e13ffe81658b37528b9619c97c8a8c2 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 14 May 2024 17:18:17 -0700 Subject: [PATCH 07/24] tweak the overall padding on the entire chip --- .../calcite-components/src/components/chip/chip.scss | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index 1bbd55b3fb6..6a087c29d1a 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -46,7 +46,7 @@ .multiple { .select-icon { - padding-inline: var(--calcite-spacing-xxxs); + padding-inline: var(--calcite-spacing-base); } } @@ -106,7 +106,8 @@ box-border font-medium; &:not(.is-circle) { - padding-inline: var(--calcite-chip-spacing-s-internal); + padding-inline-start: var(--calcite-spacing-px); + padding-inline-end: var(--calcite-spacing-xxs); } &.selectable { @apply cursor-pointer; @@ -142,10 +143,6 @@ } .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); } From d760c7ba6fabc91db6d31d10774be551a8a79f8c Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 25 Jun 2024 15:45:42 -0700 Subject: [PATCH 08/24] WIP: text only and text + closable --- .../src/components/chip/chip.scss | 44 ++++++++++++++----- .../src/components/chip/chip.tsx | 17 ++++--- .../src/components/chip/resources.ts | 2 + 3 files changed, 44 insertions(+), 19 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index 6a087c29d1a..af81eef0213 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -1,5 +1,6 @@ :host([scale="s"]) { @apply text-n2 h-6; + padding-inline: var(--calcite-spacing-xxs); --calcite-chip-spacing-s-internal: theme("spacing[1]"); --calcite-chip-spacing-l-internal: theme("spacing[2]"); .close, @@ -29,8 +30,13 @@ } } +:host([scale="s"][closable]) { + padding-inline: var(--calcite-spacing-xxs); +} + :host([scale="m"]) { @apply text-n1 h-8; + padding-inline: var(--calcite-spacing-xs); --calcite-chip-spacing-s-internal: theme("spacing[1.5]"); --calcite-chip-spacing-l-internal: theme("spacing[2]"); @@ -58,8 +64,14 @@ } } +:host([scale="m"][closable]) { + padding-inline-start: var(--calcite-spacing-xs); + padding-inline-end: var(--calcite-spacing-xxs); +} + :host([scale="l"]) { @apply text-0 h-11; + padding-inline: var(--calcite-spacing-sm); --calcite-chip-spacing-s-internal: theme("spacing[2]"); --calcite-chip-spacing-l-internal: theme("spacing[3]"); .image-container, @@ -86,6 +98,11 @@ } } +:host([scale="l"][closable]) { + padding-inline-start: var(--calcite-spacing-sm); + padding-inline-end: var(--calcite-spacing-xs); +} + :host { @apply inline-flex cursor-default @@ -100,15 +117,13 @@ rounded-full focus-base justify-center - border - border-solid - border-color-1 box-border font-medium; - &:not(.is-circle) { - padding-inline-start: var(--calcite-spacing-px); - padding-inline-end: var(--calcite-spacing-xxs); - } + //affects small scale with text only + // &:not(.is-circle) { + // padding-inline-start: var(--calcite-spacing-px); + // padding-inline-end: var(--calcite-spacing-xxs); + // } &.selectable { @apply cursor-pointer; } @@ -117,7 +132,11 @@ } } -:host([scale="s"]) .container:not(.multiple).image--slotted { +:host([scale="s"]) .container.selectable.single.image--slotted { + padding-inline-end: calc(theme("spacing[0.5]") / 2); +} + +:host([scale="s"]) .container:not(.selected):not(.multiple).image--slotted { padding-inline-start: calc(theme("spacing[0.5]") / 2); } @@ -137,10 +156,10 @@ .container:not(.image--slotted) .image-container { display: none; } - -.container.closable { - padding-inline-end: calc(var(--calcite-chip-spacing-l-internal) / 2); -} +// affects small text + closable +// .container.closable { +// padding-inline-end: calc(var(--calcite-chip-spacing-l-internal) / 2); +// } .container:not(.is-circle) { &.image--slotted .image-container { @@ -203,6 +222,7 @@ justify-content: center; --calcite-chip-transparent-hover: var(--calcite-color-transparent-hover); --calcite-chip-transparent-press: var(--calcite-color-transparent-press); + padding-inline: var(--calcite-spacing-xxs); &:hover { background-color: var(--calcite-chip-transparent-hover); } diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx index 42c7dac3b89..a43914b789b 100644 --- a/packages/calcite-components/src/components/chip/chip.tsx +++ b/packages/calcite-components/src/components/chip/chip.tsx @@ -350,13 +350,13 @@ export class Chip renderSelectionIcon(): VNode { const icon = - this.selectionMode === "multiple" && this.selected - ? ICONS.checkedMultiple - : this.selectionMode === "multiple" - ? ICONS.uncheckedMultiple - : this.selected - ? ICONS.checkedSingle - : undefined; + this.selectionMode === "multiple" + ? this.selected + ? ICONS.checkedMultiple + : ICONS.uncheckedMultiple + : this.selected + ? ICONS.checkedSingle + : undefined; return (
Date: Tue, 25 Jun 2024 17:03:44 -0700 Subject: [PATCH 09/24] WIP: all singles --- .../src/components/chip/chip.scss | 50 ++++++++++++++++--- 1 file changed, 44 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index af81eef0213..ddc26f577f1 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -1,6 +1,6 @@ :host([scale="s"]) { @apply text-n2 h-6; - padding-inline: var(--calcite-spacing-xxs); + // padding-inline: var(--calcite-spacing-xxs); --calcite-chip-spacing-s-internal: theme("spacing[1]"); --calcite-chip-spacing-l-internal: theme("spacing[2]"); .close, @@ -28,15 +28,27 @@ padding-inline-end: var(--calcite-spacing-sm); } } + + .container { + padding-inline: var(--calcite-spacing-xxs); + } + + .container.image--slotted { + padding-inline-end: var(--calcite-spacing-xxs); + } + + .container.image--slotted.closable { + padding-inline-end: var(--calcite-spacing-xxs); + } } -:host([scale="s"][closable]) { +:host([scale="s"][closable]) .container { padding-inline: var(--calcite-spacing-xxs); } :host([scale="m"]) { @apply text-n1 h-8; - padding-inline: var(--calcite-spacing-xs); + // padding-inline: var(--calcite-spacing-xs); --calcite-chip-spacing-s-internal: theme("spacing[1.5]"); --calcite-chip-spacing-l-internal: theme("spacing[2]"); @@ -62,16 +74,29 @@ padding-inline-end: var(--calcite-spacing-sm); } } + + .container { + padding-inline: var(--calcite-spacing-xs); + } + + .container.image--slotted { + padding-inline-start: var(--calcite-spacing-xxs); + padding-inline-end: var(--calcite-spacing-xs); + } + + .container.image--slotted.closable { + padding-inline: var(--calcite-spacing-xxs); + } } -:host([scale="m"][closable]) { +:host([scale="m"][closable]) .container { padding-inline-start: var(--calcite-spacing-xs); padding-inline-end: var(--calcite-spacing-xxs); } :host([scale="l"]) { @apply text-0 h-11; - padding-inline: var(--calcite-spacing-sm); + // padding-inline: var(--calcite-spacing-sm); --calcite-chip-spacing-s-internal: theme("spacing[2]"); --calcite-chip-spacing-l-internal: theme("spacing[3]"); .image-container, @@ -96,9 +121,22 @@ padding-inline-end: var(--calcite-spacing-md); } } + + .container { + padding-inline: var(--calcite-spacing-sm); + } + + .container.image--slotted { + padding-inline-start: var(--calcite-spacing-xs); + padding-inline-end: var(--calcite-spacing-sm); + } + + .container.image--slotted.closable { + padding-inline: var(--calcite-spacing-xs); + } } -:host([scale="l"][closable]) { +:host([scale="l"][closable]) .container { padding-inline-start: var(--calcite-spacing-sm); padding-inline-end: var(--calcite-spacing-xs); } From a2c10535167634492c163ccbc5c970604b6934fa Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 25 Jun 2024 17:26:28 -0700 Subject: [PATCH 10/24] multiple --- .../calcite-components/src/components/chip/chip.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index ddc26f577f1..c817a5fdc8c 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -29,6 +29,11 @@ } } + .multiple.container.image--slotted.text--slotted { + padding-inline-start: var(--calcite-spacing-px); + padding-inline-end: var(--calcite-spacing-xxs); + } + .container { padding-inline: var(--calcite-spacing-xxs); } @@ -75,6 +80,11 @@ } } + .multiple.container.image--slotted.text--slotted { + padding-inline-start: var(--calcite-spacing-xxs); + padding-inline-end: var(--calcite-spacing-xs); + } + .container { padding-inline: var(--calcite-spacing-xs); } From 23cf7170eb2564eb86fa554387b78b162624e0df Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 26 Jun 2024 11:02:00 -0700 Subject: [PATCH 11/24] cleanup --- .../src/components/chip/chip.scss | 21 ++++++++----------- .../src/components/chip/resources.ts | 2 -- 2 files changed, 9 insertions(+), 14 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index c817a5fdc8c..0c398a593a1 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -1,8 +1,13 @@ :host([scale="s"]) { @apply text-n2 h-6; - // padding-inline: var(--calcite-spacing-xxs); + --calcite-chip-spacing-s-internal: theme("spacing[1]"); --calcite-chip-spacing-l-internal: theme("spacing[2]"); + + // padding-inline: var(--calcite-inernal-chip-padding); + // padding-inline-start: var(--calcite-inernal-chip-padding-start); + // padding-inline-end: var(--calcite-inernal-chip-padding-end); + .close, .select-icon--active { @apply h-4 w-4; @@ -53,7 +58,6 @@ :host([scale="m"]) { @apply text-n1 h-8; - // padding-inline: var(--calcite-spacing-xs); --calcite-chip-spacing-s-internal: theme("spacing[1.5]"); --calcite-chip-spacing-l-internal: theme("spacing[2]"); @@ -106,9 +110,10 @@ :host([scale="l"]) { @apply text-0 h-11; - // padding-inline: var(--calcite-spacing-sm); + --calcite-chip-spacing-s-internal: theme("spacing[2]"); --calcite-chip-spacing-l-internal: theme("spacing[3]"); + .image-container, .close, .select-icon--active { @@ -167,11 +172,7 @@ justify-center box-border font-medium; - //affects small scale with text only - // &:not(.is-circle) { - // padding-inline-start: var(--calcite-spacing-px); - // padding-inline-end: var(--calcite-spacing-xxs); - // } + &.selectable { @apply cursor-pointer; } @@ -204,10 +205,6 @@ .container:not(.image--slotted) .image-container { display: none; } -// affects small text + closable -// .container.closable { -// padding-inline-end: calc(var(--calcite-chip-spacing-l-internal) / 2); -// } .container:not(.is-circle) { &.image--slotted .image-container { diff --git a/packages/calcite-components/src/components/chip/resources.ts b/packages/calcite-components/src/components/chip/resources.ts index 6b7b02ed547..c5db4455dfc 100644 --- a/packages/calcite-components/src/components/chip/resources.ts +++ b/packages/calcite-components/src/components/chip/resources.ts @@ -23,9 +23,7 @@ export const SLOTS = { export const ICONS = { close: "x", - unchecked: "circle", checkedSingle: "circle-f", - checked: "check-circle-f", uncheckedMultiple: "square", checkedMultiple: "check-square-f", }; From 007804fe66326d8aca506d6345c4faea1c5208b7 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 26 Jun 2024 11:31:41 -0700 Subject: [PATCH 12/24] test --- .../src/components/chip/chip.scss | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index 0c398a593a1..5ae10c67223 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -1,13 +1,15 @@ +.container { + padding-inline: var(--calcite-internal-chip-padding); + padding-inline-start: var(--calcite-internal-chip-padding-start); + padding-inline-end: var(--calcite-internal-chip-padding-end); +} + :host([scale="s"]) { @apply text-n2 h-6; --calcite-chip-spacing-s-internal: theme("spacing[1]"); --calcite-chip-spacing-l-internal: theme("spacing[2]"); - // padding-inline: var(--calcite-inernal-chip-padding); - // padding-inline-start: var(--calcite-inernal-chip-padding-start); - // padding-inline-end: var(--calcite-inernal-chip-padding-end); - .close, .select-icon--active { @apply h-4 w-4; @@ -40,11 +42,11 @@ } .container { - padding-inline: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding: var(--calcite-spacing-xxs); } .container.image--slotted { - padding-inline-end: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } .container.image--slotted.closable { @@ -53,7 +55,7 @@ } :host([scale="s"][closable]) .container { - padding-inline: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding: var(--calcite-spacing-xxs); } :host([scale="m"]) { From 84b7a88bff7a0e28daf64fefa7837730f90f3ab4 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 27 Jun 2024 14:26:42 -0700 Subject: [PATCH 13/24] apply internal variables --- .../src/components/chip/chip.scss | 83 +++++++++++++------ 1 file changed, 56 insertions(+), 27 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index 5ae10c67223..f095967e32b 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -1,7 +1,6 @@ .container { - padding-inline: var(--calcite-internal-chip-padding); - padding-inline-start: var(--calcite-internal-chip-padding-start); - padding-inline-end: var(--calcite-internal-chip-padding-end); + padding-inline-start: var(--calcite-inernal-chip-padding-start); + padding-inline-end: var(--calcite-inernal-chip-padding-end); } :host([scale="s"]) { @@ -26,6 +25,8 @@ .multiple { .select-icon { padding-inline: var(--calcite-spacing-xxs); + // --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); + // --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); } } @@ -33,29 +34,33 @@ .select-icon { padding-inline-start: var(--calcite-spacing-xs); padding-inline-end: var(--calcite-spacing-sm); + // --calcite-inernal-chip-padding-start: var(--calcite-spacing-xs); + // --calcite-inernal-chip-padding-end: var(--calcite-spacing-sm); } } .multiple.container.image--slotted.text--slotted { - padding-inline-start: var(--calcite-spacing-px); - padding-inline-end: var(--calcite-spacing-xxs); + --calcite-inernal-chip-padding-start: var(--calcite-spacing-px); + --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); } .container { - --calcite-internal-chip-padding: var(--calcite-spacing-xxs); + --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); } .container.image--slotted { - --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); + --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); } .container.image--slotted.closable { - padding-inline-end: var(--calcite-spacing-xxs); + --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); } } :host([scale="s"][closable]) .container { - --calcite-internal-chip-padding: var(--calcite-spacing-xxs); + --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); } :host([scale="m"]) { @@ -67,6 +72,10 @@ .image-container, .select-icon--active { @apply h-6 w-6; + + padding-inline: var(--calcite-spacing-xxs); + // --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); + // --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); } .container.is-circle { @@ -76,6 +85,8 @@ .multiple { .select-icon { padding-inline: var(--calcite-spacing-base); + // --calcite-inernal-chip-padding-start: var(--calcite-spacing-base); + // --calcite-inernal-chip-padding-end: var(--calcite-spacing-base); } } @@ -83,31 +94,35 @@ .select-icon { padding-inline-start: var(--calcite-spacing-xxs); padding-inline-end: var(--calcite-spacing-sm); + // --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); + // --calcite-inernal-chip-padding-end: var(--calcite-spacing-sm); } } .multiple.container.image--slotted.text--slotted { - padding-inline-start: var(--calcite-spacing-xxs); - padding-inline-end: var(--calcite-spacing-xs); + --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-inernal-chip-padding-end: var(--calcite-spacing-xs); } .container { - padding-inline: var(--calcite-spacing-xs); + --calcite-inernal-chip-padding-start: var(--calcite-spacing-xs); + --calcite-inernal-chip-padding-end: var(--calcite-spacing-xs); } .container.image--slotted { - padding-inline-start: var(--calcite-spacing-xxs); - padding-inline-end: var(--calcite-spacing-xs); + --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-inernal-chip-padding-end: var(--calcite-spacing-xs); } .container.image--slotted.closable { - padding-inline: var(--calcite-spacing-xxs); + --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); } } :host([scale="m"][closable]) .container { - padding-inline-start: var(--calcite-spacing-xs); - padding-inline-end: var(--calcite-spacing-xxs); + --calcite-inernal-chip-padding-start: var(--calcite-spacing-xs); + --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); } :host([scale="l"]) { @@ -120,6 +135,10 @@ .close, .select-icon--active { @apply h-8 w-8; + + padding-inline: var(--calcite-spacing-xxs); + // --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); + // --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); } .container.is-circle { @@ -129,6 +148,8 @@ .multiple { .select-icon { padding-inline: var(--calcite-spacing-xxs); + // --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); + // --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); } } @@ -136,26 +157,30 @@ .select-icon { padding-inline-start: var(--calcite-spacing-xs); padding-inline-end: var(--calcite-spacing-md); + // --calcite-inernal-chip-padding-start: var(--calcite-spacing-xs); + // --calcite-inernal-chip-padding-end: var(--calcite-spacing-md); } } .container { - padding-inline: var(--calcite-spacing-sm); + --calcite-inernal-chip-padding-start: var(--calcite-spacing-sm); + --calcite-inernal-chip-padding-end: var(--calcite-spacing-sm); } .container.image--slotted { - padding-inline-start: var(--calcite-spacing-xs); - padding-inline-end: var(--calcite-spacing-sm); + --calcite-inernal-chip-padding-start: var(--calcite-spacing-xs); + --calcite-inernal-chip-padding-end: var(--calcite-spacing-sm); } .container.image--slotted.closable { - padding-inline: var(--calcite-spacing-xs); + --calcite-inernal-chip-padding-start: var(--calcite-spacing-xs); + --calcite-inernal-chip-padding-end: var(--calcite-spacing-xs); } } :host([scale="l"][closable]) .container { - padding-inline-start: var(--calcite-spacing-sm); - padding-inline-end: var(--calcite-spacing-xs); + --calcite-inernal-chip-padding-start: var(--calcite-spacing-sm); + --calcite-inernal-chip-padding-end: var(--calcite-spacing-xs); } :host { @@ -184,20 +209,23 @@ } :host([scale="s"]) .container.selectable.single.image--slotted { - padding-inline-end: calc(theme("spacing[0.5]") / 2); + --calcite-inernal-chip-padding-end: calc(theme("spacing[0.5]") / 2); } :host([scale="s"]) .container:not(.selected):not(.multiple).image--slotted { - padding-inline-start: calc(theme("spacing[0.5]") / 2); + --calcite-inernal-chip-padding-start: calc(theme("spacing[0.5]") / 2); } :host([scale="s"]) .container.is-circle { - padding-inline: 0; + --calcite-inernal-chip-padding-start: 0; + --calcite-inernal-chip-padding-end: 0; } .container.text--slotted .title { @apply truncate; padding-inline: var(--calcite-chip-spacing-s-internal); + // --calcite-inernal-chip-padding-start: var(--calcite-chip-spacing-s-internal); + // --calcite-inernal-chip-padding-end: var(--calcite-chip-spacing-s-internal); } .container:not(.text--slotted) .title { @@ -269,7 +297,8 @@ justify-content: center; --calcite-chip-transparent-hover: var(--calcite-color-transparent-hover); --calcite-chip-transparent-press: var(--calcite-color-transparent-press); - padding-inline: var(--calcite-spacing-xxs); + --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); &:hover { background-color: var(--calcite-chip-transparent-hover); } From 7a01efd4390c9f2984669d779f0dfe6ecebb2f86 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 28 Jun 2024 11:37:06 -0700 Subject: [PATCH 14/24] typo --- .../src/components/chip/chip.scss | 100 +++++++++--------- 1 file changed, 50 insertions(+), 50 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index f095967e32b..44e68e9e5c1 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -1,6 +1,6 @@ .container { - padding-inline-start: var(--calcite-inernal-chip-padding-start); - padding-inline-end: var(--calcite-inernal-chip-padding-end); + padding-inline-start: var(--calcite-internal-chip-padding-start); + padding-inline-end: var(--calcite-internal-chip-padding-end); } :host([scale="s"]) { @@ -25,8 +25,8 @@ .multiple { .select-icon { padding-inline: var(--calcite-spacing-xxs); - // --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); - // --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); + // --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + // --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } } @@ -34,33 +34,33 @@ .select-icon { padding-inline-start: var(--calcite-spacing-xs); padding-inline-end: var(--calcite-spacing-sm); - // --calcite-inernal-chip-padding-start: var(--calcite-spacing-xs); - // --calcite-inernal-chip-padding-end: var(--calcite-spacing-sm); + // --calcite-internal-chip-padding-start: var(--calcite-spacing-xs); + // --calcite-internal-chip-padding-end: var(--calcite-spacing-sm); } } .multiple.container.image--slotted.text--slotted { - --calcite-inernal-chip-padding-start: var(--calcite-spacing-px); - --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-start: var(--calcite-spacing-px); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } .container { - --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); - --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } .container.image--slotted { - --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } .container.image--slotted.closable { - --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } } :host([scale="s"][closable]) .container { - --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); - --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } :host([scale="m"]) { @@ -74,8 +74,8 @@ @apply h-6 w-6; padding-inline: var(--calcite-spacing-xxs); - // --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); - // --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); + // --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + // --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } .container.is-circle { @@ -85,8 +85,8 @@ .multiple { .select-icon { padding-inline: var(--calcite-spacing-base); - // --calcite-inernal-chip-padding-start: var(--calcite-spacing-base); - // --calcite-inernal-chip-padding-end: var(--calcite-spacing-base); + // --calcite-internal-chip-padding-start: var(--calcite-spacing-base); + // --calcite-internal-chip-padding-end: var(--calcite-spacing-base); } } @@ -94,35 +94,35 @@ .select-icon { padding-inline-start: var(--calcite-spacing-xxs); padding-inline-end: var(--calcite-spacing-sm); - // --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); - // --calcite-inernal-chip-padding-end: var(--calcite-spacing-sm); + // --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + // --calcite-internal-chip-padding-end: var(--calcite-spacing-sm); } } .multiple.container.image--slotted.text--slotted { - --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); - --calcite-inernal-chip-padding-end: var(--calcite-spacing-xs); + --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xs); } .container { - --calcite-inernal-chip-padding-start: var(--calcite-spacing-xs); - --calcite-inernal-chip-padding-end: var(--calcite-spacing-xs); + --calcite-internal-chip-padding-start: var(--calcite-spacing-xs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xs); } .container.image--slotted { - --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); - --calcite-inernal-chip-padding-end: var(--calcite-spacing-xs); + --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xs); } .container.image--slotted.closable { - --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); - --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } } :host([scale="m"][closable]) .container { - --calcite-inernal-chip-padding-start: var(--calcite-spacing-xs); - --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-start: var(--calcite-spacing-xs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } :host([scale="l"]) { @@ -137,8 +137,8 @@ @apply h-8 w-8; padding-inline: var(--calcite-spacing-xxs); - // --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); - // --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); + // --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + // --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } .container.is-circle { @@ -148,8 +148,8 @@ .multiple { .select-icon { padding-inline: var(--calcite-spacing-xxs); - // --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); - // --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); + // --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + // --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } } @@ -157,30 +157,30 @@ .select-icon { padding-inline-start: var(--calcite-spacing-xs); padding-inline-end: var(--calcite-spacing-md); - // --calcite-inernal-chip-padding-start: var(--calcite-spacing-xs); - // --calcite-inernal-chip-padding-end: var(--calcite-spacing-md); + // --calcite-internal-chip-padding-start: var(--calcite-spacing-xs); + // --calcite-internal-chip-padding-end: var(--calcite-spacing-md); } } .container { - --calcite-inernal-chip-padding-start: var(--calcite-spacing-sm); - --calcite-inernal-chip-padding-end: var(--calcite-spacing-sm); + --calcite-internal-chip-padding-start: var(--calcite-spacing-sm); + --calcite-internal-chip-padding-end: var(--calcite-spacing-sm); } .container.image--slotted { - --calcite-inernal-chip-padding-start: var(--calcite-spacing-xs); - --calcite-inernal-chip-padding-end: var(--calcite-spacing-sm); + --calcite-internal-chip-padding-start: var(--calcite-spacing-xs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-sm); } .container.image--slotted.closable { - --calcite-inernal-chip-padding-start: var(--calcite-spacing-xs); - --calcite-inernal-chip-padding-end: var(--calcite-spacing-xs); + --calcite-internal-chip-padding-start: var(--calcite-spacing-xs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xs); } } :host([scale="l"][closable]) .container { - --calcite-inernal-chip-padding-start: var(--calcite-spacing-sm); - --calcite-inernal-chip-padding-end: var(--calcite-spacing-xs); + --calcite-internal-chip-padding-start: var(--calcite-spacing-sm); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xs); } :host { @@ -209,23 +209,23 @@ } :host([scale="s"]) .container.selectable.single.image--slotted { - --calcite-inernal-chip-padding-end: calc(theme("spacing[0.5]") / 2); + --calcite-internal-chip-padding-end: calc(theme("spacing[0.5]") / 2); } :host([scale="s"]) .container:not(.selected):not(.multiple).image--slotted { - --calcite-inernal-chip-padding-start: calc(theme("spacing[0.5]") / 2); + --calcite-internal-chip-padding-start: calc(theme("spacing[0.5]") / 2); } :host([scale="s"]) .container.is-circle { - --calcite-inernal-chip-padding-start: 0; - --calcite-inernal-chip-padding-end: 0; + --calcite-internal-chip-padding-start: 0; + --calcite-internal-chip-padding-end: 0; } .container.text--slotted .title { @apply truncate; padding-inline: var(--calcite-chip-spacing-s-internal); - // --calcite-inernal-chip-padding-start: var(--calcite-chip-spacing-s-internal); - // --calcite-inernal-chip-padding-end: 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 { From f8bbb38ddcdcc64b0c4ab6c3253642747b5c1999 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 1 Jul 2024 13:37:41 -0700 Subject: [PATCH 15/24] internal vars also defined on select-icon and title --- .../src/components/chip/chip.scss | 48 ++++++++----------- 1 file changed, 20 insertions(+), 28 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index 44e68e9e5c1..e6a0cba0139 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -1,4 +1,6 @@ -.container { +.container, +.select-icon, +title { padding-inline-start: var(--calcite-internal-chip-padding-start); padding-inline-end: var(--calcite-internal-chip-padding-end); } @@ -24,18 +26,15 @@ .multiple { .select-icon { - padding-inline: var(--calcite-spacing-xxs); - // --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); - // --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } } .multiple.image--slotted { .select-icon { - padding-inline-start: var(--calcite-spacing-xs); - padding-inline-end: var(--calcite-spacing-sm); - // --calcite-internal-chip-padding-start: var(--calcite-spacing-xs); - // --calcite-internal-chip-padding-end: var(--calcite-spacing-sm); + --calcite-internal-chip-padding-start: var(--calcite-spacing-xs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-sm); } } @@ -73,9 +72,8 @@ .select-icon--active { @apply h-6 w-6; - padding-inline: var(--calcite-spacing-xxs); - // --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); - // --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } .container.is-circle { @@ -84,18 +82,15 @@ .multiple { .select-icon { - padding-inline: var(--calcite-spacing-base); - // --calcite-internal-chip-padding-start: var(--calcite-spacing-base); - // --calcite-internal-chip-padding-end: var(--calcite-spacing-base); + --calcite-internal-chip-padding-start: var(--calcite-spacing-base); + --calcite-internal-chip-padding-end: var(--calcite-spacing-base); } } .multiple.image--slotted { .select-icon { - padding-inline-start: var(--calcite-spacing-xxs); - padding-inline-end: var(--calcite-spacing-sm); - // --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); - // --calcite-internal-chip-padding-end: var(--calcite-spacing-sm); + --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-sm); } } @@ -136,9 +131,8 @@ .select-icon--active { @apply h-8 w-8; - padding-inline: var(--calcite-spacing-xxs); - // --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); - // --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } .container.is-circle { @@ -147,18 +141,15 @@ .multiple { .select-icon { - padding-inline: var(--calcite-spacing-xxs); - // --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); - // --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } } .multiple.image--slotted { .select-icon { - padding-inline-start: var(--calcite-spacing-xs); - padding-inline-end: var(--calcite-spacing-md); - // --calcite-internal-chip-padding-start: var(--calcite-spacing-xs); - // --calcite-internal-chip-padding-end: var(--calcite-spacing-md); + --calcite-internal-chip-padding-start: var(--calcite-spacing-xs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-md); } } @@ -223,6 +214,7 @@ .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); From f5d370d6e8018ceba8509c442ea05abecdf4e5ad Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 1 Jul 2024 13:39:27 -0700 Subject: [PATCH 16/24] WIP --- packages/calcite-components/src/components/chip/chip.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index e6a0cba0139..aa5ca6f01d5 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -1,6 +1,6 @@ .container, .select-icon, -title { +.title { padding-inline-start: var(--calcite-internal-chip-padding-start); padding-inline-end: var(--calcite-internal-chip-padding-end); } @@ -215,9 +215,9 @@ title { .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); + // 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 { From db36d5e0ed642289a348ca27c53bd053f5f7ec42 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 1 Jul 2024 16:10:44 -0700 Subject: [PATCH 17/24] is-circle --- .../src/components/chip/chip.scss | 28 +++++++++++-------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index aa5ca6f01d5..29d973c90e9 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -20,8 +20,12 @@ @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: 0; + --calcite-internal-chip-padding-end: 0; } .multiple { @@ -76,8 +80,12 @@ --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-xxs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } .multiple { @@ -135,8 +143,12 @@ --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-xs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xs); } .multiple { @@ -207,15 +219,9 @@ --calcite-internal-chip-padding-start: calc(theme("spacing[0.5]") / 2); } -:host([scale="s"]) .container.is-circle { - --calcite-internal-chip-padding-start: 0; - --calcite-internal-chip-padding-end: 0; -} - .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); } @@ -289,8 +295,8 @@ justify-content: center; --calcite-chip-transparent-hover: var(--calcite-color-transparent-hover); --calcite-chip-transparent-press: var(--calcite-color-transparent-press); - --calcite-inernal-chip-padding-start: var(--calcite-spacing-xxs); - --calcite-inernal-chip-padding-end: var(--calcite-spacing-xxs); + --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); } From 2edd10575440206576ee8ef848c3ee7cebcb9990 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 2 Jul 2024 12:07:43 -0700 Subject: [PATCH 18/24] scss nesting refactor --- .../src/components/chip/chip.scss | 94 +++++++++---------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index 29d973c90e9..9f90e19e5ca 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -33,31 +33,31 @@ --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } - } - .multiple.image--slotted { - .select-icon { - --calcite-internal-chip-padding-start: var(--calcite-spacing-xs); - --calcite-internal-chip-padding-end: var(--calcite-spacing-sm); - } - } + &.image--slotted { + .select-icon { + --calcite-internal-chip-padding-start: var(--calcite-spacing-xs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-sm); + } - .multiple.container.image--slotted.text--slotted { - --calcite-internal-chip-padding-start: var(--calcite-spacing-px); - --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); + &.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); - } - .container.image--slotted { - --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); - } + &.image--slotted { + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); - .container.image--slotted.closable { - --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); + &.closable { + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); + } + } } } @@ -93,33 +93,33 @@ --calcite-internal-chip-padding-start: var(--calcite-spacing-base); --calcite-internal-chip-padding-end: var(--calcite-spacing-base); } - } - .multiple.image--slotted { - .select-icon { - --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); - --calcite-internal-chip-padding-end: var(--calcite-spacing-sm); - } - } + &.image--slotted { + .select-icon { + --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-sm); + } - .multiple.container.image--slotted.text--slotted { - --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); - --calcite-internal-chip-padding-end: var(--calcite-spacing-xs); + &.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); - } - .container.image--slotted { - --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); - --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); - .container.image--slotted.closable { - --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); - --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); + &.closable { + --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); + } + } } } @@ -156,28 +156,28 @@ --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } - } - .multiple.image--slotted { - .select-icon { - --calcite-internal-chip-padding-start: var(--calcite-spacing-xs); - --calcite-internal-chip-padding-end: var(--calcite-spacing-md); + &.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); - } - .container.image--slotted { - --calcite-internal-chip-padding-start: var(--calcite-spacing-xs); - --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); - .container.image--slotted.closable { - --calcite-internal-chip-padding-start: var(--calcite-spacing-xs); - --calcite-internal-chip-padding-end: var(--calcite-spacing-xs); + &.closable { + --calcite-internal-chip-padding-start: var(--calcite-spacing-xs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xs); + } + } } } From 9dd36487efcf1dc57911c8a4978c00de49a0c8b6 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 3 Jul 2024 12:38:07 -0700 Subject: [PATCH 19/24] cleanup --- packages/calcite-components/src/components/chip/chip.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index 9f90e19e5ca..2a8277cc956 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -200,6 +200,9 @@ rounded-full focus-base justify-center + border + border-solid + border-color-1 box-border font-medium; From a56891e96c44d0a991286e0098df329dbde3207b Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 3 Jul 2024 12:40:24 -0700 Subject: [PATCH 20/24] move stories to chip-group --- .../chip-group/chip-group.stories.ts | 33 +++++++++++++++++++ .../src/components/chip/chip.stories.ts | 33 ------------------- 2 files changed, 33 insertions(+), 33 deletions(-) diff --git a/packages/calcite-components/src/components/chip-group/chip-group.stories.ts b/packages/calcite-components/src/components/chip-group/chip-group.stories.ts index 4cec0a02082..e51a12d2571 100644 --- a/packages/calcite-components/src/components/chip-group/chip-group.stories.ts +++ b/packages/calcite-components/src/components/chip-group/chip-group.stories.ts @@ -87,3 +87,36 @@ export const darkThemeRTL_TestOnly = (): string => html` `; darkThemeRTL_TestOnly.parameters = { themes: modesDarkDefault }; + +export const multiPadding = (): string => html` +
+
+ + KML + + + KML + + + KML + +
+
+ + + KML + + + + KML + + + + + KML + + +
+
+`; diff --git a/packages/calcite-components/src/components/chip/chip.stories.ts b/packages/calcite-components/src/components/chip/chip.stories.ts index a70d251915a..f0fae8e2958 100644 --- a/packages/calcite-components/src/components/chip/chip.stories.ts +++ b/packages/calcite-components/src/components/chip/chip.stories.ts @@ -149,36 +149,3 @@ export const darkModeRTL_TestOnly = (): string => html` `; darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; - -export const multiPadding = (): string => html` -
-
- - KML - - - KML - - - KML - -
-
- - - KML - - - - KML - - - - - KML - - -
-
-`; From a39e66f2d35fb04661bba7eab7270f2c89a3962d Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 8 Jul 2024 16:18:58 -0700 Subject: [PATCH 21/24] fix circle chip and remove padding on select-icon if empty --- .../calcite-components/src/components/chip/chip.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index 2a8277cc956..3b2ca2be39d 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -5,6 +5,10 @@ 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; @@ -84,8 +88,8 @@ .container.is-circle.image--slotted { @apply w-8 h-8; - --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); - --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-start: var(--calcite-spacing-px); + --calcite-internal-chip-padding-end: var(--calcite-spacing-px); } .multiple { @@ -147,8 +151,8 @@ .container.is-circle.image--slotted { @apply w-11 h-11; - --calcite-internal-chip-padding-start: var(--calcite-spacing-xs); - --calcite-internal-chip-padding-end: var(--calcite-spacing-xs); + --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } .multiple { From 7e18749d6e61d7afe51fdff48a2b07877289b509 Mon Sep 17 00:00:00 2001 From: eliza Date: Sun, 14 Jul 2024 18:18:24 -0700 Subject: [PATCH 22/24] polish some padding issues --- .../src/components/chip/chip.scss | 44 ++++++++++++++++--- 1 file changed, 39 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index 3b2ca2be39d..e7e40ed439c 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -28,8 +28,8 @@ .container.is-circle.image--slotted { @apply w-6 h-6; - --calcite-internal-chip-padding-start: 0; - --calcite-internal-chip-padding-end: 0; + --calcite-internal-chip-padding-start: var(--calcite-spacing-px); + --calcite-internal-chip-padding-end: var(--calcite-spacing-px); } .multiple { @@ -63,6 +63,18 @@ } } } + + .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); // why is this 6px + } + + &.image--slotted .select-icon.select-icon--active { + padding-inline-start: var(--calcite-spacing-px); //xxxs (2px) doesn't work + padding-inline-end: var(--calcite-spacing-sm); + } + } } :host([scale="s"][closable]) .container { @@ -125,6 +137,18 @@ } } } + + .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); // should be 2px, but xxxs doesn't work + } + + &.image--slotted .select-icon.select-icon--active { + padding-inline-start: 0; + padding-inline-end: var(--calcite-spacing-sm); + } + } } :host([scale="m"][closable]) .container { @@ -183,6 +207,18 @@ } } } + + .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 { @@ -224,6 +260,7 @@ :host([scale="s"]) .container:not(.selected):not(.multiple).image--slotted { --calcite-internal-chip-padding-start: calc(theme("spacing[0.5]") / 2); + --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } .container.text--slotted .title { @@ -337,9 +374,6 @@ opacity: 0.5; } } -.container:not(.is-circle):not(.multiple).image--slotted .select-icon.select-icon--active { - margin-inline-end: var(--calcite-chip-spacing-s-internal); -} :host([selected]) .select-icon { opacity: 1; From 1f43542793e69734357e58349d145b5139ed2266 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 15 Jul 2024 08:24:21 -0700 Subject: [PATCH 23/24] WIP --- packages/calcite-components/src/components/chip/chip.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index e7e40ed439c..41db516d8de 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -56,6 +56,7 @@ --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 { @@ -67,11 +68,11 @@ .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); // why is this 6px + padding-inline-end: var(--calcite-spacing-xs); } &.image--slotted .select-icon.select-icon--active { - padding-inline-start: var(--calcite-spacing-px); //xxxs (2px) doesn't work + padding-inline-start: var(--calcite-spacing-base); padding-inline-end: var(--calcite-spacing-sm); } } @@ -260,7 +261,7 @@ :host([scale="s"]) .container:not(.selected):not(.multiple).image--slotted { --calcite-internal-chip-padding-start: calc(theme("spacing[0.5]") / 2); - --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); + // --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } .container.text--slotted .title { From 558cfc89f9b17442d9fc4276bc2548a2d469117f Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 15 Jul 2024 15:52:55 -0700 Subject: [PATCH 24/24] update an existing story to provide coverage for this instead of adding a padding-specific story --- .../chip-group/chip-group.stories.ts | 53 ++++--------------- .../src/components/chip/chip.scss | 3 +- 2 files changed, 11 insertions(+), 45 deletions(-) diff --git a/packages/calcite-components/src/components/chip-group/chip-group.stories.ts b/packages/calcite-components/src/components/chip-group/chip-group.stories.ts index 922a64f0427..dba9034b6f0 100644 --- a/packages/calcite-components/src/components/chip-group/chip-group.stories.ts +++ b/packages/calcite-components/src/components/chip-group/chip-group.stories.ts @@ -44,12 +44,12 @@ export const singleWithIcon_TestOnly = (): string => html` `; -export const multiple_TestOnly = (): string => html` +export const multipleClosable_TestOnly = (): string => html` - Forest - Tundra - Seashore - Estuary + Forest + Tundra + Seashore + Estuary `; @@ -62,21 +62,21 @@ export const multipleWithIcon_TestOnly = (): string => html` `; -export const multipleWithAvatar_TestOnly = (): string => html` +export const multipleClosableWithAvatar_TestOnly = (): string => html` - + Forest - + Tundra - + Seashore - + Estuary @@ -104,36 +104,3 @@ export const darkThemeRTL_TestOnly = (): string => html` `; darkThemeRTL_TestOnly.parameters = { themes: modesDarkDefault }; - -export const multiPadding = (): string => html` -
-
- - KML - - - KML - - - KML - -
-
- - - KML - - - - KML - - - - - KML - - -
-
-`; diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss index 41db516d8de..a84a83f8e90 100644 --- a/packages/calcite-components/src/components/chip/chip.scss +++ b/packages/calcite-components/src/components/chip/chip.scss @@ -142,7 +142,7 @@ .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); // should be 2px, but xxxs doesn't work + padding-inline-end: var(--calcite-spacing-px); } &.image--slotted .select-icon.select-icon--active { @@ -261,7 +261,6 @@ :host([scale="s"]) .container:not(.selected):not(.multiple).image--slotted { --calcite-internal-chip-padding-start: calc(theme("spacing[0.5]") / 2); - // --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs); } .container.text--slotted .title {