diff --git a/packages/core/scss/theme/classic-dark/_sizes.scss b/packages/core/scss/theme/classic-dark/_sizes.scss index cacf8c3717..ee22cb02b7 100644 --- 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 index bf6c7fce30..e9a7277e7a 100644 --- 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 index 214f52123f..f285ac3ae4 100644 --- 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 index fb0fbbf721..05458edc16 100644 --- 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 { +
+ + + + + + +
+
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 index a0af79318b..129d61e400 100644 --- 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 ( - {this.selectFileText ? this.selectFileText : '+ Drag files here or'} + + {this.selectFileText + ? this.selectFileText + : '+ Drag files here or'} + ); case UploadFileState.LOADING: return ( - {this.loadingText ? this.loadingText : 'Checking files...'} + + {this.loadingText ? this.loadingText : 'Checking files...'} + ); case UploadFileState.UPLOAD_FAILED: return ( - {this.uploadFailedText - ? this.uploadFailedText - : 'Upload failed. Please try again.'} + + {this.uploadFailedText + ? this.uploadFailedText + : 'Upload failed. Please try again.'} + ); case UploadFileState.UPLOAD_SUCCESSED: return ( - {this.uploadSuccessText - ? this.uploadSuccessText - : 'Upload successful'} + + {this.uploadSuccessText + ? this.uploadSuccessText + : 'Upload successful'} + ); 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} /> - +