diff --git a/.changeset/dark-pandas-buy.md b/.changeset/dark-pandas-buy.md new file mode 100644 index 00000000000..c41f457efa0 --- /dev/null +++ b/.changeset/dark-pandas-buy.md @@ -0,0 +1,7 @@ +--- +"@hashicorp/design-system-components": patch +--- + + +`FileInput` - Added width of 100% to prevent the component from overflowing its container and making it consistent with other Input components + diff --git a/packages/components/src/styles/components/form/file-input.scss b/packages/components/src/styles/components/form/file-input.scss index 6f513f2de2a..ccbf8cfae8e 100644 --- a/packages/components/src/styles/components/form/file-input.scss +++ b/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); diff --git a/showcase/app/components/page-components/form/file-input/index.gts b/showcase/app/components/page-components/form/file-input/index.gts index aa809576cf9..9afa2301a9d 100644 --- a/showcase/app/components/page-components/form/file-input/index.gts +++ b/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 { + } diff --git a/showcase/app/components/page-components/form/file-input/sub-sections/containers.gts b/showcase/app/components/page-components/form/file-input/sub-sections/containers.gts new file mode 100644 index 00000000000..065240690dc --- /dev/null +++ b/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 = + ; + +export default SubSectionContainers; diff --git a/showcase/app/components/page-components/form/file-input/sub-sections/field-control.gts b/showcase/app/components/page-components/form/file-input/sub-sections/field-control.gts index ae28373000c..c10c6cbdf20 100644 --- a/showcase/app/components/page-components/form/file-input/sub-sections/field-control.gts +++ b/showcase/app/components/page-components/form/file-input/sub-sections/field-control.gts @@ -87,6 +87,8 @@ const SubSectionFieldControl: TemplateOnlyComponent + + ; export default SubSectionFieldControl;