FileInput - Add 100% width style (HDS-5106) (#3318)

Co-authored-by: Cristiano Rastelli <[email protected]>

Author: KristinLBradley

.changeset/dark-pandas-buy.md

@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+<!-- START components/form/file-input -->
+`FileInput` - Added width of 100% to prevent the component from overflowing its container and making it consistent with other Input components
+<!-- END -->

packages/components/src/styles/components/form/file-input.scss

@@ -10,6 +10,7 @@
 @use "../../mixins/button" as *;
 
 .hds-form-file-input {
+  width: 100%; // we want to prevent the input from overflowing its container
   margin: -4px 0 -4px -4px; // offset shadow padding + default 1px spacing
   padding: 3px 0 3px 3px; // add padding so button shadow is visible
   color: var(--token-color-foreground-primary);

showcase/app/components/page-components/form/file-input/index.gts

@@ -11,6 +11,7 @@ import ShwTextH1 from 'showcase/components/shw/text/h1';
 
 import SubSectionBaseControl from 'showcase/components/page-components/form/file-input/sub-sections/base-control';
 import SubSectionFieldControl from 'showcase/components/page-components/form/file-input/sub-sections/field-control';
+import SubSectionContainers from 'showcase/components/page-components/form/file-input/sub-sections/containers';
 
 export default class FormFileInputIndex extends Component {
   @tracked showHighlight = false;
@@ -35,6 +36,7 @@ export default class FormFileInputIndex extends Component {
       </button>
       <SubSectionBaseControl @showHighlight={{this.showHighlight}} />
       <SubSectionFieldControl @showHighlight={{this.showHighlight}} />
+      <SubSectionContainers @showHighlight={{this.showHighlight}} />
     </section>
   </template>
 }

showcase/app/components/page-components/form/file-input/sub-sections/containers.gts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import style from 'ember-style-modifier';
+
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwOutliner from 'showcase/components/shw/outliner';
+
+import { HdsFormFileInputField } from '@hashicorp/design-system-components/components';
+
+export interface SubSectionContainersSignature {
+  Args: {
+    showHighlight: boolean;
+  };
+}
+
+const SubSectionContainers: TemplateOnlyComponent<SubSectionContainersSignature> =
+  <template>
+    <ShwTextH2>Containers</ShwTextH2>
+
+    <div
+      class="{{if
+          @showHighlight
+          'shw-component-form-file-input-layout-highlight'
+        }}"
+    >
+      <ShwFlex @gap="2rem" as |SF|>
+        <SF.Item @label="Within a fixed-width container">
+          <ShwOutliner {{style width="220px"}}>
+            <HdsFormFileInputField as |F|>
+              <F.Label>This is the label text</F.Label>
+              <F.HelperText>This is the helper text with longer wrapping text</F.HelperText>
+            </HdsFormFileInputField>
+          </ShwOutliner>
+        </SF.Item>
+      </ShwFlex>
+    </div>
+  </template>;
+
+export default SubSectionContainers;

showcase/app/components/page-components/form/file-input/sub-sections/field-control.gts

@@ -87,6 +87,8 @@ const SubSectionFieldControl: TemplateOnlyComponent<SubSectionFieldControlSignat
         </HdsFormFileInputField>
       </SG.Item>
     </ShwGrid>
+
+    <ShwDivider />
   </template>;
 
 export default SubSectionFieldControl;