fix(file-input): prevent wrapping clear button to next line (#1481)

CDE-2183

.storybook/stories/file-input/file-input.stories.ts

@@ -7,7 +7,9 @@
 
 import { FormsModule } from '@angular/forms';
 import { ClrFileInputModule, ClrFormLayout, commonStringsDefault } from '@clr/angular';
-import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
+import { moduleMetadata, StoryContext, StoryFn, StoryObj } from '@storybook/angular';
+
+import { selectFiles } from '../../../projects/angular/src/forms/file-input/file-input.helpers';
 
 export default {
   title: 'File Input/File Input',
@@ -28,38 +30,83 @@ export default {
   },
 };
 
-const fileInputTemplate: StoryFn = args => ({
-  template: `
-    <form clrForm [clrLayout]="clrLayout">
-      <clr-file-input-container [clrButtonLabel]="clrButtonLabel">
-        <label>File</label>
-        <input type="file" name="file" [(ngModel)]="file" clrFileInput required multiple />
-        <clr-control-helper>Helper message</clr-control-helper>
-        <clr-control-success>Success message</clr-control-success>
-        <clr-control-error *clrIfError="'required'">Required</clr-control-error>
-      </clr-file-input-container>
-    </form>
-  `,
+const fileInputTemplate = `
+  <form clrForm [clrLayout]="clrLayout">
+    <clr-file-input-container [clrButtonLabel]="clrButtonLabel">
+      <label>File</label>
+      <input type="file" name="file" [(ngModel)]="file" clrFileInput required multiple />
+      <clr-control-helper>Helper message</clr-control-helper>
+      <clr-control-success>Success message</clr-control-success>
+      <clr-control-error *clrIfError="'required'">Required</clr-control-error>
+    </clr-file-input-container>
+  </form>
+`;
+
+const fileInputTemplateStoryFn: StoryFn = args => ({
+  template: fileInputTemplate,
   props: { ...args },
 });
 
 export const VerticalFileInput: StoryObj = {
-  render: fileInputTemplate,
+  render: fileInputTemplateStoryFn,
+  args: {
+    clrLayout: ClrFormLayout.VERTICAL,
+  },
+};
+
+export const VerticalFileInputWithSelection: StoryObj = {
+  render: fileInputTemplateStoryFn,
+  play: selectFile,
   args: {
     clrLayout: ClrFormLayout.VERTICAL,
   },
 };
 
 export const HorizontalFileInput: StoryObj = {
-  render: fileInputTemplate,
+  render: fileInputTemplateStoryFn,
+  args: {
+    clrLayout: ClrFormLayout.HORIZONTAL,
+  },
+};
+
+export const HorizontalFileInputSelection: StoryObj = {
+  render: fileInputTemplateStoryFn,
+  play: selectFile,
   args: {
     clrLayout: ClrFormLayout.HORIZONTAL,
   },
 };
 
 export const CompactFileInput: StoryObj = {
-  render: fileInputTemplate,
+  render: fileInputTemplateStoryFn,
   args: {
     clrLayout: ClrFormLayout.COMPACT,
   },
 };
+
+export const CompactFileInputWithSelection: StoryObj = {
+  render: fileInputTemplateStoryFn,
+  play: selectFile,
+  args: {
+    clrLayout: ClrFormLayout.COMPACT,
+  },
+};
+
+// regression test for CDE-2183
+export const VerticalFileInputWithSelectionInConstrainedContainer: StoryObj = {
+  render: args => ({
+    template: `
+      <div style="width: 10px">${fileInputTemplate}</div>
+    `,
+    props: { ...args },
+  }),
+  play: selectFile,
+  args: {
+    clrLayout: ClrFormLayout.VERTICAL,
+  },
+};
+
+function selectFile({ canvasElement }: StoryContext) {
+  const fileInputElement = canvasElement.querySelector<HTMLInputElement>('input[type="file"]');
+  selectFiles(fileInputElement, [new File([''], 'file.txt')]);
+}

projects/angular/src/forms/styles/_file-input.clarity.scss

@@ -15,6 +15,7 @@
 
 @include mixins.exports('forms.file-input') {
   .clr-file-input-wrapper {
+    display: flex;
     position: relative;
     margin-top: tokens.$cds-global-space-3;
 

scripts/format-story-templates.js

@@ -73,7 +73,7 @@ function findStoryTemplates(storyTsCode) {
     if (
       (ts.isPropertyAssignment(node) || ts.isVariableDeclaration(node)) &&
       ts.isIdentifier(node.name) &&
-      node.name.text === 'template' &&
+      (node.name.text === 'template' || node.name.text.endsWith('Template')) &&
       ts.isTemplateLiteral(node.initializer)
     ) {
       const length = node.initializer.end - node.initializer.getStart();