From 4fe812892edc9f232d6b58bae2d467dfd9e30925 Mon Sep 17 00:00:00 2001 From: Zack Moore Date: Thu, 18 Sep 2025 15:30:45 -0400 Subject: [PATCH 1/9] remove center alignment for application-state --- packages/components/src/styles/components/application-state.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/styles/components/application-state.scss b/packages/components/src/styles/components/application-state.scss index c44b7065ecd..4501ed6cd65 100644 --- a/packages/components/src/styles/components/application-state.scss +++ b/packages/components/src/styles/components/application-state.scss @@ -14,7 +14,6 @@ $hds-application-state-content-max-width: 480px; flex-direction: column; align-items: start; width: fit-content; - margin: 0 auto; // this will center the component in the parent container &.hds-application-state--align-center { align-items: center; From 067b79ffd03efd550a4b1240f541ce1497126d3c Mon Sep 17 00:00:00 2001 From: Zack Moore Date: Thu, 18 Sep 2025 15:36:49 -0400 Subject: [PATCH 2/9] added a changeset --- .changeset/easy-owls-create.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/easy-owls-create.md diff --git a/.changeset/easy-owls-create.md b/.changeset/easy-owls-create.md new file mode 100644 index 00000000000..ca3747604c0 --- /dev/null +++ b/.changeset/easy-owls-create.md @@ -0,0 +1,8 @@ +--- +"@hashicorp/design-system-components": major +--- + + +`ApplicationState` - Removed the opinionated `margin: 0 auto;` rule from the component's root element to delegate horizontal alignment control to the consumer. + + From 5276872ce6a46de2d8132870edf0f39b99f304f7 Mon Sep 17 00:00:00 2001 From: Zack Moore Date: Mon, 22 Sep 2025 10:49:43 -0400 Subject: [PATCH 3/9] added test and updated docs --- .../components/hds/application-state/index.ts | 9 ++ .../styles/components/application-state.scss | 4 + .../hds/application-state/index-test.js | 20 +++ .../partials/code/component-api.md | 123 +++++++++--------- 4 files changed, 96 insertions(+), 60 deletions(-) diff --git a/packages/components/src/components/hds/application-state/index.ts b/packages/components/src/components/hds/application-state/index.ts index 1a53f591a4c..54f3378dbe3 100644 --- a/packages/components/src/components/hds/application-state/index.ts +++ b/packages/components/src/components/hds/application-state/index.ts @@ -20,6 +20,7 @@ export const ALIGNS: HdsApplicationStateAligns[] = Object.values( export interface HdsApplicationStateSignature { Args: { align?: HdsApplicationStateAligns; + isAutoCentered?: boolean; }; Blocks: { default: [ @@ -35,6 +36,10 @@ export interface HdsApplicationStateSignature { } export default class HdsApplicationState extends Component { + get isAutoCentered(): boolean { + return this.args.isAutoCentered ?? true; + } + get align(): HdsApplicationStateAligns { const validAlignValues: HdsApplicationStateAligns[] = Object.values( HdsApplicationStateAlignValues @@ -56,6 +61,10 @@ export default class HdsApplicationState extends Component + template block text + + `); + + assert + .dom('#test-application-state') + .hasClass('hds-application-state--is-auto-centered'); + + this.set('isAutoCentered', false); + + assert + .dom('#test-application-state') + .doesNotHaveClass('hds-application-state--is-auto-centered'); + }); + // CONTEXTUAL COMPONENTS test('it renders the contextual components', async function (assert) { diff --git a/website/docs/components/application-state/partials/code/component-api.md b/website/docs/components/application-state/partials/code/component-api.md index 1c28b0831a1..ef888d26c61 100644 --- a/website/docs/components/application-state/partials/code/component-api.md +++ b/website/docs/components/application-state/partials/code/component-api.md @@ -3,24 +3,27 @@ ### ApplicationState - - Sets the alignment of the Application State content. - - - `ApplicationState::Media` yielded as contextual component (see below). - - - `ApplicationState::Header` yielded as contextual component (see below). - - - `ApplicationState::Body` yielded as contextual component (see below). - - - `ApplicationState::Footer` yielded as contextual component (see below). - - - This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). - + +Sets the alignment of the Application State content. + + +Horizontally centers the component within its container. + + +`ApplicationState::Media` yielded as contextual component (see below). + + +`ApplicationState::Header` yielded as contextual component (see below). + + +`ApplicationState::Body` yielded as contextual component (see below). + + +`ApplicationState::Footer` yielded as contextual component (see below). + + +This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). + ### Contextual components @@ -30,12 +33,12 @@ The `ApplicationState::Media` component, yielded as contextual component. - - Elements passed as children are yielded as inner content of the "media" block. - - - This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). - + +Elements passed as children are yielded as inner content of the "media" block. + + +This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). + #### [A].Header @@ -43,21 +46,21 @@ The `ApplicationState::Media` component, yielded as contextual component. The `ApplicationState::Header` component, yielded as contextual component. - - The error code to be displayed. - - - Adds a leading icon to the title. Accepts any [icon](/icons/library) name. - - - The text of the title - - - The HTML tag that wraps the title text. - - - This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). - + +The error code to be displayed. + + +Adds a leading icon to the title. Accepts any [icon](/icons/library) name. + + +The text of the title + + +The HTML tag that wraps the title text. + + +This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). + #### [A].Body @@ -65,15 +68,15 @@ The `ApplicationState::Header` component, yielded as contextual component. The `ApplicationState::Body` component, yielded as contextual component. - - Elements passed as children are yielded as inner content of the "body" block. - - - Note: use `@text` to pass directly text to the "body", with a predefined style. This component does not support `@text` on the component invocation if it is used with yielded content. - - - This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). - + +Elements passed as children are yielded as inner content of the "body" block. + + +Note: use `@text` to pass directly text to the "body", with a predefined style. This component does not support `@text` on the component invocation if it is used with yielded content. + + +This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). + #### [A].Footer @@ -81,16 +84,16 @@ The `ApplicationState::Body` component, yielded as contextual component. The `ApplicationState::Footer` component, yielded as contextual component. - - The `Button` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Button` component](/components/button). - - - The `Dropdown` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Dropdown` component](/components/dropdown). - - - The `Link::Standalone` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Link::Standalone` component](/components/link/standalone). - - - This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). - + +The `Button` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Button` component](/components/button). + + +The `Dropdown` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Dropdown` component](/components/dropdown). + + +The `Link::Standalone` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Link::Standalone` component](/components/link/standalone). + + +This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). + From fd2904835cad1fa26f38ae312dea8e4079bcaeed Mon Sep 17 00:00:00 2001 From: Zack Moore Date: Mon, 22 Sep 2025 11:00:06 -0400 Subject: [PATCH 4/9] updated the changeset --- .changeset/easy-owls-create.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.changeset/easy-owls-create.md b/.changeset/easy-owls-create.md index ca3747604c0..1aa2db7f831 100644 --- a/.changeset/easy-owls-create.md +++ b/.changeset/easy-owls-create.md @@ -3,6 +3,8 @@ --- + `ApplicationState` - Removed the opinionated `margin: 0 auto;` rule from the component's root element to delegate horizontal alignment control to the consumer. - +- Added the new `@isAutoCentered` argument (which defaults to `true`) to preserve the existing centering behavior while allowing consumers to disable it when needed. + From c354429013c846f213cab617bf0a0face4a0e467 Mon Sep 17 00:00:00 2001 From: Zack Moore Date: Mon, 22 Sep 2025 11:33:38 -0400 Subject: [PATCH 5/9] fixed a formatting issue --- .../partials/code/component-api.md | 126 +++++++++--------- 1 file changed, 63 insertions(+), 63 deletions(-) diff --git a/website/docs/components/application-state/partials/code/component-api.md b/website/docs/components/application-state/partials/code/component-api.md index ef888d26c61..598254e1a9c 100644 --- a/website/docs/components/application-state/partials/code/component-api.md +++ b/website/docs/components/application-state/partials/code/component-api.md @@ -3,27 +3,27 @@ ### ApplicationState - -Sets the alignment of the Application State content. - - -Horizontally centers the component within its container. - - -`ApplicationState::Media` yielded as contextual component (see below). - - -`ApplicationState::Header` yielded as contextual component (see below). - - -`ApplicationState::Body` yielded as contextual component (see below). - - -`ApplicationState::Footer` yielded as contextual component (see below). - - -This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). - + + Sets the alignment of the Application State content. + + + Horizontally centers the component within its container. + + + `ApplicationState::Media` yielded as contextual component (see below). + + + `ApplicationState::Header` yielded as contextual component (see below). + + + `ApplicationState::Body` yielded as contextual component (see below). + + + `ApplicationState::Footer` yielded as contextual component (see below). + + + This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). + ### Contextual components @@ -33,12 +33,12 @@ This component supports use of [`...attributes`](https://guides.emberjs.com/rele The `ApplicationState::Media` component, yielded as contextual component. - -Elements passed as children are yielded as inner content of the "media" block. - - -This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). - + + Elements passed as children are yielded as inner content of the "media" block. + + + This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). + #### [A].Header @@ -46,21 +46,21 @@ This component supports use of [`...attributes`](https://guides.emberjs.com/rele The `ApplicationState::Header` component, yielded as contextual component. - -The error code to be displayed. - - -Adds a leading icon to the title. Accepts any [icon](/icons/library) name. - - -The text of the title - - -The HTML tag that wraps the title text. - - -This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). - + + The error code to be displayed. + + + Adds a leading icon to the title. Accepts any [icon](/icons/library) name. + + + The text of the title + + + The HTML tag that wraps the title text. + + + This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). + #### [A].Body @@ -68,15 +68,15 @@ This component supports use of [`...attributes`](https://guides.emberjs.com/rele The `ApplicationState::Body` component, yielded as contextual component. - -Elements passed as children are yielded as inner content of the "body" block. - - -Note: use `@text` to pass directly text to the "body", with a predefined style. This component does not support `@text` on the component invocation if it is used with yielded content. - - -This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). - + + Elements passed as children are yielded as inner content of the "body" block. + + + Note: use `@text` to pass directly text to the "body", with a predefined style. This component does not support `@text` on the component invocation if it is used with yielded content. + + + This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). + #### [A].Footer @@ -84,16 +84,16 @@ This component supports use of [`...attributes`](https://guides.emberjs.com/rele The `ApplicationState::Footer` component, yielded as contextual component. - -The `Button` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Button` component](/components/button). - - -The `Dropdown` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Dropdown` component](/components/dropdown). - - -The `Link::Standalone` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Link::Standalone` component](/components/link/standalone). - - -This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). - + + The `Button` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Button` component](/components/button). + + + The `Dropdown` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Dropdown` component](/components/dropdown). + + + The `Link::Standalone` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Link::Standalone` component](/components/link/standalone). + + + This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). + From e1e9332c380839ad362c5d87333ae8803376b66a Mon Sep 17 00:00:00 2001 From: Zack Moore Date: Mon, 22 Sep 2025 17:31:26 -0400 Subject: [PATCH 6/9] addressing PR comments --- packages/components/src/styles/components/application-state.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/styles/components/application-state.scss b/packages/components/src/styles/components/application-state.scss index 597339685f2..fe4e9bb711f 100644 --- a/packages/components/src/styles/components/application-state.scss +++ b/packages/components/src/styles/components/application-state.scss @@ -26,6 +26,7 @@ $hds-application-state-content-max-width: 480px; } } + // we want that by default the component is centered in the parent container &.hds-application-state--is-auto-centered { margin: 0 auto; } From 201cd8c31733d78fcb69a1f27b4333e87b7977ca Mon Sep 17 00:00:00 2001 From: Zack Moore Date: Tue, 30 Sep 2025 21:57:33 -0400 Subject: [PATCH 7/9] Update .changeset/easy-owls-create.md Co-authored-by: Cristiano Rastelli --- .changeset/easy-owls-create.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.changeset/easy-owls-create.md b/.changeset/easy-owls-create.md index 1aa2db7f831..0132b4a71e1 100644 --- a/.changeset/easy-owls-create.md +++ b/.changeset/easy-owls-create.md @@ -4,7 +4,5 @@ -`ApplicationState` - Removed the opinionated `margin: 0 auto;` rule from the component's root element to delegate horizontal alignment control to the consumer. - -- Added the new `@isAutoCentered` argument (which defaults to `true`) to preserve the existing centering behavior while allowing consumers to disable it when needed. +`ApplicationState` - Replaced the default opinionated `margin: 0 auto;` rule from the component's root element and replaced it with a new `@isAutoCentered` argument (which defaults to `true, to preserve the existing centering behavior) to delegate the horizontal alignment control to the consumers, allowing them to disable it when needed. From 48d489dce435356c8fcf18c5beba7bc81e4d5872 Mon Sep 17 00:00:00 2001 From: Zack Moore Date: Thu, 2 Oct 2025 17:21:34 -0400 Subject: [PATCH 8/9] responding to PR feedback --- .../hds/application-state/index-test.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/showcase/tests/integration/components/hds/application-state/index-test.js b/showcase/tests/integration/components/hds/application-state/index-test.js index b040eeb9bc2..6c62bba28a7 100644 --- a/showcase/tests/integration/components/hds/application-state/index-test.js +++ b/showcase/tests/integration/components/hds/application-state/index-test.js @@ -63,24 +63,28 @@ module( .hasClass('hds-application-state--align-center'); }); - test('it should have the correct class when isAutoCentered is true', async function (assert) { - this.set('isAutoCentered', true); - + test('it should have the correct class when isAutoCentered is not provided', async function (assert) { await render(hbs` - + template block text `); assert .dom('#test-application-state') - .hasClass('hds-application-state--is-auto-centered'); + .doesNotHaveClass('hds-application-state--is-auto-centered'); + }); - this.set('isAutoCentered', false); + test('it should have the correct class when isAutoCentered is set to true', async function (assert) { + await render(hbs` + + template block text + + `); assert .dom('#test-application-state') - .doesNotHaveClass('hds-application-state--is-auto-centered'); + .hasClass('hds-application-state--is-auto-centered'); }); // CONTEXTUAL COMPONENTS From 6f1287946a923b37d031acf308239cb0ac1ef878 Mon Sep 17 00:00:00 2001 From: Zack Moore Date: Fri, 3 Oct 2025 17:43:41 -0400 Subject: [PATCH 9/9] fixing test --- .../components/hds/application-state/index-test.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/showcase/tests/integration/components/hds/application-state/index-test.js b/showcase/tests/integration/components/hds/application-state/index-test.js index 6c62bba28a7..604f4379d02 100644 --- a/showcase/tests/integration/components/hds/application-state/index-test.js +++ b/showcase/tests/integration/components/hds/application-state/index-test.js @@ -72,7 +72,7 @@ module( assert .dom('#test-application-state') - .doesNotHaveClass('hds-application-state--is-auto-centered'); + .hasClass('hds-application-state--is-auto-centered'); }); test('it should have the correct class when isAutoCentered is set to true', async function (assert) { @@ -87,6 +87,18 @@ module( .hasClass('hds-application-state--is-auto-centered'); }); + test('it should have the correct class when isAutoCentered is set to false', async function (assert) { + await render(hbs` + + template block text + + `); + + assert + .dom('#test-application-state') + .doesNotHaveClass('hds-application-state--is-auto-centered'); + }); + // CONTEXTUAL COMPONENTS test('it renders the contextual components', async function (assert) {