feat(forms): add full width class (#1710)

## 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?

Introduces a new class that can be set on the forms so that controls can
take full width of the container or take control on them with utility
classes `clr-col-*`

<!-- Please check the one that applies to this PR using "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?

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

Issue Number: CDE-2572

## What is the new behavior?

## 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 <[email protected]>
Co-authored-by: GitHub <[email protected]>

.storybook/stories/forms/forms-input-states-components.stories.ts

@@ -15,7 +15,7 @@ import { CommonModules } from '../../helpers/common';
 @Component({
   selector: 'forms-input-states-components',
   template: `
-    <form clrForm [formGroup]="form" [clrLayout]="clrLayout">
+    <form clrForm [formGroup]="form" [clrLayout]="clrLayout" [class.clr-form-full-width]="isFullWidth">
       <clr-input-container>
         <label>Text</label>
         <input type="text" clrInput name="name" formControlName="name" />
@@ -55,6 +55,31 @@ import { CommonModules } from '../../helpers/common';
         <clr-control-error>State Subtext</clr-control-error>
         <clr-control-success>State Subtext</clr-control-success>
       </clr-select-container>
+      <clr-datalist-container>
+        <label>Datalist</label>
+        <input clrDatalistInput placeholder="No label" name="datalist" formControlName="datalist" />
+        <datalist>
+          <option value="one"></option>
+          <option value="two"></option>
+          <option value="three"></option>
+        </datalist>
+        <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-datalist-container>
+      <clr-combobox-container>
+        <label>Combobox</label>
+        <clr-combobox name="combobox" formControlName="selectedOptionCombobox">
+          <clr-options>
+            <clr-option [clrValue]="'one'">One</clr-option>
+            <clr-option [clrValue]="'two'">Two</clr-option>
+            <clr-option [clrValue]="'three'">Three</clr-option>
+          </clr-options>
+        </clr-combobox>
+        <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-combobox-container>
       <clr-checkbox-container>
         <label>Checkbox</label>
         <clr-checkbox-wrapper>
@@ -68,6 +93,9 @@ import { CommonModules } from '../../helpers/common';
       <clr-date-container>
         <label>Datepicker</label>
         <input type="date" autocomplete="off" clrDate formControlName="date" name="date" />
+        <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-date-container>
       <clr-radio-container>
         <label>Basic radio</label>
@@ -97,6 +125,20 @@ import { CommonModules } from '../../helpers/common';
         <clr-control-error>State Subtext</clr-control-error>
         <clr-control-success>State Subtext</clr-control-success>
       </clr-toggle-container>
+      <clr-file-input-container>
+        <label>File Input</label>
+        <input type="file" formControlName="files" multiple required clrFileInput />
+        <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-file-input-container>
+      <clr-range-container [clrRangeHasProgress]="true">
+        <label>Range</label>
+        <input type="range" clrRange name="three" formControlName="range" />
+        <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-range-container>
     </form>
   `,
 })
@@ -111,13 +153,18 @@ class FormsStoryComponent {
     password: new FormControl(),
     description: new FormControl(),
     selectedOption: new FormControl(),
+    selectedOptionCombobox: new FormControl(),
+    datalist: new FormControl(),
     option1: new FormControl(),
     date: new FormControl(),
     radio: new FormControl(),
     toggle: new FormControl(),
+    files: new FormControl(),
+    range: new FormControl(50),
   });
 
   @Input() clrLayout = ClrFormLayout.HORIZONTAL;
+  @Input() isFullWidth = false;
 
   constructor(private changeDetectorRef: ChangeDetectorRef) {}
 
@@ -147,7 +194,6 @@ class FormsStoryComponent {
     this._isSuccess = value;
     this.setControlsState();
   }
