From baf0549fe2bd6698aadf82f0c4ee0433f0366607 Mon Sep 17 00:00:00 2001 From: aPreciado88 Date: Wed, 25 Sep 2024 14:00:26 -0700 Subject: [PATCH 1/2] feat(alert): add component tokens --- .../calcite-components/src/components.d.ts | 8 +-- .../src/components/alert/alert.e2e.ts | 54 ++++++++++++++++++- .../src/components/alert/alert.scss | 34 ++++++++++-- .../src/custom-theme/alert.ts | 4 ++ 4 files changed, 90 insertions(+), 10 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/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts index f19ed8e424e..838627d9596 100644 --- a/packages/calcite-components/src/components/alert/alert.e2e.ts +++ b/packages/calcite-components/src/components/alert/alert.e2e.ts @@ -594,10 +594,60 @@ describe("calcite-alert", () => { shadowSelector: `.${CSS.container}`, targetProp: "backgroundColor", }, - "--calcite-alert-corner-radius": { + "--calcite-alert-corner-radius": [ + { + shadowSelector: `.${CSS.container}`, + targetProp: "borderStartStartRadius", + }, + { + shadowSelector: `.${CSS.container}`, + targetProp: "borderStartEndRadius", + }, + { + shadowSelector: `.${CSS.container}`, + targetProp: "borderEndStartRadius", + }, + { + shadowSelector: `.${CSS.container}`, + targetProp: "borderEndEndRadius", + }, + { + shadowSelector: `.${CSS.close}`, + targetProp: "borderStartEndRadius", + }, + { + shadowSelector: `.${CSS.close}`, + targetProp: "borderEndEndRadius", + }, + ], + "--calcite-alert-corner-radius-start-start": { shadowSelector: `.${CSS.container}`, - targetProp: "borderRadius", + targetProp: "borderStartStartRadius", }, + "--calcite-alert-corner-radius-start-end": [ + { + shadowSelector: `.${CSS.container}`, + targetProp: "borderStartEndRadius", + }, + { + shadowSelector: `.${CSS.close}`, + targetProp: "borderStartEndRadius", + }, + ], + "--calcite-alert-corner-radius-end-start": { + shadowSelector: `.${CSS.container}`, + targetProp: "borderEndStartRadius", + }, + "--calcite-alert-corner-radius-end-end": [ + { + shadowSelector: `.${CSS.container}`, + targetProp: "borderEndEndRadius", + }, + { + shadowSelector: `.${CSS.close}`, + targetProp: "borderEndEndRadius", + }, + ], "--calcite-alert-shadow": { shadowSelector: `.${CSS.container}`, targetProp: "boxShadow", diff --git a/packages/calcite-components/src/components/alert/alert.scss b/packages/calcite-components/src/components/alert/alert.scss index f8f47baee7d..0f8594c3819 100644 --- a/packages/calcite-components/src/components/alert/alert.scss +++ b/packages/calcite-components/src/components/alert/alert.scss @@ -5,7 +5,11 @@ * * @prop --calcite-alert-width: Specifies the width of the component. * @prop --calcite-alert-background-color: Specifies the component's background color. - * @prop --calcite-alert-corner-radius: Specifies the component's border radius. + * @prop --calcite-alert-corner-radius: Specifies the component's corner radius. + * @prop --calcite-alert-corner-radius-start-start: Specifies the component's corner radius start start. + * @prop --calcite-alert-corner-radius-start-end: Specifies the component's corner radius start end. + * @prop --calcite-alert-corner-radius-end-start: Specifies the component's corner radius end start. + * @prop --calcite-alert-corner-radius-end-end: Specifies the component's corner radius end end. * @prop --calcite-alert-shadow: Specifies the component's shadow. */ @@ -40,7 +44,22 @@ $border-style: 1px solid var(--calcite-color-border-3); (var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)) ); background-color: var(--calcite-alert-background-color, var(--calcite-color-foreground-1)); - border-radius: var(--calcite-alert-corner-radius, var(--calcite-border-radius)); + border-start-start-radius: var( + --calcite-alert-corner-radius-start-start, + var(--calcite-alert-corner-radius, var(--calcite-border-radius)) + ); + border-start-end-radius: var( + --calcite-alert-corner-radius-start-end, + var(--calcite-alert-corner-radius, var(--calcite-border-radius)) + ); + border-end-start-radius: var( + --calcite-alert-corner-radius-end-start, + var(--calcite-alert-corner-radius, var(--calcite-border-radius)) + ); + border-end-end-radius: var( + --calcite-alert-corner-radius-end-end, + var(--calcite-alert-corner-radius, var(--calcite-border-radius)) + ); border-block-start: 0 solid transparent; border-inline: $border-style; border-block-end: $border-style; @@ -81,6 +100,14 @@ $border-style: 1px solid var(--calcite-color-border-3); .close { @apply bg-transparent border-none cursor-pointer flex items-center justify-end outline-none self-stretch text-color-3; -webkit-appearance: none; + border-start-end-radius: var( + --calcite-alert-corner-radius-start-end, + var(--calcite-alert-corner-radius, var(--calcite-border-radius)) + ); + border-end-end-radius: var( + --calcite-alert-corner-radius-end-end, + var(--calcite-alert-corner-radius, var(--calcite-border-radius)) + ); @apply focus-base; &:focus { @@ -99,8 +126,7 @@ $border-style: 1px solid var(--calcite-color-border-3); } .queue-count { - @apply bg-foreground-1 - cursor-default + @apply cursor-default flex font-medium invisible diff --git a/packages/calcite-components/src/custom-theme/alert.ts b/packages/calcite-components/src/custom-theme/alert.ts index 4dd2c760f18..c78945b5f04 100644 --- a/packages/calcite-components/src/custom-theme/alert.ts +++ b/packages/calcite-components/src/custom-theme/alert.ts @@ -5,6 +5,10 @@ export const alertTokens = { calciteAlertWidth: "", calciteAlertBackgroundColor: "", calciteAlertCornerRadius: "", + calciteAlertCornerRadiusStartStart: "", + calciteAlertCornerRadiusStartEnd: "", + calciteAlertCornerRadiusEndStart: "", + calciteAlertCornerRadiusEndEnd: "", calciteAlertShadow: "", }; From da283fa29bea4c7a91be26b4154fc3d5dee6c5bd Mon Sep 17 00:00:00 2001 From: aPreciado88 Date: Wed, 25 Sep 2024 16:01:35 -0700 Subject: [PATCH 2/2] feat(alert): apply --calcite-alert-corner-radius to internal close button --- .../src/components/alert/alert.e2e.ts | 42 +------------------ .../src/components/alert/alert.scss | 31 ++------------ .../src/custom-theme/alert.ts | 4 -- 3 files changed, 4 insertions(+), 73 deletions(-) diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts index 838627d9596..d546f3622e5 100644 --- a/packages/calcite-components/src/components/alert/alert.e2e.ts +++ b/packages/calcite-components/src/components/alert/alert.e2e.ts @@ -597,19 +597,7 @@ describe("calcite-alert", () => { "--calcite-alert-corner-radius": [ { shadowSelector: `.${CSS.container}`, - targetProp: "borderStartStartRadius", - }, - { - shadowSelector: `.${CSS.container}`, - targetProp: "borderStartEndRadius", - }, - { - shadowSelector: `.${CSS.container}`, - targetProp: "borderEndStartRadius", - }, - { - shadowSelector: `.${CSS.container}`, - targetProp: "borderEndEndRadius", + targetProp: "borderRadius", }, { shadowSelector: `.${CSS.close}`, @@ -620,34 +608,6 @@ describe("calcite-alert", () => { targetProp: "borderEndEndRadius", }, ], - "--calcite-alert-corner-radius-start-start": { - shadowSelector: `.${CSS.container}`, - targetProp: "borderStartStartRadius", - }, - "--calcite-alert-corner-radius-start-end": [ - { - shadowSelector: `.${CSS.container}`, - targetProp: "borderStartEndRadius", - }, - { - shadowSelector: `.${CSS.close}`, - targetProp: "borderStartEndRadius", - }, - ], - "--calcite-alert-corner-radius-end-start": { - shadowSelector: `.${CSS.container}`, - targetProp: "borderEndStartRadius", - }, - "--calcite-alert-corner-radius-end-end": [ - { - shadowSelector: `.${CSS.container}`, - targetProp: "borderEndEndRadius", - }, - { - shadowSelector: `.${CSS.close}`, - targetProp: "borderEndEndRadius", - }, - ], "--calcite-alert-shadow": { shadowSelector: `.${CSS.container}`, targetProp: "boxShadow", diff --git a/packages/calcite-components/src/components/alert/alert.scss b/packages/calcite-components/src/components/alert/alert.scss index 0f8594c3819..f98617e8759 100644 --- a/packages/calcite-components/src/components/alert/alert.scss +++ b/packages/calcite-components/src/components/alert/alert.scss @@ -6,10 +6,6 @@ * @prop --calcite-alert-width: Specifies the width of the component. * @prop --calcite-alert-background-color: Specifies the component's background color. * @prop --calcite-alert-corner-radius: Specifies the component's corner radius. - * @prop --calcite-alert-corner-radius-start-start: Specifies the component's corner radius start start. - * @prop --calcite-alert-corner-radius-start-end: Specifies the component's corner radius start end. - * @prop --calcite-alert-corner-radius-end-start: Specifies the component's corner radius end start. - * @prop --calcite-alert-corner-radius-end-end: Specifies the component's corner radius end end. * @prop --calcite-alert-shadow: Specifies the component's shadow. */ @@ -44,22 +40,7 @@ $border-style: 1px solid var(--calcite-color-border-3); (var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)) ); background-color: var(--calcite-alert-background-color, var(--calcite-color-foreground-1)); - border-start-start-radius: var( - --calcite-alert-corner-radius-start-start, - var(--calcite-alert-corner-radius, var(--calcite-border-radius)) - ); - border-start-end-radius: var( - --calcite-alert-corner-radius-start-end, - var(--calcite-alert-corner-radius, var(--calcite-border-radius)) - ); - border-end-start-radius: var( - --calcite-alert-corner-radius-end-start, - var(--calcite-alert-corner-radius, var(--calcite-border-radius)) - ); - border-end-end-radius: var( - --calcite-alert-corner-radius-end-end, - var(--calcite-alert-corner-radius, var(--calcite-border-radius)) - ); + border-radius: var(--calcite-alert-corner-radius, var(--calcite-border-radius)); border-block-start: 0 solid transparent; border-inline: $border-style; border-block-end: $border-style; @@ -100,14 +81,8 @@ $border-style: 1px solid var(--calcite-color-border-3); .close { @apply bg-transparent border-none cursor-pointer flex items-center justify-end outline-none self-stretch text-color-3; -webkit-appearance: none; - border-start-end-radius: var( - --calcite-alert-corner-radius-start-end, - var(--calcite-alert-corner-radius, var(--calcite-border-radius)) - ); - border-end-end-radius: var( - --calcite-alert-corner-radius-end-end, - var(--calcite-alert-corner-radius, var(--calcite-border-radius)) - ); + border-start-end-radius: var(--calcite-alert-corner-radius, var(--calcite-border-radius)); + border-end-end-radius: var(--calcite-alert-corner-radius, var(--calcite-border-radius)); @apply focus-base; &:focus { diff --git a/packages/calcite-components/src/custom-theme/alert.ts b/packages/calcite-components/src/custom-theme/alert.ts index c78945b5f04..4dd2c760f18 100644 --- a/packages/calcite-components/src/custom-theme/alert.ts +++ b/packages/calcite-components/src/custom-theme/alert.ts @@ -5,10 +5,6 @@ export const alertTokens = { calciteAlertWidth: "", calciteAlertBackgroundColor: "", calciteAlertCornerRadius: "", - calciteAlertCornerRadiusStartStart: "", - calciteAlertCornerRadiusStartEnd: "", - calciteAlertCornerRadiusEndStart: "", - calciteAlertCornerRadiusEndEnd: "", calciteAlertShadow: "", };