Merge pull request #198 from CrowdStrike/fix-file-input-styles

Update file-input styling with latest designs

Author: ynotdraw

.changeset/eleven-crabs-type.md

@@ -0,0 +1,5 @@
+---
+'@crowdstrike/ember-toucan-core': patch
+---
+
+Updated `<Form::Fields::FileInput` styling to match designs. This included updates to the disabled state as well as the list items.

docs/components/file-input-field/demo/base-demo.md

@@ -1,12 +1,15 @@
 ```hbs template
-<Form::Fields::FileInput
-  @deleteLabel='Delete file'
-  @label='Label'
-  @files={{this.files}}
-  @hint='Hint text'
-  @trigger='Browse Files'
-  @onChange={{this.handleChange}}
-/>
+<div class='max-w-md'>
+  <Form::Fields::FileInput
+    @deleteLabel='Delete file'
+    @label='Label'
+    @files={{this.files}}
+    @hint='Hint text'
+    @trigger='Browse Files'
+    @onChange={{this.handleChange}}
+    @multiple={{true}}
+  />
+</div>
 ```
 
 ```js component

docs/components/file-input-field/index.md

@@ -278,7 +278,7 @@ Target the trash icon button via `data-delete-file`.
     />
 </div>
 
-### FileInputField with isReadOnly
+## FileInputField with isReadOnly
 
 <div class='mb-4 w-64'>
   <Form::Fields::FileInput

packages/ember-toucan-core/src/components/form/fields/file-input.hbs

@@ -1,5 +1,5 @@
 <div
-  class="inline-flex flex-col {{if @isDisabled 'text-disabled'}}"
+  class="inline-flex w-full flex-col {{if @isDisabled 'text-disabled'}}"
   data-root-field={{if @rootTestSelector @rootTestSelector}}
 >
   <Form::Field as |field|>
@@ -20,10 +20,6 @@
           {{else}}
             {{@label}}
           {{/if}}
-
-          {{#if this.isReadOnlyOrDisabled}}
-            <this.LockIcon />
-          {{/if}}
         </span>
       {{/if}}
 
@@ -61,22 +57,34 @@
           class="{{if @isReadOnly 'shadow-read-only-outline bg-surface-xl'}}"
           @variant="secondary"
           @onClick={{(fn this.handleChange field)}}
+          @isDisabled={{@isDisabled}}
         >
           <span data-trigger>{{@trigger}}</span>
-          <svg
-            aria-hidden="true"
-            class="ml-2"
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            fill="currentColor"
-          ><g><path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M2 10v2.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V10h1v2.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V10h1Z"
-              /><path
-                d="M8 10.707a.5.5 0 0 1-.5-.5V2.414L4.854 5.061a.5.5 0 1 1-.708-.707L8 .5l3.854 3.854a.5.5 0 0 1-.708.707L8.5 2.414v7.793a.5.5 0 0 1-.5.5Z"
-              /></g></svg>
+
+          {{#if this.isReadOnlyOrDisabled}}
+            <this.LockIcon class="{{if @isReadOnly 'ml-2'}}" />
+          {{else}}
+            <svg
+              aria-hidden="true"
+              class="ml-2"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="currentColor"
+              data-upload-icon
+            >
+              <g>
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M2 10v2.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V10h1v2.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V10h1Z"
+                />
+                <path
+                  d="M8 10.707a.5.5 0 0 1-.5-.5V2.414L4.854 5.061a.5.5 0 1 1-.708-.707L8 .5l3.854 3.854a.5.5 0 0 1-.708.707L8.5 2.414v7.793a.5.5 0 0 1-.5.5Z"
+                />
+              </g>
+            </svg>
+          {{/if}}
         </Button>
       </field.Control>
     </field.Label>

packages/ember-toucan-core/src/components/form/file-input/delete-button.hbs

@@ -1,16 +1,15 @@
-<Button
-  @variant="bare"
-  type="button"
+<button
   aria-label={{@deleteLabel}}
   {{! TODO: remove reset-styles https://github.com/CrowdStrike/ember-oss-docs/issues/17 }}
-  class="reset-styles flex-none bg-transparent"
+  class="reset-styles focusable focus:interactive-normal hover:interactive-normal rounded-sm transition"
+  type="button"
   {{on "click" (fn @onDelete @file)}}
   data-delete-file
   ...attributes
 >
   <svg
     aria-hidden="true"
-    class="text-text-and-icons h-4 w-4"
+    class="text-text-and-icons"
     width="16"
     height="16"
     viewBox="0 0 16 16"
@@ -20,4 +19,4 @@
       /><path
         d="M6 11.5v-6h1v6H6Zm3 0v-6h1v6H9ZM8 1a1.5 1.5 0 0 0-1.5 1.5h-1a2.5 2.5 0 0 1 5 0h-1A1.5 1.5 0 0 0 8 1Z"
       /></g></svg>
-</Button>
+</button>

packages/ember-toucan-core/src/components/form/file-input/list-item.hbs

@@ -1,5 +1,5 @@
 <li
-  class="bg-overlay-1 focus:outline-none focus:shadow-focus-outline m-0 block flex rounded-sm p-1 transition-shadow
+  class="bg-overlay-1 focus:outline-none focus:shadow-focus-outline m-0 flex items-center justify-between rounded-sm px-2 py-1 transition-shadow
     {{if @isDisabled 'text-disabled' 'text-titles-and-attributes'}}
     {{if
       @hasError
@@ -8,18 +8,17 @@
     }}"
   ...attributes
 >
-  <div class="flex-1 px-4 py-1">
-    <p
-      class="text-titles-and-attributes type-md-tight m-0 truncate p-0"
-      data-file-name
-    >{{@file.name}}</p>
+  {{! The `pl-2` added here is to offset the spacing added by the delete button below so that the horizontal axis spacing appears identical }}
+  <div class="flex-1 py-1 pl-2">
+    <p class="type-md-tight m-0 truncate p-0" data-file-name>{{@file.name}}</p>
     <span
       class="text-body-and-labels type-xs-tight mt-1 block"
       data-file-size
     >{{(this.formatSize @file.size)}}</span>
   </div>
+
   <Form::FileInput::DeleteButton
-    class="mr-2"
+    class="p-2"
     @deleteLabel={{@deleteLabel}}
     @onDelete={{@onDelete}}
     @file={{@file}}

packages/ember-toucan-core/src/components/form/file-input/list.hbs

@@ -1,4 +1,4 @@
-<ul class="m-0 list-none space-y-1 p-0" data-files ...attributes>
+<ul class="m-0 list-none space-y-1.5 p-0" data-files ...attributes>
   {{#each @files as |file|}}
     {{#if (has-block)}}
       {{yield

test-app/tests/integration/components/file-input-field-test.gts

@@ -79,6 +79,7 @@ module('Integration | Component | Fields | FileInput', function (hooks) {
         'Expected hint block not to be displayed as an error was not provided'
       );
 
+    assert.dom('[data-upload-icon]').exists();
     assert.dom('[data-lock-icon]').doesNotExist();
   });
 
@@ -194,6 +195,7 @@ module('Integration | Component | Fields | FileInput', function (hooks) {
     assert.dom('[data-file-input-field]').hasClass('text-disabled');
 
     assert.dom('[data-lock-icon]').exists();
+    assert.dom('[data-upload-icon]').doesNotExist();
 
     assert.dom('label').hasClass('text-disabled');
   });
@@ -213,6 +215,7 @@ module('Integration | Component | Fields | FileInput', function (hooks) {
     assert.dom('[data-file-input-field]').hasAttribute('readonly');
 
     assert.dom('[data-lock-icon]').exists();
+    assert.dom('[data-upload-icon]').doesNotExist();
   });
 
   test('it spreads attributes to the underlying file-input-field', async function (assert) {