feat(core/upload): add multiline support and v7 styling

siemens · Aug 26, 2022 · f2c13e2 · f2c13e2
1 parent 3ebb38e
commit f2c13e2
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 28 deletions.
diff --git a/packages/core/scss/theme/classic-dark/_sizes.scss b/packages/core/scss/theme/classic-dark/_sizes.scss
@@ -45,4 +45,5 @@ $classic-dark-sizes: (
   logo--siemens:
     url("data:image/svg+xml;charset=utf8,%3Csvg width='76' height='12' viewBox='0 0 76 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.497 11.545v-2.27c1.292.407 2.435.61 3.43.61 1.373 0 2.06-.363 2.06-1.088 0-.27-.1-.498-.3-.682-.206-.195-.73-.466-1.573-.812C2.6 6.68 1.614 6.15 1.156 5.71.561 5.132.264 4.402.264 3.52c0-1.137.433-2.003 1.3-2.598.855-.59 1.97-.885 3.346-.885.758 0 1.854.14 3.289.419v2.183C7.132 2.213 6.141 2 5.225 2c-1.289 0-1.933.354-1.933 1.064 0 .265.13.481.39.649.216.136.811.422 1.785.86C6.87 5.198 7.804 5.739 8.27 6.2c.552.546.828 1.253.828 2.12 0 1.244-.541 2.194-1.624 2.849-.877.53-2.014.795-3.411.795-1.18 0-2.368-.139-3.565-.418zM10.91.237h3.211V11.73h-3.21V.237zm6.155 11.494V.237H25.3v2.079h-5.14V4.91h4.474v1.896H20.16v2.728h5.272v2.196h-8.367zm10.463 0V.237h4.163l2.892 7.344L37.547.237h3.954V11.73h-3.044V3.593l-3.37 8.255h-1.99L29.79 3.593v8.138h-2.262zm16.918 0V.237h8.234v2.079h-5.14V4.91h4.475v1.896H47.54v2.728h5.273v2.196h-8.368zm10.48 0V.237h3.721l3.948 7.694V.237h2.261V11.73h-3.615l-4.053-7.798v7.798h-2.262zm12.21-.186v-2.27c1.28.407 2.424.61 3.43.61 1.373 0 2.059-.363 2.059-1.088a.903.903 0 0 0-.29-.682c-.207-.195-.734-.466-1.582-.812-1.508-.617-2.495-1.147-2.958-1.592-.594-.573-.891-1.306-.891-2.2 0-1.13.432-1.994 1.299-2.59.855-.59 1.97-.884 3.346-.884.774 0 1.776.123 3.005.37l.284.049v2.183C73.77 2.213 72.776 2 71.856 2c-1.284 0-1.925.354-1.925 1.064 0 .265.13.481.389.649.206.13.804.417 1.794.86 1.392.624 2.324 1.165 2.793 1.625.553.547.829 1.254.829 2.12 0 1.245-.539 2.195-1.616 2.85-.882.53-2.022.795-3.419.795-1.18 0-2.37-.139-3.565-.418z' fill='%23FFF' fill-rule='evenodd' fill-opacity='.85'/%3E%3C/svg%3E%0A"),
   tab-indicator--height: 0.25rem,
+  upload--border-radius: 4px,
 );
