From 65d87635fea54363b7acf8d1c784c2be0155a014 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 15 Feb 2024 17:40:58 -0800 Subject: [PATCH 01/23] =?UTF-8?q?feat(input):=20add=20component=20token=20?= =?UTF-8?q?=E2=80=94calcite-input-border-radius?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/input/input.scss | 105 +++++++++++++++--- 1 file changed, 92 insertions(+), 13 deletions(-) diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss index c5890155d41..b999cd30c11 100755 --- a/packages/calcite-components/src/components/input/input.scss +++ b/packages/calcite-components/src/components/input/input.scss @@ -1,4 +1,5 @@ :host { + --calcite-input-corner-radius: var(--calcite-border-radius-sharp); @apply block; } @@ -104,19 +105,9 @@ input { block-size 0, outline-offset 0s; -webkit-appearance: none; - @apply font-inherit - text-color-1 - bg-foreground-1 - relative - m-0 - box-border - flex - max-h-full - w-full - max-w-full - flex-1 - rounded-none - font-normal; + border-radius: var(--calcite-input-corner-radius); + @apply font-inherit text-color-1 bg-foreground-1 relative m-0 + box-border flex max-h-full w-full max-w-full flex-1 font-normal; } input[type="search"]::-webkit-search-decoration { @@ -580,3 +571,91 @@ input { @include form-validation-message(); @include hidden-form-input(); @include base-component(); + +:host([number-button-type="horizontal"]) { + .wrapper { + // grid-template-columns: min-content min-content 1fr min-content min-content min-content; + // grid-template-areas: "numberDesc prefix input suffix numberAsc action"; + + > button:first-child { + border-start-start-radius: var(--calcite-input-corner-radius); + border-end-start-radius: var(--calcite-input-corner-radius); + } + + > button:last-of-type { + border-start-end-radius: var(--calcite-input-corner-radius); + border-end-end-radius: var(--calcite-input-corner-radius); + } + } + + button + button, + button + div, + button + div input { + border-start-start-radius: 0; + border-end-start-radius: 0; + } +} +:host([number-button-type="vertical"][type="number"]) { + input, + textarea { + border-start-end-radius: 0; + border-end-end-radius: 0; + } + .number-button-item { + &:first-child { + border-start-end-radius: var(--calcite-input-corner-radius); + } + &:last-child { + border-end-end-radius: var(--calcite-input-corner-radius); + } + } +} +:host([prefix-text]) { + input, + textarea { + border-start-start-radius: 0; + border-end-start-radius: 0; + } +} +:host([suffix-text]) { + input, + textarea { + border-start-end-radius: 0; + border-end-end-radius: 0; + } +} +:host([suffix-text][type="number"]:not([read-only])) { + .suffix { + border-start-end-radius: 0; + border-end-end-radius: 0; + } +} +:host(:not(:empty)) { + input { + border-start-end-radius: 0; + border-end-end-radius: 0; + } +} +:host([scale="l"]) { + .resize-icon-wrapper { + block-size: 18px; + inline-size: 18px; + } +} +:host(:not([suffix-text], [type="number"]:not([read-only]))) { + .wrapper:has(+ .validation-container) { + input { + border-start-end-radius: var(--calcite-input-corner-radius); + border-end-end-radius: var(--calcite-input-corner-radius); + } + } +} + +.prefix { + border-start-start-radius: var(--calcite-input-corner-radius); + border-end-start-radius: var(--calcite-input-corner-radius); +} +.suffix { + border-start-end-radius: var(--calcite-input-corner-radius); + border-end-end-radius: var(--calcite-input-corner-radius); +} From 5c4d58fcdd773a8f7bb3f596f71375b5462ed111 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 15 Feb 2024 17:45:21 -0800 Subject: [PATCH 02/23] feat(input): add --calcite-input-text-color component token --- .../src/components/input/input.scss | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss index b999cd30c11..afc36288a33 100755 --- a/packages/calcite-components/src/components/input/input.scss +++ b/packages/calcite-components/src/components/input/input.scss @@ -1,5 +1,7 @@ :host { --calcite-input-corner-radius: var(--calcite-border-radius-sharp); + --calcite-input-text-color: var(--calcite-color-text-1); + @apply block; } @@ -100,14 +102,16 @@ textarea, input { + @apply font-inherit bg-foreground-1 relative m-0 + box-border flex max-h-full w-full max-w-full flex-1 font-normal; + transition: var(--calcite-animation-timing), block-size 0, outline-offset 0s; -webkit-appearance: none; border-radius: var(--calcite-input-corner-radius); - @apply font-inherit text-color-1 bg-foreground-1 relative m-0 - box-border flex max-h-full w-full max-w-full flex-1 font-normal; + color: var(--calcite-input-text-color); } input[type="search"]::-webkit-search-decoration { @@ -120,7 +124,6 @@ textarea { @apply border border-color-input border-solid - text-color-1 text-ellipsis; &::placeholder, &:-ms-input-placeholder, @@ -133,16 +136,12 @@ textarea { } input:focus, textarea:focus { - @apply border-color-brand text-color-1; + @apply border-color-brand; } input[readonly], textarea[readonly] { @apply bg-background font-medium; } -input[readonly]:focus, -textarea[readonly]:focus { - @apply text-color-1; -} calcite-icon { @apply text-color-3; } From fc8d5f189ce41b23da53792d24cd2513c778fdb4 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 15 Feb 2024 17:58:12 -0800 Subject: [PATCH 03/23] feat(input): add --calcite-input-border-color component token --- .../src/components/input/input.scss | 38 ++++++++++--------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss index afc36288a33..efc901658df 100755 --- a/packages/calcite-components/src/components/input/input.scss +++ b/packages/calcite-components/src/components/input/input.scss @@ -1,6 +1,10 @@ :host { --calcite-input-corner-radius: var(--calcite-border-radius-sharp); --calcite-input-text-color: var(--calcite-color-text-1); + --calcite-input-border-color: var(--calcite-color-border-input); + + // For props that should follow the initial border-color but not change on statechange. + --calcite-internal-input-border-color-base: var(--calcite-input-border-color); @apply block; } @@ -102,7 +106,7 @@ textarea, input { - @apply font-inherit bg-foreground-1 relative m-0 + @apply border font-inherit bg-foreground-1 relative m-0 box-border flex max-h-full w-full max-w-full flex-1 font-normal; transition: @@ -112,6 +116,7 @@ input { -webkit-appearance: none; border-radius: var(--calcite-input-corner-radius); color: var(--calcite-input-text-color); + border-color: var(--calcite-input-border-color); } input[type="search"]::-webkit-search-decoration { @@ -121,8 +126,7 @@ input[type="search"]::-webkit-search-decoration { // states input, textarea { - @apply border - border-color-input + @apply border-spacing-1 border-solid text-ellipsis; &::placeholder, @@ -134,10 +138,6 @@ textarea { @apply text-ellipsis; } } -input:focus, -textarea:focus { - @apply border-color-brand; -} input[readonly], textarea[readonly] { @apply bg-background font-medium; @@ -157,10 +157,8 @@ input:focus { } :host([status="invalid"]) { - & input, - & textarea { - @apply border-color-danger; - } + --calcite-input-border-color: var(--calcite-color-status-danger); + & input:focus, & textarea:focus { @apply focus-inset-danger; @@ -292,8 +290,7 @@ input[type="time"]::-webkit-clear-button { // prefix and suffix .prefix, .suffix { - @apply border-color-input - bg-background + @apply bg-background text-color-2 box-border flex @@ -307,6 +304,8 @@ input[type="time"]::-webkit-clear-button { border-solid font-medium leading-none; + + border-color: var(--calcite-internal-input-border-color-base); } .prefix { @@ -389,9 +388,9 @@ input[type="number"] { } .number-button-item.number-button-item--horizontal[data-adjustment="down"] { - @apply border-color-input - border + @apply border border-solid; + border-color: var(--calcite-internal-input-border-color-base); border-inline-end-width: theme("borderWidth.0"); &:hover { @apply bg-foreground-2; @@ -433,8 +432,7 @@ input[type="number"] { max-block-size: 50%; min-block-size: 50%; pointer-events: initial; - @apply border-color-input - bg-foreground-1 + @apply bg-foreground-1 transition-default m-0 box-border @@ -446,6 +444,7 @@ input[type="number"] { border-solid py-0 px-2; + border-color: var(--calcite-internal-input-border-color-base); border-inline-start-width: theme("borderWidth.0"); & calcite-icon { @apply transition-default pointer-events-none; @@ -523,7 +522,6 @@ textarea::-webkit-resizer { // file input :host([type="file"]) input { @apply bg-foreground-1 - border-color-input cursor-pointer border border-dashed @@ -571,6 +569,10 @@ input { @include hidden-form-input(); @include base-component(); +:host(:focus) { + --calcite-input-border-color: var(--calcite-color-brand); +} + :host([number-button-type="horizontal"]) { .wrapper { // grid-template-columns: min-content min-content 1fr min-content min-content min-content; From 71ed5b6c5b46e3faa8901fb6b9fb7cf712ccd6ed Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 15 Feb 2024 18:05:06 -0800 Subject: [PATCH 04/23] feat(input): add --calcite-input-background-color component token --- .../src/components/input/input.scss | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss index efc901658df..29da412b8e4 100755 --- a/packages/calcite-components/src/components/input/input.scss +++ b/packages/calcite-components/src/components/input/input.scss @@ -2,6 +2,7 @@ --calcite-input-corner-radius: var(--calcite-border-radius-sharp); --calcite-input-text-color: var(--calcite-color-text-1); --calcite-input-border-color: var(--calcite-color-border-input); + --calcite-input-background-color: var(--calcite-color-foreground-1); // For props that should follow the initial border-color but not change on statechange. --calcite-internal-input-border-color-base: var(--calcite-input-border-color); @@ -106,7 +107,7 @@ textarea, input { - @apply border font-inherit bg-foreground-1 relative m-0 + @apply border font-inherit relative m-0 box-border flex max-h-full w-full max-w-full flex-1 font-normal; transition: @@ -117,6 +118,7 @@ input { border-radius: var(--calcite-input-corner-radius); color: var(--calcite-input-text-color); border-color: var(--calcite-input-border-color); + background-color: var(--calcite-input-background-color); } input[type="search"]::-webkit-search-decoration { @@ -140,7 +142,7 @@ textarea { } input[readonly], textarea[readonly] { - @apply bg-background font-medium; + @apply font-medium; } calcite-icon { @apply text-color-3; @@ -521,8 +523,7 @@ textarea::-webkit-resizer { // file input :host([type="file"]) input { - @apply bg-foreground-1 - cursor-pointer + @apply cursor-pointer border border-dashed text-center; @@ -573,6 +574,10 @@ input { --calcite-input-border-color: var(--calcite-color-brand); } +:host([read-only]) { + --calcite-input-background-color: var(--calcite-color-background); +} + :host([number-button-type="horizontal"]) { .wrapper { // grid-template-columns: min-content min-content 1fr min-content min-content min-content; From 1e3ad50b15d3662f517bd85cb9656ad246d8bb92 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 15 Feb 2024 18:27:29 -0800 Subject: [PATCH 05/23] feat(input): add --calcite-input-button-background-color(-hover,-active) component token --- .../src/components/input/input.scss | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss index 29da412b8e4..7c24e023b91 100755 --- a/packages/calcite-components/src/components/input/input.scss +++ b/packages/calcite-components/src/components/input/input.scss @@ -4,6 +4,11 @@ --calcite-input-border-color: var(--calcite-color-border-input); --calcite-input-background-color: var(--calcite-color-foreground-1); + // Button + --calcite-input-button-background-color: var(--calcite-color-foreground-1); + --calcite-input-button-background-color-hover: var(--calcite-color-foreground-2); + --calcite-input-button-background-color-active: var(--calcite-color-foreground-3); + // For props that should follow the initial border-color but not change on statechange. --calcite-internal-input-border-color-base: var(--calcite-input-border-color); @@ -240,7 +245,6 @@ input[type="time"]::-webkit-clear-button { pointer-events: initial; @apply focus-base border-color-input - bg-foreground-1 order-4 m-0 box-border @@ -253,16 +257,19 @@ input[type="time"]::-webkit-clear-button { border border-solid; + background-color: var(--calcite-input-button-background-color); border-inline-start-width: theme("borderWidth.0"); &:hover { - @apply bg-foreground-2 transition-default; + @apply transition-default; + --calcite-input-button-background-color: var(--calcite-input-button-background-color-hover); + calcite-icon { @apply text-color-1 transition-default; } } &:active { - @apply bg-foreground-3; + --calcite-input-button-background-color: var(--calcite-input-button-background-color-active); calcite-icon { @apply text-color-1; } @@ -395,7 +402,6 @@ input[type="number"] { border-color: var(--calcite-internal-input-border-color-base); border-inline-end-width: theme("borderWidth.0"); &:hover { - @apply bg-foreground-2; calcite-icon { @apply text-color-1; } @@ -405,7 +411,6 @@ input[type="number"] { .number-button-item.number-button-item--horizontal[data-adjustment="up"] { @apply order-5; &:hover { - @apply bg-foreground-2; calcite-icon { @apply text-color-1; } @@ -413,14 +418,12 @@ input[type="number"] { } :host([number-button-type="vertical"]) .number-button-item[data-adjustment="down"]:hover { - @apply bg-foreground-2; calcite-icon { @apply text-color-1; } } :host([number-button-type="vertical"]) .number-button-item[data-adjustment="up"]:hover { - @apply bg-foreground-2; calcite-icon { @apply text-color-1; } @@ -434,8 +437,7 @@ input[type="number"] { max-block-size: 50%; min-block-size: 50%; pointer-events: initial; - @apply bg-foreground-1 - transition-default + @apply transition-default m-0 box-border flex @@ -448,17 +450,19 @@ input[type="number"] { px-2; border-color: var(--calcite-internal-input-border-color-base); border-inline-start-width: theme("borderWidth.0"); + background-color: var(--calcite-input-button-background-color); & calcite-icon { @apply transition-default pointer-events-none; } - &:focus { - @apply bg-foreground-2; + &:focus, + &:hover { + --calcite-input-button-background-color: var(--calcite-input-button-background-color-hover); calcite-icon { @apply text-color-1; } } &:active { - @apply bg-foreground-3; + --calcite-input-button-background-color: var(--calcite-input-button-background-color-active); } &:disabled { @apply pointer-events-none; @@ -494,9 +498,9 @@ textarea::-webkit-resizer { .resize-icon-wrapper { inset-block-end: 2px; inset-inline-end: 2px; + background-color: var(--calcite-input-button-background-color); - @apply bg-foreground-1 - text-color-3 + @apply text-color-3 pointer-events-none absolute h-3 From 6b592a274602583fd5725d463bde35c7b8432b99 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 15 Feb 2024 18:49:57 -0800 Subject: [PATCH 06/23] feat(input): add --calcite-input-icon-color(-hover) component tokens --- .../src/components/input/input.scss | 43 +++++-------------- 1 file changed, 11 insertions(+), 32 deletions(-) diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss index 7c24e023b91..c0386fccf3d 100755 --- a/packages/calcite-components/src/components/input/input.scss +++ b/packages/calcite-components/src/components/input/input.scss @@ -9,6 +9,10 @@ --calcite-input-button-background-color-hover: var(--calcite-color-foreground-2); --calcite-input-button-background-color-active: var(--calcite-color-foreground-3); + // Icon + --calcite-input-icon-color: var(--calcite-color-text-3); + --calcite-input-icon-color-hover: var(--calcite-color-text-1); + // For props that should follow the initial border-color but not change on statechange. --calcite-internal-input-border-color-base: var(--calcite-input-border-color); @@ -150,7 +154,11 @@ textarea[readonly] { @apply font-medium; } calcite-icon { - @apply text-color-3; + color: var(--calcite-input-icon-color); +} +button:hover, +button:active { + --calcite-input-icon-color: var(--calcite-input-icon-color-hover); } //focus @@ -265,14 +273,11 @@ input[type="time"]::-webkit-clear-button { --calcite-input-button-background-color: var(--calcite-input-button-background-color-hover); calcite-icon { - @apply text-color-1 transition-default; + @apply transition-default; } } &:active { --calcite-input-button-background-color: var(--calcite-input-button-background-color-active); - calcite-icon { - @apply text-color-1; - } } &:focus { @apply focus-inset; @@ -401,32 +406,10 @@ input[type="number"] { border-solid; border-color: var(--calcite-internal-input-border-color-base); border-inline-end-width: theme("borderWidth.0"); - &:hover { - calcite-icon { - @apply text-color-1; - } - } } .number-button-item.number-button-item--horizontal[data-adjustment="up"] { @apply order-5; - &:hover { - calcite-icon { - @apply text-color-1; - } - } -} - -:host([number-button-type="vertical"]) .number-button-item[data-adjustment="down"]:hover { - calcite-icon { - @apply text-color-1; - } -} - -:host([number-button-type="vertical"]) .number-button-item[data-adjustment="up"]:hover { - calcite-icon { - @apply text-color-1; - } } :host([number-button-type="vertical"]) .number-button-item[data-adjustment="down"] { @@ -457,9 +440,6 @@ input[type="number"] { &:focus, &:hover { --calcite-input-button-background-color: var(--calcite-input-button-background-color-hover); - calcite-icon { - @apply text-color-1; - } } &:active { --calcite-input-button-background-color: var(--calcite-input-button-background-color-active); @@ -500,8 +480,7 @@ textarea::-webkit-resizer { inset-inline-end: 2px; background-color: var(--calcite-input-button-background-color); - @apply text-color-3 - pointer-events-none + @apply pointer-events-none absolute h-3 w-3; From 0a38603f2b46da26aec56cd2412a0b385975d4ee Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 15 Feb 2024 18:52:44 -0800 Subject: [PATCH 07/23] fix(input): update border component tokens --- packages/calcite-components/src/components/input/input.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss index c0386fccf3d..d3a17631cbf 100755 --- a/packages/calcite-components/src/components/input/input.scss +++ b/packages/calcite-components/src/components/input/input.scss @@ -252,7 +252,6 @@ input[type="time"]::-webkit-clear-button { .clear-button { pointer-events: initial; @apply focus-base - border-color-input order-4 m-0 box-border @@ -266,6 +265,7 @@ input[type="time"]::-webkit-clear-button { border-solid; background-color: var(--calcite-input-button-background-color); + border-color: var(--calcite-internal-input-border-color-base); border-inline-start-width: theme("borderWidth.0"); &:hover { @@ -404,7 +404,6 @@ input[type="number"] { .number-button-item.number-button-item--horizontal[data-adjustment="down"] { @apply border border-solid; - border-color: var(--calcite-internal-input-border-color-base); border-inline-end-width: theme("borderWidth.0"); } From 35e42026904601298ba67db9ba7c7d8852ebd32e Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 15 Feb 2024 18:55:52 -0800 Subject: [PATCH 08/23] feat(input): add prefix suffix text and background color --- .../calcite-components/src/components/input/input.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss index d3a17631cbf..789115378a7 100755 --- a/packages/calcite-components/src/components/input/input.scss +++ b/packages/calcite-components/src/components/input/input.scss @@ -13,6 +13,10 @@ --calcite-input-icon-color: var(--calcite-color-text-3); --calcite-input-icon-color-hover: var(--calcite-color-text-1); + // Prefix/Suffix + --calcite-input-prefixsuffix-text-color: var(--calcite-color-text-2); + --calcite-input-prefixsuffix-background-color: var(--calcite-color-background); + // For props that should follow the initial border-color but not change on statechange. --calcite-internal-input-border-color-base: var(--calcite-input-border-color); @@ -304,9 +308,7 @@ input[type="time"]::-webkit-clear-button { // prefix and suffix .prefix, .suffix { - @apply bg-background - text-color-2 - box-border + @apply box-border flex h-auto min-h-full @@ -319,6 +321,8 @@ input[type="time"]::-webkit-clear-button { font-medium leading-none; + color: var(--calcite-input-prefixsuffix-text-color); + background-color: var(--calcite-input-prefixsuffix-background-color); border-color: var(--calcite-internal-input-border-color-base); } From 86f278cffd52e89c4cfda42b9511c84f37559690 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 15 Feb 2024 18:56:36 -0800 Subject: [PATCH 09/23] feat(input): add placeholder component token --- packages/calcite-components/src/components/input/input.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss index 789115378a7..977b4c80351 100755 --- a/packages/calcite-components/src/components/input/input.scss +++ b/packages/calcite-components/src/components/input/input.scss @@ -17,6 +17,9 @@ --calcite-input-prefixsuffix-text-color: var(--calcite-color-text-2); --calcite-input-prefixsuffix-background-color: var(--calcite-color-background); + // Placeholder + --calcite-input-placeholder-text-color: var(--calcite-color-text-3); + // For props that should follow the initial border-color but not change on statechange. --calcite-internal-input-border-color-base: var(--calcite-input-border-color); @@ -147,7 +150,8 @@ textarea { &::placeholder, &:-ms-input-placeholder, &::-ms-input-placeholder { - @apply text-color-3 font-normal; + @apply font-normal; + color: var(--calcite-input-placeholder-text-color); } &:placeholder-shown { @apply text-ellipsis; From 02d0a424547f50a46f1ba66ea33856db687614ee Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 15 Feb 2024 19:02:31 -0800 Subject: [PATCH 10/23] docs(input): add component token jsdocs --- .../src/components/input/input.scss | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss index 977b4c80351..bc47eea183d 100755 --- a/packages/calcite-components/src/components/input/input.scss +++ b/packages/calcite-components/src/components/input/input.scss @@ -1,3 +1,23 @@ +/** + * CSS Custom Properties + * + * These properties can be overridden using the component's tag as selector. + * + * @prop --calcite-input-corner-radius: defines the border radius of the component. + * @prop --calcite-input-text-color: defines the text color of the component. + * @prop --calcite-input-border-color: defines the border color of the component. + * @prop --calcite-input-background-color: defines the background color of the component. + * @prop --calcite-input-button-background-color: defines the background color of a button element in the component. + * @prop --calcite-input-button-background-color-hover: defines the background color of a :hover-ed button element in the component. + * @prop --calcite-input-button-background-color-active: defines the background color of an :active button element in the component. + * @prop --calcite-input-icon-color: defines the color of an icon element in the component. + * @prop --calcite-input-icon-color-hover: defines the color of an icon element when it's parent is hovered in the component. + * @prop --calcite-input-prefixsuffix-text-color: defines the text color of a prefix/suffix element in the component. + * @prop --calcite-input-prefixsuffix-background-color: defines the background color of a prefix/suffix element in the component. + * @prop --calcite-input-placeholder-text-color: defines the color of placeholder text in the component. + * + */ + :host { --calcite-input-corner-radius: var(--calcite-border-radius-sharp); --calcite-input-text-color: var(--calcite-color-text-1); From fedd5d49a2105efb52da53ec2f46a55272fd4d1a Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Fri, 16 Feb 2024 17:14:22 -0800 Subject: [PATCH 11/23] fix(input): add prefix suffix tokens separately --- .../src/components/input/input.scss | 35 ++++++++++++++----- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss index bc47eea183d..3c76f750b1b 100755 --- a/packages/calcite-components/src/components/input/input.scss +++ b/packages/calcite-components/src/components/input/input.scss @@ -12,18 +12,21 @@ * @prop --calcite-input-button-background-color-active: defines the background color of an :active button element in the component. * @prop --calcite-input-icon-color: defines the color of an icon element in the component. * @prop --calcite-input-icon-color-hover: defines the color of an icon element when it's parent is hovered in the component. - * @prop --calcite-input-prefixsuffix-text-color: defines the text color of a prefix/suffix element in the component. - * @prop --calcite-input-prefixsuffix-background-color: defines the background color of a prefix/suffix element in the component. + * @prop --calcite-input-prefix-text-color: defines the prefix text color in the component. + * @prop --calcite-input-prefix-background-color: defines the prefix background color in the component. + * @prop --calcite-input-suffix-text-color: defines the suffix text color in the component. + * @prop --calcite-input-suffix-background-color: defines the suffix background color in the component. * @prop --calcite-input-placeholder-text-color: defines the color of placeholder text in the component. + * @prop --calcite-input-shadow: defines the box-shadow of the component. * */ :host { - --calcite-input-corner-radius: var(--calcite-border-radius-sharp); + --calcite-input-corner-radius: var(--calcite-corner-radius); --calcite-input-text-color: var(--calcite-color-text-1); --calcite-input-border-color: var(--calcite-color-border-input); --calcite-input-background-color: var(--calcite-color-foreground-1); - + --calcite-input-shadow: none; // Button --calcite-input-button-background-color: var(--calcite-color-foreground-1); --calcite-input-button-background-color-hover: var(--calcite-color-foreground-2); @@ -34,8 +37,10 @@ --calcite-input-icon-color-hover: var(--calcite-color-text-1); // Prefix/Suffix - --calcite-input-prefixsuffix-text-color: var(--calcite-color-text-2); - --calcite-input-prefixsuffix-background-color: var(--calcite-color-background); + --calcite-input-prefix-text-color: var(--calcite-color-text-2); + --calcite-input-prefix-background-color: var(--calcite-color-background); + --calcite-input-suffix-text-color: var(--calcite-color-text-2); + --calcite-input-suffix-background-color: var(--calcite-color-background); // Placeholder --calcite-input-placeholder-text-color: var(--calcite-color-text-3); @@ -44,6 +49,7 @@ --calcite-internal-input-border-color-base: var(--calcite-input-border-color); @apply block; + box-shadow: var(--calcite-input-shadow); } // scales @@ -344,11 +350,16 @@ input[type="time"]::-webkit-clear-button { border-solid font-medium leading-none; - - color: var(--calcite-input-prefixsuffix-text-color); - background-color: var(--calcite-input-prefixsuffix-background-color); border-color: var(--calcite-internal-input-border-color-base); } +.prefix { + color: var(--calcite-input-prefix-text-color); + background-color: var(--calcite-input-prefix-background-color); +} +.suffix { + color: var(--calcite-input-suffix-text-color); + background-color: var(--calcite-input-suffix-background-color); +} .prefix { @apply order-2; @@ -675,3 +686,9 @@ input { border-start-end-radius: var(--calcite-input-corner-radius); border-end-end-radius: var(--calcite-input-corner-radius); } +::slotted(*) { + border-start-start-radius: 0; + border-end-start-radius: 0; + border-start-end-radius: var(--calcite-input-corner-radius); + border-end-end-radius: var(--calcite-input-corner-radius); +} From cfa857f09269bdcc869fbce83a6422648aa0e157 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 20 Feb 2024 09:54:17 -0800 Subject: [PATCH 12/23] fix(input): clear button --- .../src/components/input/input.scss | 26 ++++++++++++++----- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss index 3c76f750b1b..607a2e08088 100755 --- a/packages/calcite-components/src/components/input/input.scss +++ b/packages/calcite-components/src/components/input/input.scss @@ -657,19 +657,14 @@ input { border-end-end-radius: 0; } } -:host(:not(:empty)) { - input { - border-start-end-radius: 0; - border-end-end-radius: 0; - } -} + :host([scale="l"]) { .resize-icon-wrapper { block-size: 18px; inline-size: 18px; } } -:host(:not([suffix-text], [type="number"]:not([read-only]))) { +:host(:not([clearable], [suffix-text], [type="number"]:not([read-only]))) { .wrapper:has(+ .validation-container) { input { border-start-end-radius: var(--calcite-input-corner-radius); @@ -677,6 +672,16 @@ input { } } } +:host(:not([type="number"], [suffix-text])) { + input:has(+ .clear-button) { + border-start-end-radius: 0; + border-end-end-radius: 0; + } + .clear-button { + border-start-end-radius: var(--calcite-input-corner-radius); + border-end-end-radius: var(--calcite-input-corner-radius); + } +} .prefix { border-start-start-radius: var(--calcite-input-corner-radius); @@ -686,6 +691,13 @@ input { border-start-end-radius: var(--calcite-input-corner-radius); border-end-end-radius: var(--calcite-input-corner-radius); } +:host(:not(:empty)) { + input, + .clear-button { + border-start-end-radius: 0; + border-end-end-radius: 0; + } +} ::slotted(*) { border-start-start-radius: 0; border-end-start-radius: 0; From c4c5e1e539ce4d0edf3e816129b37c5005be3bc0 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 20 Feb 2024 09:57:35 -0800 Subject: [PATCH 13/23] fix(input): update input-button-icon-color to be clearer --- packages/calcite-components/src/components/input/input.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss index 607a2e08088..8058feab1d1 100755 --- a/packages/calcite-components/src/components/input/input.scss +++ b/packages/calcite-components/src/components/input/input.scss @@ -11,7 +11,7 @@ * @prop --calcite-input-button-background-color-hover: defines the background color of a :hover-ed button element in the component. * @prop --calcite-input-button-background-color-active: defines the background color of an :active button element in the component. * @prop --calcite-input-icon-color: defines the color of an icon element in the component. - * @prop --calcite-input-icon-color-hover: defines the color of an icon element when it's parent is hovered in the component. + * @prop --calcite-input-button-icon-color-hover: defines the color of an icon element when it's parent is hovered in the component. * @prop --calcite-input-prefix-text-color: defines the prefix text color in the component. * @prop --calcite-input-prefix-background-color: defines the prefix background color in the component. * @prop --calcite-input-suffix-text-color: defines the suffix text color in the component. @@ -34,7 +34,7 @@ // Icon --calcite-input-icon-color: var(--calcite-color-text-3); - --calcite-input-icon-color-hover: var(--calcite-color-text-1); + --calcite-input-button-icon-color-hover: var(--calcite-color-text-1); // Prefix/Suffix --calcite-input-prefix-text-color: var(--calcite-color-text-2); @@ -192,7 +192,7 @@ calcite-icon { } button:hover, button:active { - --calcite-input-icon-color: var(--calcite-input-icon-color-hover); + --calcite-input-icon-color: var(--calcite-input-button-icon-color-hover); } //focus From 6e8bce801571c5b61d2d79a715baf5a6f494be1f Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 20 Feb 2024 10:01:16 -0800 Subject: [PATCH 14/23] fix(input): border-color of number inputs should not change --- packages/calcite-components/src/components/input/input.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss index 8058feab1d1..e90a8a25a01 100755 --- a/packages/calcite-components/src/components/input/input.scss +++ b/packages/calcite-components/src/components/input/input.scss @@ -46,7 +46,7 @@ --calcite-input-placeholder-text-color: var(--calcite-color-text-3); // For props that should follow the initial border-color but not change on statechange. - --calcite-internal-input-border-color-base: var(--calcite-input-border-color); + --calcite-internal-input-border-color-base: var(--calcite-color-border-input); @apply block; box-shadow: var(--calcite-input-shadow); From 5c4d86c4550b3c3906d722301f1d213beaf6b340 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 20 Feb 2024 22:07:06 -0800 Subject: [PATCH 15/23] docs(input): update storybook test --- .../src/components/input/input.stories.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/input/input.stories.ts b/packages/calcite-components/src/components/input/input.stories.ts index 4398de7e7d8..0913cb77dd9 100644 --- a/packages/calcite-components/src/components/input/input.stories.ts +++ b/packages/calcite-components/src/components/input/input.stories.ts @@ -26,17 +26,18 @@ export const simple = (): string => html` min="${number("min", 0)}" max="${number("max", 100)}" step="${number("step", 1)}" - prefix-text="${text("prefix-text", "")}" - suffix-text="${text("suffix-text", "")}" + ${text("prefix-text", "") && `prefix-text="${text("prefix-text", "")}"`} + ${text("suffix-text", "") && `suffix-text="${text("suffix-text", "")}"`} ${boolean("loading", false)} ${boolean("clearable", false)} ${boolean("disabled", false)} - value="${text("value", "")}" + ${text("value", "") && `value="${text("value", "")}"`} scale="${select("scale", ["s", "m", "l"], "m")}" status="${select("status", ["idle", "invalid", "valid"], "idle")}" placeholder="${text("placeholder", "Placeholder text")}" - validation-message="${text("validation-message", "")}" - validation-icon="${select("validation-icon", ["", ...iconNames], "")}" + ${text("validation-message", "") && `validation-message="${text("validation-message", "")}"`} + ${select("validation-icon", ["", ...iconNames], "") && + `validation-icon="${select("validation-icon", ["", ...iconNames], "")}"`} > `; From 71e6f872a402a1068516454edcb8f63db91f6703 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 20 Feb 2024 22:07:06 -0800 Subject: [PATCH 16/23] docs(input): update storybook tests --- .../src/components/input/input.stories.ts | 27 ++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/packages/calcite-components/src/components/input/input.stories.ts b/packages/calcite-components/src/components/input/input.stories.ts index 4398de7e7d8..337a66d798f 100644 --- a/packages/calcite-components/src/components/input/input.stories.ts +++ b/packages/calcite-components/src/components/input/input.stories.ts @@ -26,17 +26,18 @@ export const simple = (): string => html` min="${number("min", 0)}" max="${number("max", 100)}" step="${number("step", 1)}" - prefix-text="${text("prefix-text", "")}" - suffix-text="${text("suffix-text", "")}" + ${text("prefix-text", "") && `prefix-text="${text("prefix-text", "")}"`} + ${text("suffix-text", "") && `suffix-text="${text("suffix-text", "")}"`} ${boolean("loading", false)} ${boolean("clearable", false)} ${boolean("disabled", false)} - value="${text("value", "")}" + ${text("value", "") && `value="${text("value", "")}"`} scale="${select("scale", ["s", "m", "l"], "m")}" status="${select("status", ["idle", "invalid", "valid"], "idle")}" placeholder="${text("placeholder", "Placeholder text")}" - validation-message="${text("validation-message", "")}" - validation-icon="${select("validation-icon", ["", ...iconNames], "")}" + ${text("validation-message", "") && `validation-message="${text("validation-message", "")}"`} + ${select("validation-icon", ["", ...iconNames], "") && + `validation-icon="${select("validation-icon", ["", ...iconNames], "")}"`} > `; @@ -80,14 +81,16 @@ export const textarea_TestOnly = (): string => html` ${boolean("loading", false)} ${boolean("clearable", false)} ${boolean("disabled", false)} - prefix-text="${text("prefix-text", "")}" - suffix-text="${text("suffix-text", "")}" - value="${text("value", "")}" + ${text("prefix-text", "") && `prefix-text="${text("prefix-text", "")}"`} + ${text("suffix-text", "") && `suffix-text="${text("suffix-text", "")}"`} + ${text("value", "") && `value="${text("value", "")}"`} scale="${select("scale", ["s", "m", "l"], "m")}" status="${select("status", ["idle", "invalid", "valid"], "idle")}" placeholder="${text("placeholder", "Placeholder text")}" - validation-message="${text("validation-message", "My great input message")}" - validation-icon="${select("validation-icon", ["", ...iconNames], "")}" + ${text("validation-message", "My great input message") && + `validation-message="${text("validation-message", "My great input message")}"`} + ${select("validation-icon", ["", ...iconNames], "") && + `validation-icon="${select("validation-icon", ["", ...iconNames], "")}"`} > @@ -116,8 +119,8 @@ export const darkModeRTL_TestOnly = (): string => html` min="${number("min", 0)}" max="${number("max", 100)}" step="${number("step", 1)}" - prefix-text="${text("prefix-text", "")}" - suffix-text="${text("suffix-text", "")}" + ${text("prefix-text", "") && `prefix-text="${text("prefix-text", "")}"`} + ${text("suffix-text", "") && `suffix-text="${text("suffix-text", "")}"`} ${boolean("loading", false)} ${boolean("clearable", false)} ${boolean("disabled", false)} From affb1717b53d7d276fdd89e88d1d52591b16b553 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 20 Feb 2024 23:06:19 -0800 Subject: [PATCH 17/23] fix(input): fix border radius in number input edge cases --- .../src/components/input/input.scss | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss index e90a8a25a01..b6e19c31ee6 100755 --- a/packages/calcite-components/src/components/input/input.scss +++ b/packages/calcite-components/src/components/input/input.scss @@ -330,6 +330,17 @@ input[type="time"]::-webkit-clear-button { block; } +:host(:not([suffix-text], [type="number"]):empty) { + .loader { + inset-inline-end: calc(var(--calcite-input-corner-radius, 0px) / 2); + } +} +:host(:not([prefix-text], [number-button-type="horizontal"][type="number"])) { + .loader { + inset-inline-start: calc(var(--calcite-input-corner-radius, 0px) / 2); + } +} + // slotted action .action-wrapper { @apply order-7 flex; @@ -599,11 +610,8 @@ input { --calcite-input-background-color: var(--calcite-color-background); } -:host([number-button-type="horizontal"]) { +:host([number-button-type="horizontal"][type="number"]) { .wrapper { - // grid-template-columns: min-content min-content 1fr min-content min-content min-content; - // grid-template-areas: "numberDesc prefix input suffix numberAsc action"; - > button:first-child { border-start-start-radius: var(--calcite-input-corner-radius); border-end-start-radius: var(--calcite-input-corner-radius); @@ -616,11 +624,15 @@ input { } button + button, + input + button, button + div, - button + div input { + input + div { border-start-start-radius: 0; border-end-start-radius: 0; } + input { + border-radius: 0; + } } :host([number-button-type="vertical"][type="number"]) { input, From 85c2a2e3f2b11b59adf93aa72a7cc7fae8a54c89 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 22 Feb 2024 12:40:43 -0800 Subject: [PATCH 18/23] WIP: input mixin --- .../src/components/input/assets/_mixins.scss | 764 ++++++++++++++++++ 1 file changed, 764 insertions(+) create mode 100644 packages/calcite-components/src/components/input/assets/_mixins.scss diff --git a/packages/calcite-components/src/components/input/assets/_mixins.scss b/packages/calcite-components/src/components/input/assets/_mixins.scss new file mode 100644 index 00000000000..8924cfc82f4 --- /dev/null +++ b/packages/calcite-components/src/components/input/assets/_mixins.scss @@ -0,0 +1,764 @@ +@mixin setOnInputEl($type) { + @if ($type == "*") { + textarea, + input { + @content; + } + } @else if ($type == "textarea") { + textarea { + @content; + } + } @else { + input { + @content; + } + } +} + +@mixin input($componentName: 'input', $type) { + :host { + --calcite-{$componentName}-corner-radius: var(--calcite-corner-radius); + --calcite-{$componentName}-text-color: var(--calcite-color-text-1); + --calcite-{$componentName}-border-color: var(--calcite-color-border-input); + --calcite-{$componentName}-background-color: var(--calcite-color-foreground-1); + --calcite-{$componentName}-shadow: none; + // Button + --calcite-{$componentName}-button-background-color: var(--calcite-color-foreground-1); + --calcite-{$componentName}-button-background-color-hover: var(--calcite-color-foreground-2); + --calcite-{$componentName}-button-background-color-active: var(--calcite-color-foreground-3); + + // Icon + --calcite-{$componentName}-icon-color: var(--calcite-color-text-3); + --calcite-{$componentName}-button-icon-color-hover: var(--calcite-color-text-1); + + // Prefix/Suffix + --calcite-{$componentName}-prefix-text-color: var(--calcite-color-text-2); + --calcite-{$componentName}-prefix-background-color: var(--calcite-color-background); + --calcite-{$componentName}-suffix-text-color: var(--calcite-color-text-2); + --calcite-{$componentName}-suffix-background-color: var(--calcite-color-background); + + // Placeholder + --calcite-{$componentName}-placeholder-text-color: var(--calcite-color-text-3); + + // For props that should follow the initial border-color but not change on statechange. + --calcite-internal-input-border-color-base: var(--calcite-color-border-input); + --calcite-internal-input-outline-color: var(--calcite-color-brand); + + @apply block; + box-shadow: var(--calcite-{$componentName}-shadow); + } + + @include disabled() { + @if ($type == "textarea") or ($type == "*") { + textarea { + resize: none; + } + } + } + + // Scale + :host([scale="s"]) { + @if ($type == "textarea") { + .prefix, + .suffix { + @apply text-n2h h-6 px-2; + } + } @else { + input, + .prefix, + .suffix { + @apply text-n2h h-6 px-2; + } + } + @if ($type == "number") or ($type == "*") { + .number-button-wrapper, + .action-wrapper calcite-button, + .action-wrapper calcite-button button { + @apply h-6; + } + } @else { + .action-wrapper calcite-button, + .action-wrapper calcite-button button { + @apply h-6; + } + } + @if ($type == "file") or ($type == "*") { + input[type="file"] { + @apply h-6; + } + } + @if ($type == "textarea") or ($type == "*") { + textarea { + @apply @apply text-n2h + py-1 + px-2 + h-6; + min-block-size: theme("spacing.6"); + } + textarea { + } + } + @if ($type == "*") or not ($type == "textarea") { + input { + padding-inline-start: theme("padding.8"); + } + } + + .clear-button { + min-block-size: theme("spacing.6"); + min-inline-size: theme("spacing.6"); + } + .icon { + inset-inline-start: theme("spacing.2"); + } + } + :host([scale="m"]) { + @if ($type == "textarea") { + .prefix, + .suffix { + @apply text-n1h h-8 px-3; + } + } @else { + input, + .prefix, + .suffix { + @apply text-n1h h-8 px-3; + } + } + @if ($type == "textarea") or ($type == "*") { + textarea { + @apply text-n1h + h-auto + py-2 + px-3; + min-block-size: theme("spacing.8"); + } + } + @if ($type == "number") or ($type == "*") { + .number-button-wrapper, + .action-wrapper calcite-button, + .action-wrapper calcite-button button { + @apply h-8; + } + } @else { + .action-wrapper calcite-button, + .action-wrapper calcite-button button { + @apply h-8; + } + } + @if ($type == "file") or ($type == "*") { + input[type="file"] { + @apply h-8; + } + } + @if ($type == "*") or not ($type == "textarea") { + input { + padding-inline-start: theme("padding.10"); + } + } + + .clear-button { + min-block-size: theme("spacing.8"); + min-inline-size: theme("spacing.8"); + } + .icon { + inset-inline-start: theme("spacing.3"); + } + } + :host([scale="l"]) { + @if ($type == "textarea") { + .prefix, + .suffix { + @apply text-0h h-11 px-4; + } + } @else { + input, + .prefix, + .suffix { + @apply text-0h h-11 px-4; + } + } + @if ($type == "textarea") or ($type == "*") { + textarea { + @apply text-0h + h-auto + py-3 + px-4; + min-block-size: theme("spacing.11"); + } + .resize-icon-wrapper { + block-size: 18px; + inline-size: 18px; + } + } + @if ($type == "number") or ($type == "*") { + .number-button-wrapper, + .action-wrapper calcite-button, + .action-wrapper calcite-button button { + @apply h-11; + } + } @else { + .action-wrapper calcite-button, + .action-wrapper calcite-button button { + @apply h-11; + } + } + @if ($type == "file") or ($type == "*") { + input[type="file"] { + @apply h-11; + } + } + @if ($type == "*") or not ($type == "textarea") { + input { + padding-inline-start: theme("padding.14"); + } + } + + .clear-button { + min-block-size: theme("spacing.11"); + min-inline-size: theme("spacing.11"); + } + .icon { + inset-inline-start: theme("spacing.4"); + } + } + + // Status + :host([status="invalid"]) { + --calcite-{$componentName}-border-color: var(--calcite-color-status-danger); + --calcite-internal-input-outline-color: var(--calcite-color-status-danger); + } + :host(:focus) { + --calcite-{$componentName}-border-color: var(--calcite-color-brand); + } + :host([read-only]) { + --calcite-{$componentName}-background-color: var(--calcite-color-background); + } + + // Alignment + :host([alignment="start"]) { + --calcite-internal-input-text-align: start; + } + :host([alignment="end"]) { + --calcite-internal-input-text-align: end; + } + + // Border Radius (depending on ShadowDOM composition) + :host([number-button-type="horizontal"][type="number"]) { + .wrapper { + > button:first-child { + border-start-start-radius: var(--calcite-{$componentName}-corner-radius); + border-end-start-radius: var(--calcite-{$componentName}-corner-radius); + } + + > button:last-of-type { + border-start-end-radius: var(--calcite-{$componentName}-corner-radius); + border-end-end-radius: var(--calcite-{$componentName}-corner-radius); + } + } + + button + button, + input + button, + button + div, + input + div { + border-start-start-radius: 0; + border-end-start-radius: 0; + } + input { + border-radius: 0; + } + } + :host([number-button-type="vertical"][type="number"]) { + input, + textarea { + border-start-end-radius: 0; + border-end-end-radius: 0; + } + .number-button-item { + &:first-child { + border-start-end-radius: var(--calcite-{$componentName}-corner-radius); + } + &:last-child { + border-end-end-radius: var(--calcite-{$componentName}-corner-radius); + } + } + } + :host([prefix-text]) { + input, + textarea { + border-start-start-radius: 0; + border-end-start-radius: 0; + } + } + :host([suffix-text]) { + input, + textarea { + border-start-end-radius: 0; + border-end-end-radius: 0; + } + } + :host([suffix-text][type="number"]:not([read-only])) { + .suffix { + border-start-end-radius: 0; + border-end-end-radius: 0; + } + } + :host(:not([clearable], [suffix-text], [type="number"]:not([read-only]))) { + .wrapper:has(+ .validation-container) { + @include setOnInputEl($type) { + border-start-end-radius: var(--calcite-{$componentName}-corner-radius); + border-end-end-radius: var(--calcite-{$componentName}-corner-radius); + } + } + } + :host(:not([type="number"], [suffix-text])) { + @include setOnInputEl($type) { + &:has(+ .clear-button) { + border-start-end-radius: 0; + border-end-end-radius: 0; + } + } + .clear-button { + border-start-end-radius: var(--calcite-{$componentName}-corner-radius); + border-end-end-radius: var(--calcite-{$componentName}-corner-radius); + } + } + .prefix { + border-start-start-radius: var(--calcite-{$componentName}-corner-radius); + border-end-start-radius: var(--calcite-{$componentName}-corner-radius); + } + .suffix { + border-start-end-radius: var(--calcite-{$componentName}-corner-radius); + border-end-end-radius: var(--calcite-{$componentName}-corner-radius); + } + :host(:not(:empty)) { + .clear-button { + border-start-end-radius: 0; + border-end-end-radius: 0; + } + @include setOnInputEl($type) { + border-start-end-radius: 0; + border-end-end-radius: 0; + } + } + ::slotted(*) { + border-start-start-radius: 0; + border-end-start-radius: 0; + border-start-end-radius: var(--calcite-{$componentName}-corner-radius); + border-end-end-radius: var(--calcite-{$componentName}-corner-radius); + } + + // input, textarea + @include setOnInputEl($type) { + @apply border font-inherit relative m-0 + box-border flex max-h-full w-full max-w-full flex-1 font-normal border-spacing-1 + border-solid + text-ellipsis + focus-base; + + transition: + var(--calcite-animation-timing), + block-size 0, + outline-offset 0s; + -webkit-appearance: none; + border-radius: var(--calcite-{$componentName}-corner-radius); + color: var(--calcite-{$componentName}-text-color); + border-color: var(--calcite-{$componentName}-border-color); + background-color: var(--calcite-{$componentName}-background-color); + text-align: var(--calcite-internal-input-text-align); + + &::placeholder, + &:-ms-input-placeholder, + &::-ms-input-placeholder { + @apply font-normal; + color: var(--calcite-{$componentName}-placeholder-text-color); + } + &:placeholder-shown { + @apply text-ellipsis; + } + + // States + &:focus { + outline: 2px solid var(--calcite-internal-input-outline-color); + outline-offset: calc(-2px * calc(1 - 2 * clamp(0, var(--calcite-offset-invert-focus), 1))); + } + &[readonly] { + @apply font-medium; + } + &[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + @if ($type == "text") or ($type == "*") { + // hide browser default clear + &[type="text"]::-ms-clear, + &[type="text"]::-ms-reveal { + @apply hidden + h-0 + w-0; + } + } + @if ($type == "date") or ($type == "*") { + &[type="date"]::-webkit-input-placeholder { + visibility: hidden !important; + } + } + @if not($type == "textarea") { + @if ($type == "*") or ($type == "search") { + &[type="search"] { + &::-webkit-search-decoration, + &::-webkit-search-cancel-button, + &::-webkit-search-results-button, + &::-webkit-search-results-decoration { + @apply hidden; + } + } + } + @if ($type == "*") or ($type == "date") { + &[type="date"]::-webkit-clear-button { + @apply hidden; + } + } + @if ($type == "*") or ($type == "time") { + &[type="time"]::-webkit-clear-button { + @apply hidden; + } + } + @if ($type == "*") or ($type == "number") { + &[type="number"] { + -moz-appearance: textfield; + + &::-webkit-inner-spin-button, + &::-webkit-outer-spin-button { + -webkit-appearance: none; + -moz-appearance: textfield; + @apply m-0; + } + } + } + } + } + + calcite-icon { + color: var(--calcite-{$componentName}-icon-color); + } + + button { + &:hover, + &:active { + --calcite-{$componentName}-icon-color: var(--calcite-{$componentName}-button-icon-color-hover); + } + } + + .wrapper { + @apply relative + flex + flex-row + items-center; + } + + .element-wrapper { + @apply relative + order-3 + inline-flex + flex-1 + items-center; + } + + .icon { + @apply transition-default + pointer-events-none + absolute + block; + } + @if ($type == "textarea") or ($type == "*") { + .icon, + .resize-icon-wrapper { + @apply z-default; // needed for firefox to display the icon properly + } + } @else { + .icon { + @apply z-default; // needed for firefox to display the icon properly + } + } + + .clear-button { + pointer-events: initial; + @apply focus-base + order-4 + m-0 + box-border + flex + min-h-full + cursor-pointer + items-center + justify-center + self-stretch + border + border-solid; + + background-color: var(--calcite-{$componentName}-button-background-color); + border-color: var(--calcite-internal-input-border-color-base); + border-inline-start-width: theme("borderWidth.0"); + + &:hover { + @apply transition-default; + --calcite-{$componentName}-button-background-color: var(--calcite-{$componentName}-button-background-color-hover); + + calcite-icon { + @apply transition-default; + } + } + &:active { + --calcite-{$componentName}-button-background-color: var(--calcite-{$componentName}-button-background-color-active); + } + &:focus { + @apply focus-inset; + } + &:disabled { + @apply opacity-disabled; + } + } + + // loading + .loader { + @apply pointer-events-none + absolute + block; + + inset-block-start: 1px; + inset-inline: 1px; + } + :host(:not([suffix-text], [type="number"]):empty) { + .loader { + inset-inline-end: calc(var(--calcite-{$componentName}-corner-radius, 0px) / 2); + } + } + :host(:not([prefix-text], [number-button-type="horizontal"][type="number"])) { + .loader { + inset-inline-start: calc(var(--calcite-{$componentName}-corner-radius, 0px) / 2); + } + } + + // slotted action + .action-wrapper { + @apply order-7 flex; + } + + // prefix and suffix + .prefix, + .suffix { + @apply box-border + flex + h-auto + min-h-full + select-none + content-center + items-center + break-words + border + border-solid + font-medium + leading-none; + border-color: var(--calcite-internal-input-border-color-base); + } + .prefix { + @apply order-2; + border-inline-end-width: theme("borderWidth.0"); + color: var(--calcite-{$componentName}-prefix-text-color); + background-color: var(--calcite-{$componentName}-prefix-background-color); + } + .suffix { + @apply order-5; + border-inline-start-width: theme("borderWidth.0"); + color: var(--calcite-{$componentName}-suffix-text-color); + background-color: var(--calcite-{$componentName}-suffix-background-color); + } + + @if ($type == "*") or ($type == "number") { + .number-button-wrapper { + @apply transition-default + pointer-events-none + order-6 + box-border + flex + flex-col; + } + .number-button-item { + max-block-size: 50%; + min-block-size: 50%; + pointer-events: initial; + @apply transition-default + m-0 + box-border + flex + cursor-pointer + items-center + self-center + border + border-solid + py-0 + px-2; + border-color: var(--calcite-internal-input-border-color-base); + border-inline-start-width: theme("borderWidth.0"); + background-color: var(--calcite-{$componentName}-button-background-color); + + &:focus, + &:hover { + --calcite-{$componentName}-button-background-color: var(--calcite-{$componentName}-button-background-color-hover); + } + &:active { + --calcite-{$componentName}-button-background-color: var(--calcite-{$componentName}-button-background-color-active); + } + &:disabled { + @apply pointer-events-none; + } + + &.number-button-item--horizontal { + &[data-adjustment="down"], + &[data-adjustment="up"] { + @apply order-1 + max-h-full + min-h-full + self-stretch; + & calcite-icon { + transform: rotate(90deg); + } + } + } + &.number-button-item--horizontal { + &[data-adjustment="up"] { + @apply order-5; + } + &[data-adjustment="down"] { + @apply border + border-solid; + border-inline-end-width: theme("borderWidth.0"); + } + } + + calcite-icon { + @apply transition-default pointer-events-none; + } + } + + :host([number-button-type="vertical"]) { + input { + @apply order-2; + } + .wrapper { + flex-direction: row; + display: flex; + } + .number-button-item[data-adjustment="down"] { + @apply border-t-0; + } + } + + :host([number-button-type="horizontal"]) { + .calcite--rtl { + & .number-button-item[data-adjustment="down"] calcite-icon { + transform: rotate(-90deg); + } + & .number-button-item[data-adjustment="up"] calcite-icon { + transform: rotate(-90deg); + } + } + } + } + @if ($type == "*") or ($type == "date") { + // hide the default date picker + :input::-webkit-calendar-picker-indicator { + @apply hidden; + } + } + @if ($type == "*") or ($type == "textarea") { + // textarea resize icon + textarea::-webkit-resizer { + @apply absolute + bottom-0 + box-border + py-0 + px-1; + inset-inline-end: 0; + } + + .resize-icon-wrapper { + inset-block-end: 2px; + inset-inline-end: 2px; + background-color: var(--calcite-{$componentName}-button-background-color); + + @apply pointer-events-none + absolute + h-3 + w-3; + + & calcite-icon { + inset-block-end: theme("spacing.1"); + inset-inline-end: theme("spacing.1"); + transform: rotate(-45deg); + } + } + + .calcite--rtl { + .resize-icon-wrapper { + & calcite-icon { + transform: rotate(45deg); + } + } + } + } + @if ($type == "*") or ($type == "color") { + :host([type="color"]) input { + @apply p-1; + } + } + @if ($type == "*") or ($type == "file") { + // file input + :host([type="file"]) input { + @apply cursor-pointer + border + border-dashed + text-center; + } + :host([type="file"][scale="s"]) input { + @apply py-px px-2; + } + :host([type="file"][scale="m"]) input { + @apply py-1 px-3; + } + :host([type="file"][scale="l"]) input { + @apply py-2 px-4; + } + } + @if not($type == "textarea") { + :host(.no-bottom-border) input { + @apply border-b-0; + } + + :host(.border-top-color-one) input { + @apply border-t-color-1; + } + + // input needed for higher specificity of these overrides + input { + &.inline-child { + @apply transition-default bg-transparent; + .editing-enabled { + background-color: inherit; + } + } + + &.inline-child:not(.editing-enabled) { + @apply border-color-transparent + flex + cursor-pointer text-ellipsis; + padding-inline-start: 0; + } + } + } + + @include form-validation-message(); + @include hidden-form-input(); + @include base-component(); +} From b60cdc6c868d7741543a34e5de04a114f2be301f Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 22 Feb 2024 14:05:51 -0800 Subject: [PATCH 19/23] refactor(input): use input mixin to improve maintenance --- .../src/components/input/assets/_mixins.scss | 221 +++--- .../src/components/input/input.scss | 704 +----------------- 2 files changed, 142 insertions(+), 783 deletions(-) diff --git a/packages/calcite-components/src/components/input/assets/_mixins.scss b/packages/calcite-components/src/components/input/assets/_mixins.scss index 8924cfc82f4..da3d3872720 100644 --- a/packages/calcite-components/src/components/input/assets/_mixins.scss +++ b/packages/calcite-components/src/components/input/assets/_mixins.scss @@ -15,37 +15,102 @@ } } -@mixin input($componentName: 'input', $type) { - :host { - --calcite-{$componentName}-corner-radius: var(--calcite-corner-radius); - --calcite-{$componentName}-text-color: var(--calcite-color-text-1); - --calcite-{$componentName}-border-color: var(--calcite-color-border-input); - --calcite-{$componentName}-background-color: var(--calcite-color-foreground-1); - --calcite-{$componentName}-shadow: none; - // Button - --calcite-{$componentName}-button-background-color: var(--calcite-color-foreground-1); - --calcite-{$componentName}-button-background-color-hover: var(--calcite-color-foreground-2); - --calcite-{$componentName}-button-background-color-active: var(--calcite-color-foreground-3); - - // Icon - --calcite-{$componentName}-icon-color: var(--calcite-color-text-3); - --calcite-{$componentName}-button-icon-color-hover: var(--calcite-color-text-1); - - // Prefix/Suffix - --calcite-{$componentName}-prefix-text-color: var(--calcite-color-text-2); - --calcite-{$componentName}-prefix-background-color: var(--calcite-color-background); - --calcite-{$componentName}-suffix-text-color: var(--calcite-color-text-2); - --calcite-{$componentName}-suffix-background-color: var(--calcite-color-background); - - // Placeholder - --calcite-{$componentName}-placeholder-text-color: var(--calcite-color-text-3); - - // For props that should follow the initial border-color but not change on statechange. - --calcite-internal-input-border-color-base: var(--calcite-color-border-input); - --calcite-internal-input-outline-color: var(--calcite-color-brand); +@mixin setInputTokens($component: "input", $subcomponent: "") { + // Set Defaults + @if ($subcomponent == "") { + :host { + --calcite-#{$component}-corner-radius: var(--calcite-corner-radius); + --calcite-#{$component}-text-color: var(--calcite-color-text-1); + --calcite-#{$component}-border-color: var(--calcite-color-border-input); + --calcite-#{$component}-background-color: var(--calcite-color-foreground-1); + --calcite-#{$component}-shadow: none; + // Button + --calcite-#{$component}-button-background-color: var(--calcite-color-foreground-1); + --calcite-#{$component}-button-background-color-hover: var(--calcite-color-foreground-2); + --calcite-#{$component}-button-background-color-active: var(--calcite-color-foreground-3); + + // Icon + --calcite-#{$component}-icon-color: var(--calcite-color-text-3); + --calcite-#{$component}-button-icon-color-hover: var(--calcite-color-text-1); + + // Prefix/Suffix + --calcite-#{$component}-prefix-text-color: var(--calcite-color-text-2); + --calcite-#{$component}-prefix-background-color: var(--calcite-color-background); + --calcite-#{$component}-suffix-text-color: var(--calcite-color-text-2); + --calcite-#{$component}-suffix-background-color: var(--calcite-color-background); + + // Placeholder + --calcite-#{$component}-placeholder-text-color: var(--calcite-color-text-3); + + // For props that should follow the initial border-color but not change on statechange. + --calcite-internal-#{$component}-border-color-base: var(--calcite-color-border-input); + --calcite-internal-#{$component}-outline-color: var(--calcite-color-brand); + } + } @else { + calcite-#{$subcomponent} { + --calcite-#{$subcomponent}-corner-radius: var(--calcite-#{$component}-#{$subcomponent}-corner-radius); + --calcite-#{$subcomponent}-text-color: var(--calcite-#{$component}-#{$subcomponent}-text-color); + --calcite-#{$subcomponent}-border-color: var(--calcite-#{$component}-#{$subcomponent}-border-color); + --calcite-#{$subcomponent}-background-color: var(--calcite-#{$component}-#{$subcomponent}-background-color); + --calcite-#{$subcomponent}-button-background-color: var( + --calcite-#{$component}-#{$subcomponent}-button-background-color + ); + --calcite-#{$subcomponent}-button-background-color-hover: var( + --calcite-#{$component}-#{$subcomponent}-button-background-color-hover + ); + --calcite-#{$subcomponent}-button-background-color-active: var( + --calcite-#{$component}-#{$subcomponent}-button-background-color-active + ); + --calcite-#{$subcomponent}-icon-color: var(--calcite-#{$component}-#{$subcomponent}-icon-color); + --calcite-#{$subcomponent}-button-icon-color-hover: var( + --calcite-#{$component}-#{$subcomponent}-button-icon-color-hover + ); + --calcite-#{$subcomponent}-prefix-text-color: var(--calcite-#{$component}-#{$subcomponent}-prefix-text-color); + --calcite-#{$subcomponent}-prefix-background-color: var( + --calcite-#{$component}-#{$subcomponent}-prefix-background-color + ); + --calcite-#{$subcomponent}-suffix-text-color: var(--calcite-#{$component}-#{$subcomponent}-suffix-text-color); + --calcite-#{$subcomponent}-suffix-background-color: var( + --calcite-#{$component}-#{$subcomponent}-suffix-background-color + ); + --calcite-#{$subcomponent}-placeholder-text-color: var( + --calcite-#{$component}-#{$subcomponent}-placeholder-text-color + ); + } + } + + // Set on state change + @if ($subcomponent == "") { + // Status + :host([status="invalid"]) { + --calcite-#{$component}-border-color: var(--calcite-color-status-danger); + --calcite-internal-#{$component}-outline-color: var(--calcite-color-status-danger); + } + :host(:focus) { + --calcite-#{$component}-border-color: var(--calcite-color-brand); + } + :host([read-only]) { + --calcite-#{$component}-background-color: var(--calcite-color-background); + } + } @else { + calcite-#{$subcomponent}[status="invalid"] { + --calcite-#{$subcomponent}-border-color: var(--calcite-#{$component}-#{$subcomponent}-border-color); + } + calcite-#{$subcomponent}:focus { + --calcite-#{$subcomponent}-border-color: var(--calcite-#{$component}-#{$subcomponent}-border-color); + } + calcite-#{$subcomponent}[read-only] { + --calcite-#{$subcomponent}-background-color: var(--calcite-#{$component}-#{$subcomponent}-background-color); + } + } +} +@mixin input($component: "input", $type: "*") { + @include setInputTokens($component); + + :host { @apply block; - box-shadow: var(--calcite-{$componentName}-shadow); + box-shadow: var(--calcite-#{$component}-shadow); } @include disabled() { @@ -223,37 +288,25 @@ } } - // Status - :host([status="invalid"]) { - --calcite-{$componentName}-border-color: var(--calcite-color-status-danger); - --calcite-internal-input-outline-color: var(--calcite-color-status-danger); - } - :host(:focus) { - --calcite-{$componentName}-border-color: var(--calcite-color-brand); - } - :host([read-only]) { - --calcite-{$componentName}-background-color: var(--calcite-color-background); - } - // Alignment :host([alignment="start"]) { - --calcite-internal-input-text-align: start; + --calcite-internal-#{$component}-text-align: start; } :host([alignment="end"]) { - --calcite-internal-input-text-align: end; + --calcite-internal-#{$component}-text-align: end; } // Border Radius (depending on ShadowDOM composition) :host([number-button-type="horizontal"][type="number"]) { .wrapper { > button:first-child { - border-start-start-radius: var(--calcite-{$componentName}-corner-radius); - border-end-start-radius: var(--calcite-{$componentName}-corner-radius); + border-start-start-radius: var(--calcite-#{$component}-corner-radius); + border-end-start-radius: var(--calcite-#{$component}-corner-radius); } > button:last-of-type { - border-start-end-radius: var(--calcite-{$componentName}-corner-radius); - border-end-end-radius: var(--calcite-{$componentName}-corner-radius); + border-start-end-radius: var(--calcite-#{$component}-corner-radius); + border-end-end-radius: var(--calcite-#{$component}-corner-radius); } } @@ -276,10 +329,10 @@ } .number-button-item { &:first-child { - border-start-end-radius: var(--calcite-{$componentName}-corner-radius); + border-start-end-radius: var(--calcite-#{$component}-corner-radius); } &:last-child { - border-end-end-radius: var(--calcite-{$componentName}-corner-radius); + border-end-end-radius: var(--calcite-#{$component}-corner-radius); } } } @@ -306,8 +359,8 @@ :host(:not([clearable], [suffix-text], [type="number"]:not([read-only]))) { .wrapper:has(+ .validation-container) { @include setOnInputEl($type) { - border-start-end-radius: var(--calcite-{$componentName}-corner-radius); - border-end-end-radius: var(--calcite-{$componentName}-corner-radius); + border-start-end-radius: var(--calcite-#{$component}-corner-radius); + border-end-end-radius: var(--calcite-#{$component}-corner-radius); } } } @@ -319,17 +372,17 @@ } } .clear-button { - border-start-end-radius: var(--calcite-{$componentName}-corner-radius); - border-end-end-radius: var(--calcite-{$componentName}-corner-radius); + border-start-end-radius: var(--calcite-#{$component}-corner-radius); + border-end-end-radius: var(--calcite-#{$component}-corner-radius); } } .prefix { - border-start-start-radius: var(--calcite-{$componentName}-corner-radius); - border-end-start-radius: var(--calcite-{$componentName}-corner-radius); + border-start-start-radius: var(--calcite-#{$component}-corner-radius); + border-end-start-radius: var(--calcite-#{$component}-corner-radius); } .suffix { - border-start-end-radius: var(--calcite-{$componentName}-corner-radius); - border-end-end-radius: var(--calcite-{$componentName}-corner-radius); + border-start-end-radius: var(--calcite-#{$component}-corner-radius); + border-end-end-radius: var(--calcite-#{$component}-corner-radius); } :host(:not(:empty)) { .clear-button { @@ -344,8 +397,8 @@ ::slotted(*) { border-start-start-radius: 0; border-end-start-radius: 0; - border-start-end-radius: var(--calcite-{$componentName}-corner-radius); - border-end-end-radius: var(--calcite-{$componentName}-corner-radius); + border-start-end-radius: var(--calcite-#{$component}-corner-radius); + border-end-end-radius: var(--calcite-#{$component}-corner-radius); } // input, textarea @@ -361,17 +414,17 @@ block-size 0, outline-offset 0s; -webkit-appearance: none; - border-radius: var(--calcite-{$componentName}-corner-radius); - color: var(--calcite-{$componentName}-text-color); - border-color: var(--calcite-{$componentName}-border-color); - background-color: var(--calcite-{$componentName}-background-color); - text-align: var(--calcite-internal-input-text-align); + border-radius: var(--calcite-#{$component}-corner-radius); + color: var(--calcite-#{$component}-text-color); + border-color: var(--calcite-#{$component}-border-color); + background-color: var(--calcite-#{$component}-background-color); + text-align: var(--calcite-internal-#{$component}-text-align); &::placeholder, &:-ms-input-placeholder, &::-ms-input-placeholder { @apply font-normal; - color: var(--calcite-{$componentName}-placeholder-text-color); + color: var(--calcite-#{$component}-placeholder-text-color); } &:placeholder-shown { @apply text-ellipsis; @@ -379,7 +432,7 @@ // States &:focus { - outline: 2px solid var(--calcite-internal-input-outline-color); + outline: 2px solid var(--calcite-internal-#{$component}-outline-color); outline-offset: calc(-2px * calc(1 - 2 * clamp(0, var(--calcite-offset-invert-focus), 1))); } &[readonly] { @@ -440,13 +493,13 @@ } calcite-icon { - color: var(--calcite-{$componentName}-icon-color); + color: var(--calcite-#{$component}-icon-color); } button { &:hover, &:active { - --calcite-{$componentName}-icon-color: var(--calcite-{$componentName}-button-icon-color-hover); + --calcite-#{$component}-icon-color: var(--calcite-#{$component}-button-icon-color-hover); } } @@ -497,20 +550,20 @@ border border-solid; - background-color: var(--calcite-{$componentName}-button-background-color); - border-color: var(--calcite-internal-input-border-color-base); + background-color: var(--calcite-#{$component}-button-background-color); + border-color: var(--calcite-internal-#{$component}-border-color-base); border-inline-start-width: theme("borderWidth.0"); &:hover { @apply transition-default; - --calcite-{$componentName}-button-background-color: var(--calcite-{$componentName}-button-background-color-hover); + --calcite-#{$component}-button-background-color: var(--calcite-#{$component}-button-background-color-hover); calcite-icon { @apply transition-default; } } &:active { - --calcite-{$componentName}-button-background-color: var(--calcite-{$componentName}-button-background-color-active); + --calcite-#{$component}-button-background-color: var(--calcite-#{$component}-button-background-color-active); } &:focus { @apply focus-inset; @@ -531,12 +584,12 @@ } :host(:not([suffix-text], [type="number"]):empty) { .loader { - inset-inline-end: calc(var(--calcite-{$componentName}-corner-radius, 0px) / 2); + inset-inline-end: calc(var(--calcite-#{$component}-corner-radius, 0px) / 2); } } :host(:not([prefix-text], [number-button-type="horizontal"][type="number"])) { .loader { - inset-inline-start: calc(var(--calcite-{$componentName}-corner-radius, 0px) / 2); + inset-inline-start: calc(var(--calcite-#{$component}-corner-radius, 0px) / 2); } } @@ -560,19 +613,19 @@ border-solid font-medium leading-none; - border-color: var(--calcite-internal-input-border-color-base); + border-color: var(--calcite-internal-#{$component}-border-color-base); } .prefix { @apply order-2; border-inline-end-width: theme("borderWidth.0"); - color: var(--calcite-{$componentName}-prefix-text-color); - background-color: var(--calcite-{$componentName}-prefix-background-color); + color: var(--calcite-#{$component}-prefix-text-color); + background-color: var(--calcite-#{$component}-prefix-background-color); } .suffix { @apply order-5; border-inline-start-width: theme("borderWidth.0"); - color: var(--calcite-{$componentName}-suffix-text-color); - background-color: var(--calcite-{$componentName}-suffix-background-color); + color: var(--calcite-#{$component}-suffix-text-color); + background-color: var(--calcite-#{$component}-suffix-background-color); } @if ($type == "*") or ($type == "number") { @@ -599,16 +652,16 @@ border-solid py-0 px-2; - border-color: var(--calcite-internal-input-border-color-base); + border-color: var(--calcite-internal-#{$component}-border-color-base); border-inline-start-width: theme("borderWidth.0"); - background-color: var(--calcite-{$componentName}-button-background-color); + background-color: var(--calcite-#{$component}-button-background-color); &:focus, &:hover { - --calcite-{$componentName}-button-background-color: var(--calcite-{$componentName}-button-background-color-hover); + --calcite-#{$component}-button-background-color: var(--calcite-#{$component}-button-background-color-hover); } &:active { - --calcite-{$componentName}-button-background-color: var(--calcite-{$componentName}-button-background-color-active); + --calcite-#{$component}-button-background-color: var(--calcite-#{$component}-button-background-color-active); } &:disabled { @apply pointer-events-none; @@ -686,7 +739,7 @@ .resize-icon-wrapper { inset-block-end: 2px; inset-inline-end: 2px; - background-color: var(--calcite-{$componentName}-button-background-color); + background-color: var(--calcite-#{$component}-button-background-color); @apply pointer-events-none absolute diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss index b6e19c31ee6..5f5ce9cfeba 100755 --- a/packages/calcite-components/src/components/input/input.scss +++ b/packages/calcite-components/src/components/input/input.scss @@ -5,12 +5,12 @@ * * @prop --calcite-input-corner-radius: defines the border radius of the component. * @prop --calcite-input-text-color: defines the text color of the component. - * @prop --calcite-input-border-color: defines the border color of the component. - * @prop --calcite-input-background-color: defines the background color of the component. - * @prop --calcite-input-button-background-color: defines the background color of a button element in the component. + * @prop --calcite-input-border-color: defines the border color of the component. This token is reassigned on `:host([status="invalid"])` and `:host(:focus)` + * @prop --calcite-input-background-color: defines the background color of the component. This token is reassigned on `:host([read-only])` + * @prop --calcite-input-button-background-color: defines the background color of a button element in the component. This token is reassigned by `--calcite-input-button-background-color-hover` on `:hover` and `--calcite-input-button-background-color-active` on `:active` * @prop --calcite-input-button-background-color-hover: defines the background color of a :hover-ed button element in the component. * @prop --calcite-input-button-background-color-active: defines the background color of an :active button element in the component. - * @prop --calcite-input-icon-color: defines the color of an icon element in the component. + * @prop --calcite-input-icon-color: defines the color of an icon element in the component. This token is redefined by `--calcite-input-button-icon-color-hover` when the sub-component is `:hover` or `:active` * @prop --calcite-input-button-icon-color-hover: defines the color of an icon element when it's parent is hovered in the component. * @prop --calcite-input-prefix-text-color: defines the prefix text color in the component. * @prop --calcite-input-prefix-background-color: defines the prefix background color in the component. @@ -21,698 +21,4 @@ * */ -:host { - --calcite-input-corner-radius: var(--calcite-corner-radius); - --calcite-input-text-color: var(--calcite-color-text-1); - --calcite-input-border-color: var(--calcite-color-border-input); - --calcite-input-background-color: var(--calcite-color-foreground-1); - --calcite-input-shadow: none; - // Button - --calcite-input-button-background-color: var(--calcite-color-foreground-1); - --calcite-input-button-background-color-hover: var(--calcite-color-foreground-2); - --calcite-input-button-background-color-active: var(--calcite-color-foreground-3); - - // Icon - --calcite-input-icon-color: var(--calcite-color-text-3); - --calcite-input-button-icon-color-hover: var(--calcite-color-text-1); - - // Prefix/Suffix - --calcite-input-prefix-text-color: var(--calcite-color-text-2); - --calcite-input-prefix-background-color: var(--calcite-color-background); - --calcite-input-suffix-text-color: var(--calcite-color-text-2); - --calcite-input-suffix-background-color: var(--calcite-color-background); - - // Placeholder - --calcite-input-placeholder-text-color: var(--calcite-color-text-3); - - // For props that should follow the initial border-color but not change on statechange. - --calcite-internal-input-border-color-base: var(--calcite-color-border-input); - - @apply block; - box-shadow: var(--calcite-input-shadow); -} - -// scales -:host([scale="s"]) { - & input, - & .prefix, - & .suffix { - @apply text-n2h h-6 px-2; - } - & textarea { - @apply h-6; - min-block-size: theme("spacing.6"); - } - & .number-button-wrapper, - & .action-wrapper calcite-button, - & .action-wrapper calcite-button button { - @apply h-6; - } - & input[type="file"] { - @apply h-6; - } - & .clear-button { - min-block-size: theme("spacing.6"); - min-inline-size: theme("spacing.6"); - } - & textarea { - @apply text-n2h - h-auto - py-1 - px-2; - } -} - -:host([scale="m"]) { - & input, - & .prefix, - & .suffix { - @apply text-n1h h-8 px-3; - } - & textarea { - min-block-size: theme("spacing.8"); - } - & .number-button-wrapper, - & .action-wrapper calcite-button, - & .action-wrapper calcite-button button { - @apply h-8; - } - & input[type="file"] { - @apply h-8; - } - & .clear-button { - min-block-size: theme("spacing.8"); - min-inline-size: theme("spacing.8"); - } - & textarea { - @apply text-n1h - h-auto - py-2 - px-3; - } -} - -:host([scale="l"]) { - & input, - & .prefix, - & .suffix { - @apply text-0h h-11 px-4; - } - & textarea { - min-block-size: theme("spacing.11"); - } - & .number-button-wrapper, - & .action-wrapper calcite-button, - & .action-wrapper calcite-button button { - @apply h-11; - } - & input[type="file"] { - @apply h-11; - } - & .clear-button { - min-block-size: theme("spacing.11"); - min-inline-size: theme("spacing.11"); - } - & textarea { - @apply text-0h - h-auto - py-3 - px-4; - } -} - -@include disabled() { - & textarea { - resize: none; - } -} - -textarea, -input { - @apply border font-inherit relative m-0 - box-border flex max-h-full w-full max-w-full flex-1 font-normal; - - transition: - var(--calcite-animation-timing), - block-size 0, - outline-offset 0s; - -webkit-appearance: none; - border-radius: var(--calcite-input-corner-radius); - color: var(--calcite-input-text-color); - border-color: var(--calcite-input-border-color); - background-color: var(--calcite-input-background-color); -} - -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -// states -input, -textarea { - @apply border-spacing-1 - border-solid - text-ellipsis; - &::placeholder, - &:-ms-input-placeholder, - &::-ms-input-placeholder { - @apply font-normal; - color: var(--calcite-input-placeholder-text-color); - } - &:placeholder-shown { - @apply text-ellipsis; - } -} -input[readonly], -textarea[readonly] { - @apply font-medium; -} -calcite-icon { - color: var(--calcite-input-icon-color); -} -button:hover, -button:active { - --calcite-input-icon-color: var(--calcite-input-button-icon-color-hover); -} - -//focus -textarea, -input { - @apply focus-base; -} -textarea:focus, -input:focus { - @apply focus-inset; -} - -:host([status="invalid"]) { - --calcite-input-border-color: var(--calcite-color-status-danger); - - & input:focus, - & textarea:focus { - @apply focus-inset-danger; - } -} - -// ICONS - -// position icons - -:host([scale="s"]) .icon { - inset-inline-start: theme("spacing.2"); -} - -:host([scale="m"]) .icon { - inset-inline-start: theme("spacing.3"); -} - -:host([scale="l"]) .icon { - inset-inline-start: theme("spacing.4"); -} - -// position placeholder/value text in relation to icons - -:host([icon][scale="s"]) input { - padding-inline-start: theme("padding.8"); -} - -:host([icon][scale="m"]) input { - padding-inline-start: theme("padding.10"); -} - -:host([icon][scale="l"]) input { - padding-inline-start: theme("padding.14"); -} - -// positioning wrapper for icon and loader - -.element-wrapper { - @apply relative - order-3 - inline-flex - flex-1 - items-center; -} - -.icon { - @apply transition-default - pointer-events-none - absolute - block; -} - -.icon, -.resize-icon-wrapper { - @apply z-default; // needed for firefox to display the icon properly -} - -// hide browser default clear - -input[type="text"]::-ms-clear, -input[type="text"]::-ms-reveal { - @apply hidden - h-0 - w-0; -} -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-results-button, -input[type="search"]::-webkit-search-results-decoration, -input[type="date"]::-webkit-clear-button, -input[type="time"]::-webkit-clear-button { - @apply hidden; -} - -.clear-button { - pointer-events: initial; - @apply focus-base - order-4 - m-0 - box-border - flex - min-h-full - cursor-pointer - items-center - justify-center - self-stretch - border - border-solid; - - background-color: var(--calcite-input-button-background-color); - border-color: var(--calcite-internal-input-border-color-base); - border-inline-start-width: theme("borderWidth.0"); - - &:hover { - @apply transition-default; - --calcite-input-button-background-color: var(--calcite-input-button-background-color-hover); - - calcite-icon { - @apply transition-default; - } - } - &:active { - --calcite-input-button-background-color: var(--calcite-input-button-background-color-active); - } - &:focus { - @apply focus-inset; - } - &:disabled { - @apply opacity-disabled; - } -} - -// loading -.loader { - inset-block-start: 1px; - inset-inline: 1px; - @apply pointer-events-none - absolute - block; -} - -:host(:not([suffix-text], [type="number"]):empty) { - .loader { - inset-inline-end: calc(var(--calcite-input-corner-radius, 0px) / 2); - } -} -:host(:not([prefix-text], [number-button-type="horizontal"][type="number"])) { - .loader { - inset-inline-start: calc(var(--calcite-input-corner-radius, 0px) / 2); - } -} - -// slotted action -.action-wrapper { - @apply order-7 flex; -} - -// prefix and suffix -.prefix, -.suffix { - @apply box-border - flex - h-auto - min-h-full - select-none - content-center - items-center - break-words - border - border-solid - font-medium - leading-none; - border-color: var(--calcite-internal-input-border-color-base); -} -.prefix { - color: var(--calcite-input-prefix-text-color); - background-color: var(--calcite-input-prefix-background-color); -} -.suffix { - color: var(--calcite-input-suffix-text-color); - background-color: var(--calcite-input-suffix-background-color); -} - -.prefix { - @apply order-2; - border-inline-end-width: theme("borderWidth.0"); -} -.suffix { - @apply order-5; - border-inline-start-width: theme("borderWidth.0"); -} - -// alignment type -:host([alignment="start"]) { - & textarea, - & input { - text-align: start; - } -} - -:host([alignment="end"]) { - & textarea, - & input { - text-align: end; - } -} - -// number buttons -input[type="number"] { - -moz-appearance: textfield; - - &::-webkit-inner-spin-button, - &::-webkit-outer-spin-button { - -webkit-appearance: none; - -moz-appearance: textfield; - @apply m-0; - } -} - -.number-button-wrapper { - @apply transition-default - pointer-events-none - order-6 - box-border - flex - flex-col; -} - -:host([number-button-type="vertical"]) .wrapper { - flex-direction: row; - display: flex; -} - -:host([number-button-type="vertical"]) { - & input, - textarea { - @apply order-2; - } -} - -:host([number-button-type="horizontal"]) .calcite--rtl { - & .number-button-item[data-adjustment="down"] calcite-icon { - transform: rotate(-90deg); - } - & .number-button-item[data-adjustment="up"] calcite-icon { - transform: rotate(-90deg); - } -} - -.number-button-item.number-button-item--horizontal { - &[data-adjustment="down"], - &[data-adjustment="up"] { - @apply order-1 - max-h-full - min-h-full - self-stretch; - & calcite-icon { - transform: rotate(90deg); - } - } -} - -.number-button-item.number-button-item--horizontal[data-adjustment="down"] { - @apply border - border-solid; - border-inline-end-width: theme("borderWidth.0"); -} - -.number-button-item.number-button-item--horizontal[data-adjustment="up"] { - @apply order-5; -} - -:host([number-button-type="vertical"]) .number-button-item[data-adjustment="down"] { - @apply border-t-0; -} - -.number-button-item { - max-block-size: 50%; - min-block-size: 50%; - pointer-events: initial; - @apply transition-default - m-0 - box-border - flex - cursor-pointer - items-center - self-center - border - border-solid - py-0 - px-2; - border-color: var(--calcite-internal-input-border-color-base); - border-inline-start-width: theme("borderWidth.0"); - background-color: var(--calcite-input-button-background-color); - & calcite-icon { - @apply transition-default pointer-events-none; - } - &:focus, - &:hover { - --calcite-input-button-background-color: var(--calcite-input-button-background-color-hover); - } - &:active { - --calcite-input-button-background-color: var(--calcite-input-button-background-color-active); - } - &:disabled { - @apply pointer-events-none; - } -} - -.wrapper { - @apply relative - flex - flex-row - items-center; -} - -// hide the default date picker -:input::-webkit-calendar-picker-indicator { - @apply hidden; -} - -input[type="date"]::-webkit-input-placeholder { - visibility: hidden !important; -} - -// textarea resize icon -textarea::-webkit-resizer { - @apply absolute - bottom-0 - box-border - py-0 - px-1; - inset-inline-end: 0; -} - -.resize-icon-wrapper { - inset-block-end: 2px; - inset-inline-end: 2px; - background-color: var(--calcite-input-button-background-color); - - @apply pointer-events-none - absolute - h-3 - w-3; - - & calcite-icon { - inset-block-end: theme("spacing.1"); - inset-inline-end: theme("spacing.1"); - transform: rotate(-45deg); - } -} - -.calcite--rtl { - .resize-icon-wrapper { - & calcite-icon { - transform: rotate(45deg); - } - } -} - -:host([type="color"]) input { - @apply p-1; -} - -// file input -:host([type="file"]) input { - @apply cursor-pointer - border - border-dashed - text-center; -} - -:host([type="file"][scale="s"]) input { - @apply py-px px-2; -} - -:host([type="file"][scale="m"]) input { - @apply py-1 px-3; -} - -:host([type="file"][scale="l"]) input { - @apply py-2 px-4; -} - -:host(.no-bottom-border) input { - @apply border-b-0; -} - -:host(.border-top-color-one) input { - @apply border-t-color-1; -} - -// input needed for higher specificity of these overrides -input { - &.inline-child { - @apply transition-default bg-transparent; - .editing-enabled { - background-color: inherit; - } - } - - &.inline-child:not(.editing-enabled) { - @apply border-color-transparent - flex - cursor-pointer text-ellipsis; - padding-inline-start: 0; - } -} - -@include form-validation-message(); -@include hidden-form-input(); -@include base-component(); - -:host(:focus) { - --calcite-input-border-color: var(--calcite-color-brand); -} - -:host([read-only]) { - --calcite-input-background-color: var(--calcite-color-background); -} - -:host([number-button-type="horizontal"][type="number"]) { - .wrapper { - > button:first-child { - border-start-start-radius: var(--calcite-input-corner-radius); - border-end-start-radius: var(--calcite-input-corner-radius); - } - - > button:last-of-type { - border-start-end-radius: var(--calcite-input-corner-radius); - border-end-end-radius: var(--calcite-input-corner-radius); - } - } - - button + button, - input + button, - button + div, - input + div { - border-start-start-radius: 0; - border-end-start-radius: 0; - } - input { - border-radius: 0; - } -} -:host([number-button-type="vertical"][type="number"]) { - input, - textarea { - border-start-end-radius: 0; - border-end-end-radius: 0; - } - .number-button-item { - &:first-child { - border-start-end-radius: var(--calcite-input-corner-radius); - } - &:last-child { - border-end-end-radius: var(--calcite-input-corner-radius); - } - } -} -:host([prefix-text]) { - input, - textarea { - border-start-start-radius: 0; - border-end-start-radius: 0; - } -} -:host([suffix-text]) { - input, - textarea { - border-start-end-radius: 0; - border-end-end-radius: 0; - } -} -:host([suffix-text][type="number"]:not([read-only])) { - .suffix { - border-start-end-radius: 0; - border-end-end-radius: 0; - } -} - -:host([scale="l"]) { - .resize-icon-wrapper { - block-size: 18px; - inline-size: 18px; - } -} -:host(:not([clearable], [suffix-text], [type="number"]:not([read-only]))) { - .wrapper:has(+ .validation-container) { - input { - border-start-end-radius: var(--calcite-input-corner-radius); - border-end-end-radius: var(--calcite-input-corner-radius); - } - } -} -:host(:not([type="number"], [suffix-text])) { - input:has(+ .clear-button) { - border-start-end-radius: 0; - border-end-end-radius: 0; - } - .clear-button { - border-start-end-radius: var(--calcite-input-corner-radius); - border-end-end-radius: var(--calcite-input-corner-radius); - } -} - -.prefix { - border-start-start-radius: var(--calcite-input-corner-radius); - border-end-start-radius: var(--calcite-input-corner-radius); -} -.suffix { - border-start-end-radius: var(--calcite-input-corner-radius); - border-end-end-radius: var(--calcite-input-corner-radius); -} -:host(:not(:empty)) { - input, - .clear-button { - border-start-end-radius: 0; - border-end-end-radius: 0; - } -} -::slotted(*) { - border-start-start-radius: 0; - border-end-start-radius: 0; - border-start-end-radius: var(--calcite-input-corner-radius); - border-end-end-radius: var(--calcite-input-corner-radius); -} +@include input(); From 6aead69ccbf1bc1b66f1d800afc8823653a33840 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 22 Feb 2024 14:06:05 -0800 Subject: [PATCH 20/23] feat(input-text): add component tokens --- .../src/components/input-text/input-text.scss | 372 ++---------------- 1 file changed, 24 insertions(+), 348 deletions(-) diff --git a/packages/calcite-components/src/components/input-text/input-text.scss b/packages/calcite-components/src/components/input-text/input-text.scss index d46e7ec4315..a90a32b7466 100755 --- a/packages/calcite-components/src/components/input-text/input-text.scss +++ b/packages/calcite-components/src/components/input-text/input-text.scss @@ -1,348 +1,24 @@ -:host { - @apply block; -} - -// scales -:host([scale="s"]) { - & input { - padding-inline-start: theme("spacing.2"); - padding-inline-end: var(--calcite-internal-input-text-input-padding-inline-end, theme("spacing.2")); - } - - & input, - & .prefix, - & .suffix { - @apply text-n2h h-6; - } - - & .prefix, - & .suffix { - @apply px-2; - } - - & .action-wrapper calcite-button, - & .action-wrapper calcite-button button { - @apply h-6; - } - - & .clear-button { - min-block-size: theme("spacing.6"); - min-inline-size: theme("spacing.6"); - } -} - -:host([scale="m"]) { - & input { - padding-inline-start: theme("spacing.3"); - padding-inline-end: var(--calcite-internal-input-text-input-padding-inline-end, theme("spacing.3")); - } - - & input, - & .prefix, - & .suffix { - @apply text-n1h h-8; - } - - & .prefix, - & .suffix { - @apply px-3; - } - - & .action-wrapper calcite-button, - & .action-wrapper calcite-button button { - @apply h-8; - } - - & .clear-button { - min-block-size: theme("spacing.8"); - min-inline-size: theme("spacing.8"); - } -} - -:host([scale="l"]) { - & input { - padding-inline-start: theme("spacing.4"); - padding-inline-end: var(--calcite-internal-input-text-input-padding-inline-end, theme("spacing.4")); - } - - & input, - & .prefix, - & .suffix { - @apply text-0h h-11; - } - - & .prefix, - & .suffix { - @apply px-4; - } - - & .action-wrapper calcite-button, - & .action-wrapper calcite-button button { - @apply h-11; - } - - & .clear-button { - min-block-size: theme("spacing.11"); - min-inline-size: theme("spacing.11"); - } -} - -@include disabled(); - -input { - transition: - var(--calcite-animation-timing), - block-size 0, - outline-offset 0s; - -webkit-appearance: none; - @apply bg-foreground-1 - box-border - flex - flex-1 - font-inherit - font-normal - m-0 - max-h-full - max-w-full - relative - rounded-none - text-color-1 - text-ellipsis - w-full; - - &:placeholder-shown { - @apply text-ellipsis; - } -} - -// states -input { - @apply text-color-1 - border-color-input - border - border-solid; - &::placeholder, - &:-ms-input-placeholder, - &::-ms-input-placeholder { - @apply text-color-3 font-normal; - } -} -input:focus { - @apply border-color-brand text-color-1; -} -input[readonly] { - @apply bg-background font-medium; -} -input[readonly]:focus { - @apply text-color-1; -} -calcite-icon { - @apply text-color-3; -} - -//focus - -input { - @apply focus-base; -} -input:focus { - @apply focus-inset; -} - -:host([status="invalid"]) { - & input { - @apply border-color-danger; - } - & input:focus { - @apply focus-inset-danger; - } -} - -// ICONS - -// position icons - -:host([scale="s"]) .icon { - inset-inline-start: theme("spacing.2"); -} - -:host([scale="m"]) .icon { - inset-inline-start: theme("spacing.3"); -} - -:host([scale="l"]) .icon { - inset-inline-start: theme("spacing.4"); -} - -// position placeholder/value text in relation to icons - -:host([icon][scale="s"]) input { - padding-inline-start: theme("padding.8"); -} - -:host([icon][scale="m"]) input { - padding-inline-start: theme("padding.10"); -} - -:host([icon][scale="l"]) input { - padding-inline-start: theme("padding.14"); -} - -// positioning wrapper for icon and loader - -.element-wrapper { - @apply relative - order-3 - inline-flex - flex-1 - items-center; -} - -.icon { - @apply transition-default - pointer-events-none - absolute - block - - z-default; // needed for firefox to display the icon properly -} - -// hide browser default clear - -input[type="text"]::-ms-clear, -input[type="text"]::-ms-reveal { - @apply hidden - h-0 - w-0; -} - -.clear-button { - pointer-events: initial; - @apply focus-base - border-color-input - bg-foreground-1 - order-4 - m-0 - box-border - flex - min-h-full - cursor-pointer - items-center - justify-center - self-stretch - border - border-solid; - - border-inline-start-width: theme("borderWidth.0"); - - &:hover { - @apply bg-foreground-2 transition-default; - calcite-icon { - @apply text-color-1 transition-default; - } - } - &:active { - @apply bg-foreground-3; - calcite-icon { - @apply text-color-1; - } - } - &:focus { - @apply focus-inset; - } - &:disabled { - @apply opacity-disabled; - } -} - -// loading -.loader { - inset-block-start: 1px; - inset-inline: 1px; - @apply pointer-events-none - absolute - block; -} - -// slotted action -.action-wrapper { - @apply order-7 flex; -} - -// prefix and suffix -.prefix, -.suffix { - @apply border-color-input - bg-background - text-color-2 - box-border - flex - h-auto - min-h-full - select-none - content-center - items-center - break-words - border - border-solid - font-medium - leading-none; -} - -.prefix { - @apply order-2; - border-inline-end-width: theme("borderWidth.0"); -} -.suffix { - @apply order-5; - border-inline-start-width: theme("borderWidth.0"); -} - -// alignment type -:host([alignment="start"]) { - & input { - text-align: start; - } -} - -:host([alignment="end"]) { - & input { - text-align: end; - } -} - -.wrapper { - @apply relative - flex - flex-row - items-center; -} - -:host(.no-bottom-border) input { - @apply border-b-0; -} - -:host(.border-top-color-one) input { - @apply border-t-color-1; -} - -// input needed for higher specificity of these overrides -input { - &.inline-child { - @apply transition-default bg-transparent; - .editing-enabled { - background-color: inherit; - } - } - - &.inline-child:not(.editing-enabled) { - @apply border-color-transparent - flex - cursor-pointer text-ellipsis; - padding-inline-start: 0; - } -} - -@include form-validation-message(); -@include hidden-form-input(); -@include base-component(); +/** + * CSS Custom Properties + * + * These properties can be overridden using the component's tag as selector. + * + * @prop --calcite-input-text-number-corner-radius: defines the border radius of the component. + * @prop --calcite-input-text-number-text-color: defines the text color of the component. + * @prop --calcite-input-text-number-border-color: defines the border color of the component. This token is reassigned on `:host([status="invalid"])` and `:host(:focus)` + * @prop --calcite-input-text-number-background-color: defines the background color of the component. This token is reassigned on `:host([read-only])` + * @prop --calcite-input-text-number-button-background-color: defines the background color of a button element in the component. This token is reassigned by `--calcite-input-text-number-button-background-color-hover` on `:hover` and `--calcite-input-text-number-button-background-color-active` on `:active` + * @prop --calcite-input-text-number-button-background-color-hover: defines the background color of a :hover-ed button element in the component. + * @prop --calcite-input-text-number-button-background-color-active: defines the background color of an :active button element in the component. + * @prop --calcite-input-text-number-icon-color: defines the color of an icon element in the component. This token is redefined by `--calcite-input-text-number-button-icon-color-hover` when the sub-component is `:hover` or `:active` + * @prop --calcite-input-text-number-button-icon-color-hover: defines the color of an icon element when it's parent is hovered in the component. + * @prop --calcite-input-text-number-prefix-text-color: defines the prefix text color in the component. + * @prop --calcite-input-text-number-prefix-background-color: defines the prefix background color in the component. + * @prop --calcite-input-text-number-suffix-text-color: defines the suffix text color in the component. + * @prop --calcite-input-text-number-suffix-background-color: defines the suffix background color in the component. + * @prop --calcite-input-text-number-placeholder-text-color: defines the color of placeholder text in the component. + * @prop --calcite-input-text-number-shadow: defines the box-shadow of the component. + * + */ + +@include input("input-text-text", "text"); From 6a0024526532976151a26e06a00d88ec6050274a Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 22 Feb 2024 14:06:18 -0800 Subject: [PATCH 21/23] feat(input-number): add component tokens --- .../components/input-number/input-number.scss | 448 +----------------- 1 file changed, 24 insertions(+), 424 deletions(-) diff --git a/packages/calcite-components/src/components/input-number/input-number.scss b/packages/calcite-components/src/components/input-number/input-number.scss index d349bfeaec0..b9f6acdab80 100755 --- a/packages/calcite-components/src/components/input-number/input-number.scss +++ b/packages/calcite-components/src/components/input-number/input-number.scss @@ -1,424 +1,24 @@ -:host { - @apply block; -} - -// scales -:host([scale="s"]) { - & input, - & .prefix, - & .suffix { - @apply text-n2h h-6 px-2; - } - & .number-button-wrapper, - & .action-wrapper calcite-button, - & .action-wrapper calcite-button button { - @apply h-6; - } - & .clear-button { - min-block-size: theme("spacing.6"); - min-inline-size: theme("spacing.6"); - } -} - -:host([scale="m"]) { - & input, - & .prefix, - & .suffix { - @apply text-n1h h-8 px-3; - } - & .number-button-wrapper, - & .action-wrapper calcite-button, - & .action-wrapper calcite-button button { - @apply h-8; - } - & .clear-button { - min-block-size: theme("spacing.8"); - min-inline-size: theme("spacing.8"); - } -} - -:host([scale="l"]) { - & input, - & .prefix, - & .suffix { - @apply text-0h h-11 px-4; - } - & .number-button-wrapper, - & .action-wrapper calcite-button, - & .action-wrapper calcite-button button { - @apply h-11; - } - & .clear-button { - min-block-size: theme("spacing.11"); - min-inline-size: theme("spacing.11"); - } -} - -@include disabled(); - -input { - transition: - var(--calcite-animation-timing), - block-size 0, - outline-offset 0s; - -webkit-appearance: none; - @apply bg-foreground-1 - box-border - flex - flex-1 - font-inherit - font-normal - m-0 - max-h-full - max-w-full - relative - rounded-none - text-color-1 - text-ellipsis - w-full; - - &:placeholder-shown { - @apply text-ellipsis; - } -} - -// states -input { - @apply text-color-1 - border-color-input - border - border-solid; - &::placeholder, - &:-ms-input-placeholder, - &::-ms-input-placeholder { - @apply text-color-3 font-normal; - } -} -input:focus { - @apply border-color-brand text-color-1; -} -input[readonly] { - @apply bg-background font-medium; -} -input[readonly]:focus { - @apply text-color-1; -} -calcite-icon { - @apply text-color-3; -} - -//focus -input { - @apply focus-base; -} - -input:focus { - @apply focus-inset; -} - -:host([status="invalid"]) { - & input { - @apply border-color-danger; - } - & input:focus { - @apply focus-inset-danger; - } -} - -// ICONS - -// position icons - -:host([scale="s"]) .icon { - inset-inline-start: theme("spacing.2"); -} - -:host([scale="m"]) .icon { - inset-inline-start: theme("spacing.3"); -} - -:host([scale="l"]) .icon { - inset-inline-start: theme("spacing.4"); -} - -// position placeholder/value text in relation to icons - -:host([icon][scale="s"]) input { - padding-inline-start: theme("padding.8"); -} - -:host([icon][scale="m"]) input { - padding-inline-start: theme("padding.10"); -} - -:host([icon][scale="l"]) input { - padding-inline-start: theme("padding.14"); -} - -// positioning wrapper for icon and loader - -.element-wrapper { - @apply relative - order-3 - inline-flex - flex-1 - items-center; -} - -.icon { - @apply transition-default - pointer-events-none - absolute - block - - z-default; // needed for firefox to display the icon properly -} - -.clear-button { - pointer-events: initial; - @apply focus-base - border-color-input - bg-foreground-1 - order-4 - m-0 - box-border - flex - min-h-full - cursor-pointer - items-center - justify-center - self-stretch - border - border-solid; - - border-inline-start-width: theme("borderWidth.0"); - - &:hover { - @apply bg-foreground-2 transition-default; - calcite-icon { - @apply text-color-1 transition-default; - } - } - &:active { - @apply bg-foreground-3; - calcite-icon { - @apply text-color-1; - } - } - &:focus { - @apply focus-inset; - } - &:disabled { - @apply opacity-disabled; - } -} - -// loading -.loader { - inset-block-start: 1px; - inset-inline: 1px; - @apply pointer-events-none - absolute - block; -} - -// slotted action -.action-wrapper { - @apply order-7 flex; -} - -// prefix and suffix -.prefix, -.suffix { - @apply border-color-input - bg-background - text-color-2 - box-border - flex - h-auto - min-h-full - select-none - content-center - items-center - break-words - border - border-solid - font-medium - leading-none; -} - -.prefix { - @apply order-2; - border-inline-end-width: theme("borderWidth.0"); -} -.suffix { - @apply order-5; - border-inline-start-width: theme("borderWidth.0"); -} - -// alignment type -:host([alignment="start"]) { - & input { - text-align: start; - } -} - -:host([alignment="end"]) { - & input { - text-align: end; - } -} - -.number-button-wrapper { - @apply transition-default - pointer-events-none - order-6 - box-border - flex - flex-col; -} - -:host([number-button-type="vertical"]) .wrapper { - flex-direction: row; - display: flex; -} - -:host([number-button-type="vertical"]) { - & input { - @apply order-2; - } -} - -:host([number-button-type="horizontal"]) .calcite--rtl { - & .number-button-item[data-adjustment="down"] calcite-icon { - transform: rotate(-90deg); - } - & .number-button-item[data-adjustment="up"] calcite-icon { - transform: rotate(-90deg); - } -} - -.number-button-item.number-button-item--horizontal { - &[data-adjustment="down"], - &[data-adjustment="up"] { - @apply order-1 - max-h-full - min-h-full - self-stretch; - & calcite-icon { - transform: rotate(90deg); - } - } -} - -.number-button-item.number-button-item--horizontal[data-adjustment="down"] { - @apply border-color-input - border - border-solid; - border-inline-end-width: theme("borderWidth.0"); - &:hover { - @apply bg-foreground-2; - calcite-icon { - @apply text-color-1; - } - } -} - -.number-button-item.number-button-item--horizontal[data-adjustment="up"] { - @apply order-5; - &:hover { - @apply bg-foreground-2; - calcite-icon { - @apply text-color-1; - } - } -} - -:host([number-button-type="vertical"]) .number-button-item[data-adjustment="down"]:hover { - @apply bg-foreground-2; - calcite-icon { - @apply text-color-1; - } -} - -:host([number-button-type="vertical"]) .number-button-item[data-adjustment="up"]:hover { - @apply bg-foreground-2; - calcite-icon { - @apply text-color-1; - } -} - -:host([number-button-type="vertical"]) .number-button-item[data-adjustment="down"] { - @apply border-t-0; -} - -.number-button-item { - max-block-size: 50%; - min-block-size: 50%; - pointer-events: initial; - @apply border-color-input - bg-foreground-1 - transition-default - m-0 - box-border - flex - cursor-pointer - items-center - self-center - border - border-solid - py-0 - px-2; - border-inline-start-width: theme("borderWidth.0"); - & calcite-icon { - @apply transition-default pointer-events-none; - } - &:focus { - @apply bg-foreground-2; - calcite-icon { - @apply text-color-1; - } - } - &:active { - @apply bg-foreground-3; - } - &:disabled { - @apply pointer-events-none; - } -} - -.wrapper { - @apply relative - flex - flex-row - items-center; -} - -:host(.no-bottom-border) input { - @apply border-b-0; -} - -:host(.border-top-color-one) input { - @apply border-t-color-1; -} - -// input needed for higher specificity of these overrides -input { - &.inline-child { - @apply transition-default bg-transparent; - .editing-enabled { - background-color: inherit; - } - } - - &.inline-child:not(.editing-enabled) { - @apply border-color-transparent - flex - cursor-pointer text-ellipsis; - padding-inline-start: 0; - } -} - -@include form-validation-message(); -@include hidden-form-input(); -@include base-component(); +/** + * CSS Custom Properties + * + * These properties can be overridden using the component's tag as selector. + * + * @prop --calcite-input-number-corner-radius: defines the border radius of the component. + * @prop --calcite-input-number-text-color: defines the text color of the component. + * @prop --calcite-input-number-border-color: defines the border color of the component. This token is reassigned on `:host([status="invalid"])` and `:host(:focus)` + * @prop --calcite-input-number-background-color: defines the background color of the component. This token is reassigned on `:host([read-only])` + * @prop --calcite-input-number-button-background-color: defines the background color of a button element in the component. This token is reassigned by `--calcite-input-number-button-background-color-hover` on `:hover` and `--calcite-input-number-button-background-color-active` on `:active` + * @prop --calcite-input-number-button-background-color-hover: defines the background color of a :hover-ed button element in the component. + * @prop --calcite-input-number-button-background-color-active: defines the background color of an :active button element in the component. + * @prop --calcite-input-number-icon-color: defines the color of an icon element in the component. This token is redefined by `--calcite-input-number-button-icon-color-hover` when the sub-component is `:hover` or `:active` + * @prop --calcite-input-number-button-icon-color-hover: defines the color of an icon element when it's parent is hovered in the component. + * @prop --calcite-input-number-prefix-text-color: defines the prefix text color in the component. + * @prop --calcite-input-number-prefix-background-color: defines the prefix background color in the component. + * @prop --calcite-input-number-suffix-text-color: defines the suffix text color in the component. + * @prop --calcite-input-number-suffix-background-color: defines the suffix background color in the component. + * @prop --calcite-input-number-placeholder-text-color: defines the color of placeholder text in the component. + * @prop --calcite-input-number-shadow: defines the box-shadow of the component. + * + */ + +@include input("input-number", "number"); From db8e0ec28b010661e397dad7a031cb27a97980b8 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 22 Feb 2024 14:21:14 -0800 Subject: [PATCH 22/23] fix(input, input-text, input-number): import mixin --- .../src/components/input-number/input-number.scss | 2 ++ .../src/components/input-text/input-text.scss | 4 +++- packages/calcite-components/src/components/input/input.scss | 2 ++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/input-number/input-number.scss b/packages/calcite-components/src/components/input-number/input-number.scss index b9f6acdab80..228ae5933b7 100755 --- a/packages/calcite-components/src/components/input-number/input-number.scss +++ b/packages/calcite-components/src/components/input-number/input-number.scss @@ -1,3 +1,5 @@ +@import "assets/mixins"; + /** * CSS Custom Properties * diff --git a/packages/calcite-components/src/components/input-text/input-text.scss b/packages/calcite-components/src/components/input-text/input-text.scss index a90a32b7466..c4fc620c8f3 100755 --- a/packages/calcite-components/src/components/input-text/input-text.scss +++ b/packages/calcite-components/src/components/input-text/input-text.scss @@ -1,3 +1,5 @@ +@import "assets/mixins"; + /** * CSS Custom Properties * @@ -21,4 +23,4 @@ * */ -@include input("input-text-text", "text"); +@include input("input-text", "text"); diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss index 5f5ce9cfeba..a0e2959dd94 100755 --- a/packages/calcite-components/src/components/input/input.scss +++ b/packages/calcite-components/src/components/input/input.scss @@ -1,3 +1,5 @@ +@import "assets/mixins"; + /** * CSS Custom Properties * From 9b4f2afe9504b5ad9ef7549fdb4a5b55ce000eb2 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 22 Feb 2024 15:59:55 -0800 Subject: [PATCH 23/23] fix(input): mixin --- .../src/components/input/assets/_mixins.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/input/assets/_mixins.scss b/packages/calcite-components/src/components/input/assets/_mixins.scss index da3d3872720..aaf2dcb0d0e 100644 --- a/packages/calcite-components/src/components/input/assets/_mixins.scss +++ b/packages/calcite-components/src/components/input/assets/_mixins.scss @@ -94,13 +94,15 @@ } } @else { calcite-#{$subcomponent}[status="invalid"] { - --calcite-#{$subcomponent}-border-color: var(--calcite-#{$component}-#{$subcomponent}-border-color); + --calcite-#{$subcomponent}-border-color: var(--calcite-#{$component}-#{$subcomponent}-border-color-invalid); } calcite-#{$subcomponent}:focus { - --calcite-#{$subcomponent}-border-color: var(--calcite-#{$component}-#{$subcomponent}-border-color); + --calcite-#{$subcomponent}-border-color: var(--calcite-#{$component}-#{$subcomponent}-border-color-focus); } calcite-#{$subcomponent}[read-only] { - --calcite-#{$subcomponent}-background-color: var(--calcite-#{$component}-#{$subcomponent}-background-color); + --calcite-#{$subcomponent}-background-color: var( + --calcite-#{$component}-#{$subcomponent}-background-color-read-only + ); } } }