From 5ae8202bdff4184f8aa02a12b48c33cb4087a5c0 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Wed, 25 Sep 2024 13:10:08 -0700 Subject: [PATCH 1/3] feat(text-area): add border-color-invalid component-scoped token --- .../src/components/text-area/text-area.scss | 14 +++++++++----- .../src/custom-theme/text-area.ts | 1 + .../calcite-components/src/demos/text-area.html | 2 ++ 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss index 77c8cf070f0..a6388a70de1 100644 --- a/packages/calcite-components/src/components/text-area/text-area.scss +++ b/packages/calcite-components/src/components/text-area/text-area.scss @@ -5,12 +5,13 @@ * * @prop --calcite-text-area-background-color: Specifies the background color of the component. * @prop --calcite-text-area-border-color: Specifies the border color of the text area. + * @prop --calcite-text-area-border-color-invalid: Specifies the border color of the text area when the status is invalid. * @prop --calcite-text-area-character-limit-text-color: Specifies the color of the character limit text displayed in footer of the component. * @prop --calcite-text-area-divider-color: Specifies the color of the divider between the text area and footer. - * @prop --calcite-text-area-font-size: Specifies the font size of the thext area and footer. - * @prop --calcite-text-area-max-height: Specifies the the maximum height of the text area in the component. + * @prop --calcite-text-area-font-size: Specifies the font size of the text area and footer. + * @prop --calcite-text-area-max-height: Specifies the maximum height of the text area in the component. * @prop --calcite-text-area-min-height: Specifies the minimum height of the text area in the component. - * @prop --calcite-text-area-max-width: Specifies the the maximum width of the text area in the component. + * @prop --calcite-text-area-max-width: Specifies the maximum width of the text area in the component. * @prop --calcite-text-area-min-width: Specifies the minimum width of the text area in the component. * @prop --calcite-text-area-text-color: Specifies the color of text in the component. * @prop --calcite-text-area-footer-border-color: Specifies the border color of the footer. @@ -63,7 +64,7 @@ &.text-area--invalid { --calcite-internal-text-area-border-color: var( - --calcite-text-area-border-color, + --calcite-text-area-border-color-invalid, var(--calcite-color-status-danger) ); @@ -192,7 +193,10 @@ } :host([status="invalid"]) { - --calcite-internal-text-area-border-color: var(--calcite-text-area-border-color, var(--calcite-color-status-danger)); + --calcite-internal-text-area-border-color: var( + --calcite-text-area-border-color-invalid, + var(--calcite-color-status-danger) + ); .text-area:focus { @apply focus-inset-danger; diff --git a/packages/calcite-components/src/custom-theme/text-area.ts b/packages/calcite-components/src/custom-theme/text-area.ts index b29df775832..a709708f230 100644 --- a/packages/calcite-components/src/custom-theme/text-area.ts +++ b/packages/calcite-components/src/custom-theme/text-area.ts @@ -3,6 +3,7 @@ import { html } from "../../support/formatting"; export const textAreaTokens = { calciteTextAreaBackgroundColor: "", calciteTextAreaBorderColor: "", + calciteTextAreaBorderColorInvalid: "", calciteTextAreaCharacterLimitTextColor: "", calciteTextAreaDividerColor: "", calciteTextAreaFontSize: "", diff --git a/packages/calcite-components/src/demos/text-area.html b/packages/calcite-components/src/demos/text-area.html index 3eba8e74515..a550f03d228 100644 --- a/packages/calcite-components/src/demos/text-area.html +++ b/packages/calcite-components/src/demos/text-area.html @@ -14,6 +14,7 @@ --calcite-text-area-font-size: 25px; --calcite-text-area-background-color: cadetblue; --calcite-text-area-border-color: magenta; + --calcite-text-area-border-color-invalid: pink; --calcite-text-area-character-limit-text-color: magenta; --calcite-text-area-divider-color: yellow; --calcite-text-area-text-color: brown; @@ -251,6 +252,7 @@ tokens=" --calcite-text-area-background-color, --calcite-text-area-border-color, + --calcite-text-area-border-color-invalid, --calcite-text-area-character-limit-text-color, --calcite-text-area-divider-color, --calcite-text-area-font-size, From cd2253df4444b5f960bafddcf97a18602e89e568 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Wed, 25 Sep 2024 23:34:44 -0700 Subject: [PATCH 2/3] test(text-area): add coverage --- packages/calcite-components/src/components.d.ts | 8 ++++---- .../src/components/text-area/text-area.e2e.ts | 4 ++++ 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 68d4f03e98e..8e093960068 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -7104,7 +7104,7 @@ declare global { new (): HTMLCalciteListItemElement; }; interface HTMLCalciteListItemGroupElementEventMap { - "calciteInternalListItemGroupDefaultSlotChange": DragEvent; + "calciteInternalListItemGroupDefaultSlotChange": void; } interface HTMLCalciteListItemGroupElement extends Components.CalciteListItemGroup, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLCalciteListItemGroupElement, ev: CalciteListItemGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -7850,7 +7850,7 @@ declare global { new (): HTMLCalciteTileSelectGroupElement; }; interface HTMLCalciteTimePickerElementEventMap { - "calciteInternalTimePickerChange": string; + "calciteInternalTimePickerChange": void; } interface HTMLCalciteTimePickerElement extends Components.CalciteTimePicker, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLCalciteTimePickerElement, ev: CalciteTimePickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -11461,7 +11461,7 @@ declare namespace LocalJSX { /** * Fires when changes occur in the default slot, notifying parent lists of the changes. */ - "onCalciteInternalListItemGroupDefaultSlotChange"?: (event: CalciteListItemGroupCustomEvent) => void; + "onCalciteInternalListItemGroupDefaultSlotChange"?: (event: CalciteListItemGroupCustomEvent) => void; } interface CalciteLoader { /** @@ -13813,7 +13813,7 @@ declare namespace LocalJSX { * Specifies the Unicode numeral system used by the component for localization. */ "numberingSystem"?: NumberingSystem; - "onCalciteInternalTimePickerChange"?: (event: CalciteTimePickerCustomEvent) => void; + "onCalciteInternalTimePickerChange"?: (event: CalciteTimePickerCustomEvent) => void; /** * Specifies the size of the component. */ diff --git a/packages/calcite-components/src/components/text-area/text-area.e2e.ts b/packages/calcite-components/src/components/text-area/text-area.e2e.ts index dfacebe72fb..922adfb2e02 100644 --- a/packages/calcite-components/src/components/text-area/text-area.e2e.ts +++ b/packages/calcite-components/src/components/text-area/text-area.e2e.ts @@ -278,6 +278,10 @@ describe("calcite-text-area", () => { shadowSelector: `.${CSS.characterLimit}`, targetProp: "color", }, + "--calcite-text-area-border-color-invalid": { + shadowSelector: `.${CSS.textAreaInvalid}`, + targetProp: "borderColor", + }, }); }); }); From 8f94461b3cbc887a2f1f9ddea49180d9bef124cc Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Thu, 26 Sep 2024 15:18:36 -0700 Subject: [PATCH 3/3] refactor: remove invalid border color token --- .../src/components/text-area/text-area.e2e.ts | 4 ---- .../src/components/text-area/text-area.scss | 11 ++--------- .../calcite-components/src/custom-theme/text-area.ts | 1 - packages/calcite-components/src/demos/text-area.html | 2 -- 4 files changed, 2 insertions(+), 16 deletions(-) diff --git a/packages/calcite-components/src/components/text-area/text-area.e2e.ts b/packages/calcite-components/src/components/text-area/text-area.e2e.ts index 922adfb2e02..dfacebe72fb 100644 --- a/packages/calcite-components/src/components/text-area/text-area.e2e.ts +++ b/packages/calcite-components/src/components/text-area/text-area.e2e.ts @@ -278,10 +278,6 @@ describe("calcite-text-area", () => { shadowSelector: `.${CSS.characterLimit}`, targetProp: "color", }, - "--calcite-text-area-border-color-invalid": { - shadowSelector: `.${CSS.textAreaInvalid}`, - targetProp: "borderColor", - }, }); }); }); diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss index a6388a70de1..28d60404b9c 100644 --- a/packages/calcite-components/src/components/text-area/text-area.scss +++ b/packages/calcite-components/src/components/text-area/text-area.scss @@ -5,7 +5,6 @@ * * @prop --calcite-text-area-background-color: Specifies the background color of the component. * @prop --calcite-text-area-border-color: Specifies the border color of the text area. - * @prop --calcite-text-area-border-color-invalid: Specifies the border color of the text area when the status is invalid. * @prop --calcite-text-area-character-limit-text-color: Specifies the color of the character limit text displayed in footer of the component. * @prop --calcite-text-area-divider-color: Specifies the color of the divider between the text area and footer. * @prop --calcite-text-area-font-size: Specifies the font size of the text area and footer. @@ -63,10 +62,7 @@ } &.text-area--invalid { - --calcite-internal-text-area-border-color: var( - --calcite-text-area-border-color-invalid, - var(--calcite-color-status-danger) - ); + --calcite-internal-text-area-border-color: var(--calcite-color-status-danger); &:focus { @apply focus-inset-danger; @@ -193,10 +189,7 @@ } :host([status="invalid"]) { - --calcite-internal-text-area-border-color: var( - --calcite-text-area-border-color-invalid, - var(--calcite-color-status-danger) - ); + --calcite-internal-text-area-border-color: var(--calcite-color-status-danger); .text-area:focus { @apply focus-inset-danger; diff --git a/packages/calcite-components/src/custom-theme/text-area.ts b/packages/calcite-components/src/custom-theme/text-area.ts index a709708f230..b29df775832 100644 --- a/packages/calcite-components/src/custom-theme/text-area.ts +++ b/packages/calcite-components/src/custom-theme/text-area.ts @@ -3,7 +3,6 @@ import { html } from "../../support/formatting"; export const textAreaTokens = { calciteTextAreaBackgroundColor: "", calciteTextAreaBorderColor: "", - calciteTextAreaBorderColorInvalid: "", calciteTextAreaCharacterLimitTextColor: "", calciteTextAreaDividerColor: "", calciteTextAreaFontSize: "", diff --git a/packages/calcite-components/src/demos/text-area.html b/packages/calcite-components/src/demos/text-area.html index a550f03d228..3eba8e74515 100644 --- a/packages/calcite-components/src/demos/text-area.html +++ b/packages/calcite-components/src/demos/text-area.html @@ -14,7 +14,6 @@ --calcite-text-area-font-size: 25px; --calcite-text-area-background-color: cadetblue; --calcite-text-area-border-color: magenta; - --calcite-text-area-border-color-invalid: pink; --calcite-text-area-character-limit-text-color: magenta; --calcite-text-area-divider-color: yellow; --calcite-text-area-text-color: brown; @@ -252,7 +251,6 @@ tokens=" --calcite-text-area-background-color, --calcite-text-area-border-color, - --calcite-text-area-border-color-invalid, --calcite-text-area-character-limit-text-color, --calcite-text-area-divider-color, --calcite-text-area-font-size,