-
   setControlsState() {
     this.form.enable();
     Object.keys(this.form.controls).forEach(control => {
@@ -188,6 +234,7 @@ export default {
     isDisabled: false,
     isError: false,
     isSuccess: false,
+    isFullWidth: false,
   },
   render: (args: FormsStoryComponent) => ({
     props: {
@@ -211,6 +258,18 @@ export const CompactInputStates: Story = {
   args: { clrLayout: ClrFormLayout.COMPACT },
 };
 
+export const FullWidthInputStates: Story = {
+  args: { isFullWidth: true },
+};
+
+export const VerticaFullWidthInputStates: Story = {
+  args: { clrLayout: ClrFormLayout.VERTICAL, isFullWidth: true },
+};
+
+export const CompactFullWidthInputStates: Story = {
+  args: { clrLayout: ClrFormLayout.COMPACT, isFullWidth: true },
+};
+
 export const DisabledStates: Story = {
   args: { isDisabled: true },
 };
@@ -225,6 +284,18 @@ export const CompactErrorStates: Story = {
   args: { isError: true, clrLayout: ClrFormLayout.COMPACT },
 };
 
+export const FullWidthErrorStates: Story = {
+  args: { isError: true, isFullWidth: true },
+};
+
+export const VerticalFullWidthErrorStates: Story = {
+  args: { isError: true, clrLayout: ClrFormLayout.VERTICAL, isFullWidth: true },
+};
+
+export const CompactFullWidthErrorStates: Story = {
+  args: { isError: true, clrLayout: ClrFormLayout.COMPACT, isFullWidth: true },
+};
+
 export const SuccessStates: Story = {
   args: { isSuccess: true },
 };
@@ -234,3 +305,15 @@ export const VerticalSuccessStates: Story = {
 export const CompactSuccessStates: Story = {
   args: { isSuccess: true, clrLayout: ClrFormLayout.COMPACT },
 };
+
+export const FullWidthSuccessStates: Story = {
+  args: { isSuccess: true, isFullWidth: true },
+};
+
+export const FullWidthVerticalSuccessStates: Story = {
+  args: { isSuccess: true, clrLayout: ClrFormLayout.VERTICAL, isFullWidth: true },
+};
+
+export const FullWidthCompactSuccessStates: Story = {
+  args: { isSuccess: true, clrLayout: ClrFormLayout.COMPACT, isFullWidth: true },
+};

.storybook/stories/forms/forms-input-states-styles.stories.ts

@@ -27,12 +27,13 @@ export default {
     isDisabled: false,
     isError: false,
     isSuccess: false,
+    isFullWidth: false,
   },
 };
 
 const FormInputTemplate: StoryFn = args => ({
   template: `
-    <form [class]="'clr-form clr-form-' + clrLayout">
+    <form [class]="'clr-form clr-form-' + clrLayout" [class.clr-form-full-width]="isFullWidth">
       <div class="clr-form-control" [ngClass]="{ 'clr-form-control-disabled': isDisabled }">
         <label class="clr-control-label">Text</label>
         <div class="clr-control-container" [ngClass]="{ 'clr-success': isSuccess, 'clr-error': isError }">
@@ -238,6 +239,21 @@ export const CompactInputStates: StoryObj = {
   args: { clrLayout: ClrFormLayout.COMPACT },
 };
 
+export const FullWidthInputStates: StoryObj = {
+  render: FormInputTemplate,
+  args: { isFullWidth: true },
+};
+
+export const VerticaFullWidthInputStates: StoryObj = {
+  render: FormInputTemplate,
+  args: { clrLayout: ClrFormLayout.VERTICAL, isFullWidth: true },
+};
+
+export const CompactFullWidthInputStates: StoryObj = {
+  render: FormInputTemplate,
+  args: { clrLayout: ClrFormLayout.COMPACT, isFullWidth: true },
+};
+
 export const DisabledStates: StoryObj = {
   render: FormInputTemplate,
   args: { isDisabled: true },
@@ -258,6 +274,21 @@ export const CompactErrorStates: StoryObj = {
   args: { isError: true, clrLayout: ClrFormLayout.COMPACT },
 };
 
+export const FullWidthErrorStates: StoryObj = {
+  render: FormInputTemplate,
+  args: { isError: true, isFullWidth: true },
+};
+
+export const VerticalFullWidthErrorStates: StoryObj = {
+  render: FormInputTemplate,
+  args: { isError: true, clrLayout: ClrFormLayout.VERTICAL, isFullWidth: true },
+};
+
+export const CompactFullWidthErrorStates: StoryObj = {
+  render: FormInputTemplate,
+  args: { isError: true, clrLayout: ClrFormLayout.COMPACT, isFullWidth: true },
+};
+
 export const SuccessStates: StoryObj = {
   render: FormInputTemplate,
   args: { isSuccess: true },
@@ -272,3 +303,18 @@ export const CompactSuccessStates: StoryObj = {
   render: FormInputTemplate,
   args: { isSuccess: true, clrLayout: ClrFormLayout.COMPACT },
 };
+
+export const FullWidthSuccessStates: StoryObj = {
+  render: FormInputTemplate,
+  args: { isSuccess: true, isFullWidth: true },
+};
+
+export const FullWidthVerticalSuccessStates: StoryObj = {
+  render: FormInputTemplate,
+  args: { isSuccess: true, clrLayout: ClrFormLayout.VERTICAL, isFullWidth: true },
+};
+
+export const FullWidthCompactSuccessStates: StoryObj = {
+  render: FormInputTemplate,
+  args: { isSuccess: true, clrLayout: ClrFormLayout.COMPACT, isFullWidth: true },
+};

projects/angular/src/forms/STYLES.md

@@ -52,8 +52,9 @@
 
 ## CSS Classes
 
-| Class name        | Description                          |
-| ----------------- | ------------------------------------ |
-| clr-form          | Main form element.                   |
-| clr-form-group    | Form group identifier.               |
-| clr-required-mark | Add required mark on the right side. |
+| Class name          | Description                                           |
+| ------------------- | ----------------------------------------------------- |
+| clr-form            | Main form element.                                    |
+| clr-form-group      | Form group identifier.                                |
+| clr-form-full-width | Make all controls to take 100% width of the container |
+| clr-required-mark   | Add required mark on the right side.                  |

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

@@ -10,7 +10,63 @@
 
 @include mixins.exports('forms.wrappers') {
   .clr-form {
+    $maxWidthSize: calc(100% - #{forms-variables.$clr-forms-icon-size});
     padding: forms-variables.$clr-forms-baseline;
+
+    &-full-width {
+      .clr-form-control {
+        .clr-control-container,
+        .clr-select-wrapper,
+        .clr-input-wrapper,
+        .clr-number-input-wrapper,
+        .clr-combobox {
+          width: 100%;
+          max-width: $maxWidthSize;
+        }
+
+        .clr-combobox-wrapper,
+        .clr-combobox-input-wrapper,
+        .clr-textarea-wrapper,
+        .clr-input-group,
+        input,
+        textarea,
+        select {
+          width: 100%;
+        }
+
+        .clr-combobox {
+          display: inline-flex;
+        }
+      }
+
+      &.clr-form-compact {
+        .clr-form-control {
+          .clr-input-wrapper,
+          .clr-number-input-wrapper,
+          .clr-select-wrapper,
+          .clr-multiselect-wrapper {
+            display: inline-flex;
+          }
+        }
+
+        .clr-control-container {
+          flex-wrap: nowrap;
+        }
+        .clr-subtext {
+          flex: 0 0 auto;
+        }
+      }
+
+      &:not(.clr-form-compact) .clr-form-control {
+        .clr-error .clr-select-wrapper::after,
+        .clr-success .clr-select-wrapper::after {
+          right: forms-variables.$clr-forms-baseline;
+        }
+        .clr-control-container:not(.clr-error):not(.clr-success) textarea {
+          max-width: $maxWidthSize;
+        }
+      }
+    }
   }
 
   .clr-form-group {