fix(forms): add column width stories, remove max-width (#1715)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [X] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

No visual tests.

Setting max-width on the control-container class which is not needed
actually.

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: N/A

## What is the new behavior?

Visual tests for column widths.

No max-width set.

## Does this PR introduce a breaking change?

- [ ] Yes
- [X] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: Daniel Tsanev <tsanevd@vmware.com>
Co-authored-by: GitHub <noreply@github.com>

.storybook/stories/forms/forms-input-column-width.stories.ts

@@ -0,0 +1,237 @@
+/*
+ * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+import { ChangeDetectorRef, Component, Input } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { ClrFormLayout, ClrFormsModule, ClrLayoutModule } from '@clr/angular';
+import { argsToTemplate, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { CommonModules } from '../../helpers/common';
+
+// Class binding for inputs is not working due to 'initControlClass' function for that service being called in the constructor. However moving it to ngOnInit
+// breaks the tests.
+@Component({
+  selector: 'forms-input-states-components',
+  template: `
+    <form class="clr-form-full-width" clrForm [formGroup]="form" [clrLayout]="clrLayout">
+      <h3>Col 1</h3>
+      <clr-input-container>
+        <label class="clr-col-1">Field 1 label</label>
+        <input class="clr-col-1" type="text" clrInput name="name" formControlName="name" />
+        <clr-control-helper>Helper Subtext</clr-control-helper>
+        <clr-control-error>State Subtext</clr-control-error>
+        <clr-control-success>State Subtext</clr-control-success>
+      </clr-input-container>
+      <h3>Col 2</h3>
+      <clr-input-container>
+        <label class="clr-col-1">Field 2 label</label>
+        <input class="clr-col-2" type="text" clrInput name="name" formControlName="name" />
+        <clr-control-helper>Helper Subtext</clr-control-helper>
+        <clr-control-error>State Subtext</clr-control-error>
+        <clr-control-success>State Subtext</clr-control-success>
+      </clr-input-container>
+      <h3>Col 3</h3>
+      <clr-input-container>
+        <label class="clr-col-1">Field 3 label</label>
+        <input class="clr-col-3" type="text" clrInput name="name" formControlName="name" />
+        <clr-control-helper>Helper Subtext</clr-control-helper>
+        <clr-control-error>State Subtext</clr-control-error>
+        <clr-control-success>State Subtext</clr-control-success>
+      </clr-input-container>
+      <h3>Col 4</h3>
+      <clr-input-container>
+        <label class="clr-col-1">Field 4 label</label>
+        <input class="clr-col-4" type="text" clrInput name="name" formControlName="name" />
+        <clr-control-helper>Helper Subtext</clr-control-helper>
+        <clr-control-error>State Subtext</clr-control-error>
+        <clr-control-success>State Subtext</clr-control-success>
+      </clr-input-container>
+      <h3>Col 5</h3>
+      <clr-input-container>
+        <label class="clr-col-1">Field 5 label</label>
+        <input class="clr-col-5" type="text" clrInput name="name" formControlName="name" />
+        <clr-control-helper>Helper Subtext</clr-control-helper>
+        <clr-control-error>State Subtext</clr-control-error>
+        <clr-control-success>State Subtext</clr-control-success>
+      </clr-input-container>
+      <h3>Col 6</h3>
+      <clr-input-container>
+        <label class="clr-col-1">Field 6 label</label>
+        <input class="clr-col-6" type="text" clrInput name="name" formControlName="name" />
+        <clr-control-helper>Helper Subtext</clr-control-helper>
+        <clr-control-error>State Subtext</clr-control-error>
+        <clr-control-success>State Subtext</clr-control-success>
+      </clr-input-container>
+      <h3>Col 7</h3>
+      <clr-input-container>
+        <label class="clr-col-1">Field 7 label</label>
+        <input class="clr-col-7" type="text" clrInput name="name" formControlName="name" />
+        <clr-control-helper>Helper Subtext</clr-control-helper>
+        <clr-control-error>State Subtext</clr-control-error>
+        <clr-control-success>State Subtext</clr-control-success>
+      </clr-input-container>
+      <h3>Col 8</h3>
+      <clr-input-container>
+        <label class="clr-col-1">Field 8 label</label>
+        <input class="clr-col-8" type="text" clrInput name="name" formControlName="name" />
+        <clr-control-helper>Helper Subtext</clr-control-helper>
+        <clr-control-error>State Subtext</clr-control-error>
+        <clr-control-success>State Subtext</clr-control-success>
+      </clr-input-container>
+      <h3>Col 9</h3>
+      <clr-input-container>
+        <label class="clr-col-1">Field 9 label</label>
+        <input class="clr-col-9" type="text" clrInput name="name" formControlName="name" />
+        <clr-control-helper>Helper Subtext</clr-control-helper>
+        <clr-control-error>State Subtext</clr-control-error>
+        <clr-control-success>State Subtext</clr-control-success>
+      </clr-input-container>
+      <h3>Col 10</h3>
+      <clr-input-container>
+        <label class="clr-col-1">Field 10 label</label>
+        <input class="clr-col-10" type="text" clrInput name="name" formControlName="name" />
+        <clr-control-helper>Helper Subtext</clr-control-helper>
+        <clr-control-error>State Subtext</clr-control-error>
+        <clr-control-success>State Subtext</clr-control-success>
+      </clr-input-container>
+      <h3>Col 11</h3>
+      <clr-input-container>
+        <label class="clr-col-1">Field 11 label</label>
+        <input class="clr-col-11" type="text" clrInput name="name" formControlName="name" />
+        <clr-control-helper>Helper Subtext</clr-control-helper>
+        <clr-control-error>State Subtext</clr-control-error>
+        <clr-control-success>State Subtext</clr-control-success>
+      </clr-input-container>
+    </form>
+  `,
+})
+class FormsStoryComponent {
+  columns = new Array(11);
+  _isDisabled = false;
+  _isSuccess = false;
+  _isError = false;
+
+  form = new FormGroup({
+    name: new FormControl(),
+  });
+
+  @Input() clrLayout = ClrFormLayout.HORIZONTAL;
+
+  constructor(private changeDetectorRef: ChangeDetectorRef) {}
+
+  @Input()
+  get isDisabled() {
+    return this._isDisabled;
+  }
+  set isDisabled(value: boolean) {
+    this._isDisabled = value;
+    this.setControlsState();
+  }
+
+  @Input()
+  get isError() {
+    return this._isError;
+  }
+  set isError(value: boolean) {
+    this._isError = value;
+    this.setControlsState();
+  }
+
+  @Input()
+  get isSuccess() {
+    return this._isSuccess;
+  }
+  set isSuccess(value: boolean) {
+    this._isSuccess = value;
+    this.setControlsState();
+  }
+  setControlsState() {
+    this.form.enable();
+    Object.keys(this.form.controls).forEach(control => {
+      if (this._isDisabled) {
+        this.form.get(control)?.disable();
+      } else {
+        if (this._isError && !this._isSuccess) {
+          this.form.get(control).setErrors({ required: true });
+          this.form.get(control).markAsTouched();
+          this.form.get(control).markAsDirty();
+        } else if (this._isSuccess) {
+          this.form.get(control).setErrors(null);
+          this.form.get(control).markAsTouched();
+        }
+      }
+    });
+    this.form.updateValueAndValidity();
+    this.changeDetectorRef.detectChanges();
+  }
+}
+
+export default {
+  title: 'Forms/Input Column Widths',
+  component: FormsStoryComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [FormsStoryComponent],
+      imports: [...CommonModules, ClrLayoutModule, ClrFormsModule],
+    }),
+  ],
+  argTypes: {
+    getProviderFromContainer: { control: { disable: true }, table: { disable: true } },
+    triggerValidation: { control: { disable: true }, table: { disable: true } },
+    clrLayout: { control: 'radio', options: Object.values(ClrFormLayout).filter(value => typeof value === 'string') },
+  },
+  args: {
+    clrLayout: ClrFormLayout.HORIZONTAL,
+    isDisabled: false,
+    isError: false,
+    isSuccess: false,
+  },
+  render: (args: FormsStoryComponent) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <forms-input-states-components ${argsToTemplate(args)}></forms-input-states-components>
+    `,
+  }),
+};
+
+type Story = StoryObj<FormsStoryComponent>;
+
+export const InputStates: Story = {};
+
+export const VerticalInputStates: Story = {
+  args: { clrLayout: ClrFormLayout.VERTICAL },
+};
+
+export const CompactInputStates: Story = {
+  args: { clrLayout: ClrFormLayout.COMPACT },
+};
+
+export const DisabledStates: Story = {
+  args: { isDisabled: true },
+};
+
+export const ErrorStates: Story = {
+  args: { isError: true },
+};
+export const VerticalErrorStates: Story = {
+  args: { isError: true, clrLayout: ClrFormLayout.VERTICAL },
+};
+export const CompactErrorStates: Story = {
+  args: { isError: true, clrLayout: ClrFormLayout.COMPACT },
+};
+
+export const SuccessStates: Story = {
+  args: { isSuccess: true },
+};
+export const VerticalSuccessStates: Story = {
+  args: { isSuccess: true, clrLayout: ClrFormLayout.VERTICAL },
+};
+export const CompactSuccessStates: Story = {
+  args: { isSuccess: true, clrLayout: ClrFormLayout.COMPACT },
+};

projects/angular/src/forms/styles/_form.clarity.scss

@@ -10,7 +10,7 @@
 
 @include mixins.exports('forms.wrappers') {
   .clr-form {
-    $maxWidthSize: calc(100% - #{forms-variables.$clr-forms-icon-size});
+    $widthSize: calc(100% - #{forms-variables.$clr-forms-icon-size});
     padding: forms-variables.$clr-forms-baseline;
 
     &-full-width {
@@ -20,8 +20,7 @@
         .clr-input-wrapper,
         .clr-number-input-wrapper,
         .clr-combobox {
-          width: 100%;
-          max-width: $maxWidthSize;
+          width: $widthSize;
         }
 
         .clr-combobox-wrapper,
@@ -63,7 +62,7 @@
           right: forms-variables.$clr-forms-baseline;
         }
         .clr-control-container:not(.clr-error):not(.clr-success) textarea {
-          max-width: $maxWidthSize;
+          width: $widthSize;
         }
       }
     }