ApplicationState - Remove center alignment rule (#3205)

Co-authored-by: Cristiano Rastelli <cristiano.rastelli@hashicorp.com>

Author: zamoore

.changeset/easy-owls-create.md

@@ -0,0 +1,8 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/application-state -->
+
+`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.
+<!-- END -->

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<HdsApplicationStateSignature> {
+  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<HdsApplicationStateSi
     // add a class based on the @align argument
     classes.push(`hds-application-state--align-${this.align}`);
 
+    if (this.isAutoCentered) {
+      classes.push('hds-application-state--is-auto-centered');
+    }
+
     return classes.join(' ');
   }
 }

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;
@@ -26,6 +25,11 @@ $hds-application-state-content-max-width: 480px;
       width: auto;
     }
   }
+
+  // we want that by default the component is centered in the parent container
+  &.hds-application-state--is-auto-centered {
+    margin: 0 auto;
+  }
 }
 
 .hds-application-state__media {

showcase/tests/integration/components/hds/application-state/index-test.js

@@ -63,6 +63,42 @@ module(
         .hasClass('hds-application-state--align-center');
     });
 
+    test('it should have the correct class when isAutoCentered is not provided', async function (assert) {
+      await render(hbs`
+      <Hds::ApplicationState id="test-application-state">
+        template block text
+      </Hds::ApplicationState>
+    `);
+
+      assert
+        .dom('#test-application-state')
+        .hasClass('hds-application-state--is-auto-centered');
+    });
+
+    test('it should have the correct class when isAutoCentered is set to true', async function (assert) {
+      await render(hbs`
+      <Hds::ApplicationState id="test-application-state" @isAutoCentered={{true}}>
+        template block text
+      </Hds::ApplicationState>
+    `);
+
+      assert
+        .dom('#test-application-state')
+        .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`
+      <Hds::ApplicationState id="test-application-state" @isAutoCentered={{false}}>
+        template block text
+      </Hds::ApplicationState>
+    `);
+
+      assert
+        .dom('#test-application-state')
+        .doesNotHaveClass('hds-application-state--is-auto-centered');
+    });
+
     // CONTEXTUAL COMPONENTS
 
     test('it renders the contextual components', async function (assert) {

website/docs/components/application-state/partials/code/component-api.md

@@ -6,6 +6,9 @@
   <C.Property @name="align" @type="enum" @values={{array "left" "center" }} @default="left">
     Sets the alignment of the Application State content.
   </C.Property>
+  <C.Property @name="isAutoCentered" @default="true" @type="boolean">
+    Horizontally centers the component within its container.
+  </C.Property>
   <C.Property @name="<[A].Media>" @type="yielded component">
     `ApplicationState::Media` yielded as contextual component (see below).
   </C.Property>