diff --git a/packages/core/scss/theme/classic-light/_sizes.scss b/packages/core/scss/theme/classic-light/_sizes.scss
@@ -45,4 +45,5 @@ $classic-light-sizes: (
   logo--siemens:
     url("data:image/svg+xml;charset=utf8,%3Csvg width='76' height='12' viewBox='0 0 76 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.497 11.545v-2.27c1.292.407 2.435.61 3.43.61 1.373 0 2.06-.363 2.06-1.088 0-.27-.1-.498-.3-.682-.206-.195-.73-.466-1.573-.812C2.6 6.68 1.614 6.15 1.156 5.71.561 5.132.264 4.402.264 3.52c0-1.137.433-2.003 1.3-2.598.855-.59 1.97-.885 3.346-.885.758 0 1.854.14 3.289.419v2.183C7.132 2.213 6.141 2 5.225 2c-1.289 0-1.933.354-1.933 1.064 0 .265.13.481.39.649.216.136.811.422 1.785.86C6.87 5.198 7.804 5.739 8.27 6.2c.552.546.828 1.253.828 2.12 0 1.244-.541 2.194-1.624 2.849-.877.53-2.014.795-3.411.795-1.18 0-2.368-.139-3.565-.418zM10.91.237h3.211V11.73h-3.21V.237zm6.155 11.494V.237H25.3v2.079h-5.14V4.91h4.474v1.896H20.16v2.728h5.272v2.196h-8.367zm10.463 0V.237h4.163l2.892 7.344L37.547.237h3.954V11.73h-3.044V3.593l-3.37 8.255h-1.99L29.79 3.593v8.138h-2.262zm16.918 0V.237h8.234v2.079h-5.14V4.91h4.475v1.896H47.54v2.728h5.273v2.196h-8.368zm10.48 0V.237h3.721l3.948 7.694V.237h2.261V11.73h-3.615l-4.053-7.798v7.798h-2.262zm12.21-.186v-2.27c1.28.407 2.424.61 3.43.61 1.373 0 2.059-.363 2.059-1.088a.903.903 0 0 0-.29-.682c-.207-.195-.734-.466-1.582-.812-1.508-.617-2.495-1.147-2.958-1.592-.594-.573-.891-1.306-.891-2.2 0-1.13.432-1.994 1.299-2.59.855-.59 1.97-.884 3.346-.884.774 0 1.776.123 3.005.37l.284.049v2.183C73.77 2.213 72.776 2 71.856 2c-1.284 0-1.925.354-1.925 1.064 0 .265.13.481.389.649.206.13.804.417 1.794.86 1.392.624 2.324 1.165 2.793 1.625.553.547.829 1.254.829 2.12 0 1.245-.539 2.195-1.616 2.85-.882.53-2.022.795-3.419.795-1.18 0-2.37-.139-3.565-.418z' fill='%23000' fill-rule='evenodd' fill-opacity='.75'/%3E%3C/svg%3E%0A"),
   tab-indicator--height: 0.25rem,
+  upload--border-radius: 4px,
 );
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -1282,6 +1282,10 @@ export namespace Components {
           * Will be used by state = UploadFileState.LOADING
          */
         "loadingText": string;
+        /**
+          * Whether the text should wrap to more than one line
+         */
+        "multiline": boolean;
         /**
           * If multiple is true the user can drop or select multiple files
          */
@@ -3126,6 +3130,10 @@ declare namespace LocalJSX {
           * Will be used by state = UploadFileState.LOADING
          */
         "loadingText"?: string;
+        /**
+          * Whether the text should wrap to more than one line
+         */
+        "multiline"?: boolean;
         /**
           * If multiple is true the user can drop or select multiple files
          */

diff --git a/packages/core/src/components/my-component/my-component.tsx b/packages/core/src/components/my-component/my-component.tsx
@@ -5,6 +5,7 @@ import { Component, h, Host, State } from '@stencil/core';
 import { FlipTileState } from '../flip-tile/flip-tile-state';
 import { modal } from '../modal/modal-utils';
 import { toast } from '../toast/toast-utils';
+import { UploadFileState } from '../upload/upload-file-state';
 
 type Themes = 'brand-light' | 'brand-dark' | 'classic-light' | 'classic-dark';
 
@@ -126,6 +127,20 @@ export class MyComponent {
 
             <ix-modal-container></ix-modal-container>
 
+            <div
+              style={{
+                display: 'flex',
+                marginTop: '2rem',
+              }}
+            >
+              <ix-upload></ix-upload>
+              <ix-upload state={UploadFileState.LOADING}></ix-upload>
+              <ix-upload state={UploadFileState.UPLOAD_SUCCESSED}></ix-upload>
+              <ix-upload state={UploadFileState.UPLOAD_FAILED}></ix-upload>
+              <ix-upload disabled></ix-upload>
+              <ix-upload multiline selectFileText='Lorem ipsum dolor sit amet'></ix-upload>
+            </div>
+
             <div
               style={{
                 display: 'flex',

diff --git a/packages/core/src/components/upload/upload.scss b/packages/core/src/components/upload/upload.scss
@@ -1,6 +1,8 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
+@import 'common-variables';
+@import 'mixins/text-truncation';
 
 :host {
   display: block;
@@ -18,19 +20,50 @@
     height: 100%;
     width: 100%;
 
-    padding: 0 1rem;
+    padding: $default-space;
 
-    border: var(--theme-soft-bdr-2);
-    border-style: dashed;
+    border: 1px dashed var(--theme-upload--border-color);
+    border-radius: var(--theme-upload--border-radius);
+    color: var(--theme-upload-text--color);
+
+    &.multiline {
+      max-height: unset;
+      height: auto;
+
+      .glyph {
+        align-self: flex-start;
+        margin-block-start: 3px;
+      }
+
+      > div {
+        align-self: flex-start;
+      }
+    }
+
+    &:not(.multiline) {
+      .state,
+      .upload-text {
+        @include ellipsis;
+      }
+    }
 
     &.file-over {
-      //TODO: Implement theme
-      // @include primary-border-2;
-      // @include primary-glow;
+      border-color: var(--theme-upload--border-color--dragover);
+      border-style: solid;
+    }
+
+    &.checking {
+      color: var(--theme-upload-text--color--checking);
+      border-style: solid;
+    }
+
+    &.disabled {
+      border-style: solid;
+      color: var(--theme-upload-text--color--disabled);
     }
 
-    &.pending {
-      display: none;
+    ix-button {
+      margin-inline-start: $default-space;
     }
 
     .upload-browser {
@@ -43,8 +76,8 @@
     .loader {
       margin: 2.187rem auto;
       font-size: 0.937rem;
-      width: 1em;
-      height: 1em;
+      width: $default-space;
+      height: $default-space;
       border-radius: 50%;
       position: relative;
       text-indent: -9999em;
@@ -53,21 +86,21 @@
     }
 
     .upload-filename {
-      margin-bottom: 1rem;
+      margin-bottom: $default-space;
     }
 
     .state {
       display: flex;
       align-items: center;
 
-      > cui-spinner {
-        margin-right: 0.625rem;
-        height: 1.5rem;
-        width: 1.5rem;
+      > ix-spinner {
+        margin-inline-end: $small-space;
+        height: $large-space;
+        width: $large-space;
       }
 
       > i {
-        margin-right: 0.625rem;
+        margin-inline-end: $small-space;
 
         &.glyph-error {
           color: var(--theme-color-alarm);

diff --git a/packages/core/src/components/upload/upload.tsx b/packages/core/src/components/upload/upload.tsx
@@ -31,6 +31,11 @@ export class Upload {
    */
   @Prop() multiple = false;
 
+  /**
+   * Whether the text should wrap to more than one line
+   */
+  @Prop() multiline = false;
+
   /**
    * Disable all input events
    */
@@ -138,32 +143,42 @@ export class Upload {
       case UploadFileState.SELECT_FILE:
         return (
           <span class="state">
-            {this.selectFileText ? this.selectFileText : '+ Drag files here or'}
+            <span class="upload-text">
+              {this.selectFileText
+                ? this.selectFileText
+                : '+ Drag files here or'}
+            </span>
           </span>
         );
       case UploadFileState.LOADING:
         return (
           <span class="state">
             <ix-spinner variant="primary"></ix-spinner>
-            {this.loadingText ? this.loadingText : 'Checking files...'}
+            <span class="upload-text">
+              {this.loadingText ? this.loadingText : 'Checking files...'}
+            </span>
           </span>
         );
       case UploadFileState.UPLOAD_FAILED:
         return (
           <span class="state">
             <i class="glyph glyph-error"></i>
-            {this.uploadFailedText
-              ? this.uploadFailedText
-              : 'Upload failed. Please try again.'}
+            <span class="upload-text">
+              {this.uploadFailedText
+                ? this.uploadFailedText
+                : 'Upload failed. Please try again.'}
+            </span>
           </span>
         );
       case UploadFileState.UPLOAD_SUCCESSED:
         return (
           <span class="state">
             <i class="glyph glyph-success"></i>
-            {this.uploadSuccessText
-              ? this.uploadSuccessText
-              : 'Upload successful'}
+            <span class="upload-text">
+              {this.uploadSuccessText
+                ? this.uploadSuccessText
+                : 'Upload successful'}
+            </span>
           </span>
         );
       default:
@@ -187,6 +202,9 @@ export class Upload {
           class={{
             'file-upload-area': true,
             'file-over': this.isFileOver,
+            checking: this.state === UploadFileState.LOADING,
+            disabled: this.disabled,
+            multiline: this.multiline,
           }}
           onDrop={(e) => this.fileDroped(e)}
           onDragOver={(e) => this.fileOver(e)}
@@ -205,15 +223,14 @@ export class Upload {
               }}
               accept={this.accept}
             />
-            <button
+            <ix-button
               tabindex="-1"
-              type="button"
-              class="btn btn-outline-secondary"
+              outline
               onClick={() => this.inputElement.click()}
               disabled={this.disabled || this.state === UploadFileState.LOADING}
             >
               {this.i18nUploadFile}
-            </button>
+            </ix-button>
           </div>
         </div>
       </Host>