From af70eae733308feb1b649f617cbb9ae956e6e97b Mon Sep 17 00:00:00 2001 From: Kitty Hurley Date: Thu, 27 Oct 2022 12:10:44 -0500 Subject: [PATCH 1/2] fix(input-message,loader): reverts breaking change --- src/components/input-message/input-message.e2e.ts | 5 +---- src/components/input-message/input-message.scss | 14 ++++++++------ src/components/input-message/input-message.tsx | 7 +------ src/components/loader/loader.e2e.ts | 4 ++-- src/components/loader/loader.scss | 6 +++++- src/components/loader/loader.tsx | 7 +------ 6 files changed, 18 insertions(+), 25 deletions(-) diff --git a/src/components/input-message/input-message.e2e.ts b/src/components/input-message/input-message.e2e.ts index cf334bd03ce..e58aaf7fb1a 100644 --- a/src/components/input-message/input-message.e2e.ts +++ b/src/components/input-message/input-message.e2e.ts @@ -3,10 +3,7 @@ import { accessible, renders, hidden } from "../../tests/commonTests"; import { StatusIconDefaults } from "./interfaces"; describe("calcite-input-message", () => { - it("renders", async () => { - await renders(``, { display: "none", visible: false }); - await renders(``, { display: "flex", visible: true }); - }); + it("renders", async () => renders("calcite-input-message", { visible: false, display: "flex" })); it("honors hidden attribute", async () => hidden(`Text`)); diff --git a/src/components/input-message/input-message.scss b/src/components/input-message/input-message.scss index 3b0282734e8..29b8115c36e 100644 --- a/src/components/input-message/input-message.scss +++ b/src/components/input-message/input-message.scss @@ -6,8 +6,8 @@ * @prop --calcite-input-message-spacing-value: The top margin spacing above the component. */ -:host([scale="m"]), -:host([scale="l"]) { +:host([active][scale="m"]), +:host([active][scale="l"]) { --calcite-input-message-spacing-value: theme("spacing.1"); } @@ -15,15 +15,17 @@ @apply text-color-1 transition-default invisible box-border flex h-0 w-full items-center font-medium opacity-0; } -:host { +:host([active]) { @apply transition-default visible h-auto opacity-100; } -:host([scale="m"]), -:host([scale="l"]) { +:host([active][scale="m"]), +:host([active][scale="l"]) { margin-block-start: var(--calcite-input-message-spacing-value); } +@include calciteHydratedHidden(); + .calcite-input-message-icon { @apply transition-default pointer-events-none @@ -49,7 +51,7 @@ } // Validation Text -:host([status]) { +:host([status][active]) { @apply text-color-1; } diff --git a/src/components/input-message/input-message.tsx b/src/components/input-message/input-message.tsx index d7741403e17..60143073b5f 100644 --- a/src/components/input-message/input-message.tsx +++ b/src/components/input-message/input-message.tsx @@ -26,12 +26,7 @@ export class InputMessage { // //-------------------------------------------------------------------------- - /** - * When `true`, the component is active. - * - * @deprecated use global `hidden` attribute instead. - * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) - */ + /** When `true`, the component is active. */ @Prop({ reflect: true }) active = false; /** Specifies an icon to display. */ diff --git a/src/components/loader/loader.e2e.ts b/src/components/loader/loader.e2e.ts index 61cb696720c..a884654f9a8 100644 --- a/src/components/loader/loader.e2e.ts +++ b/src/components/loader/loader.e2e.ts @@ -3,8 +3,8 @@ import { renders, hidden } from "../../tests/commonTests"; describe("calcite-loader", () => { it("renders", async () => { - await renders(``, { display: "none", visible: false }); - await renders(``, { display: "flex", visible: true }); + await renders("calcite-loader", { display: "none", visible: false }); + await renders(``, { display: "flex", visible: true }); }); it("honors hidden attribute", async () => hidden("calcite-loader")); diff --git a/src/components/loader/loader.scss b/src/components/loader/loader.scss index 331d382b126..bb942447222 100644 --- a/src/components/loader/loader.scss +++ b/src/components/loader/loader.scss @@ -48,6 +48,10 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159; } :host { + @apply hidden; +} + +:host([active]) { @apply flex; } @@ -122,7 +126,7 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159; vertical-align: calc(var(--calcite-loader-size-inline) * -1 * 0.2); } -:host([inline]) { +:host([active][inline]) { @apply inline-block; } diff --git a/src/components/loader/loader.tsx b/src/components/loader/loader.tsx index ad9ca1114e6..b71a1fff804 100644 --- a/src/components/loader/loader.tsx +++ b/src/components/loader/loader.tsx @@ -21,12 +21,7 @@ export class Loader { // //-------------------------------------------------------------------------- - /** - * When `true`, the component is active. - * - * @deprecated use global `hidden` attribute instead. - * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) - */ + /** When `true`, the component is active. */ @Prop({ reflect: true }) active = false; /** When `true`, displays smaller and appears to the left of the text. */ From 2a933480ebb98e5c08c2c54cc261f40cbd497885 Mon Sep 17 00:00:00 2001 From: Kitty Hurley Date: Thu, 27 Oct 2022 13:23:48 -0500 Subject: [PATCH 2/2] docs(changelog): remove feature entry --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index af6aff15891..1f5ceca4916 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,7 +22,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - **alert, date-picker-month-header, input-date-picker, loader, panel:** Adds RTL equivalent CSS ([#5368](https://github.com/Esri/calcite-components/issues/5368)) ([9582c04](https://github.com/Esri/calcite-components/commit/9582c04f54da5639ae86f32f234427ca19a33e12)) - **block:** Improve content layout ([#5473](https://github.com/Esri/calcite-components/issues/5473)) ([2cc0a5f](https://github.com/Esri/calcite-components/commit/2cc0a5f9c40236f1c628c796e3c3e69acbdc8479)), closes [#5422](https://github.com/Esri/calcite-components/issues/5422) - **button, fab:** Bumping the scale of icon to M when the parent Button / FAB is scale L ([#5521](https://github.com/Esri/calcite-components/issues/5521)) ([fa508e8](https://github.com/Esri/calcite-components/commit/fa508e85966a536416e61d1282288e4b1165e247)) -- **calcite-loader, calcite-input-message:** Drop active in favor of hidden ([#5537](https://github.com/Esri/calcite-components/issues/5537)) ([4cb0ea1](https://github.com/Esri/calcite-components/commit/4cb0ea11f345151a7cc356183f961097c8042ed4)) - **date-picker:** Display correct date format order in header for zh-CN locale. ([#5534](https://github.com/Esri/calcite-components/issues/5534)) ([ef3ebf8](https://github.com/Esri/calcite-components/commit/ef3ebf8b859dfbd5b389b38f73c460bb68a178d4)) - **date-picker:** No longer hides year for zh-CN locale ([#5344](https://github.com/Esri/calcite-components/issues/5344)) ([d10593e](https://github.com/Esri/calcite-components/commit/d10593ee12fabf0c2ec60148b07b737e2fc95e2d)) - **date-picker-day:** Adds RTL equivalent CSS ([#5363](https://github.com/Esri/calcite-components/issues/5363)) ([98106c2](https://github.com/Esri/calcite-components/commit/98106c2287780a62aab9f74231de66310f5f3cd3))