diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts index f19ed8e424e..d546f3622e5 100644 --- a/packages/calcite-components/src/components/alert/alert.e2e.ts +++ b/packages/calcite-components/src/components/alert/alert.e2e.ts @@ -594,10 +594,20 @@ describe("calcite-alert", () => { shadowSelector: `.${CSS.container}`, targetProp: "backgroundColor", }, - "--calcite-alert-corner-radius": { - shadowSelector: `.${CSS.container}`, - targetProp: "borderRadius", - }, + "--calcite-alert-corner-radius": [ + { + shadowSelector: `.${CSS.container}`, + targetProp: "borderRadius", + }, + { + shadowSelector: `.${CSS.close}`, + targetProp: "borderStartEndRadius", + }, + { + 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..f98617e8759 100644 --- a/packages/calcite-components/src/components/alert/alert.scss +++ b/packages/calcite-components/src/components/alert/alert.scss @@ -5,7 +5,7 @@ * * @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-shadow: Specifies the component's shadow. */ @@ -81,6 +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, var(--calcite-border-radius)); + border-end-end-radius: var(--calcite-alert-corner-radius, var(--calcite-border-radius)); @apply focus-base; &:focus { @@ -99,8 +101,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