From 2c146bb742b9db002e57ff3e8f4db8d699c85bbe Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Tue, 27 Feb 2024 14:58:13 +0100 Subject: [PATCH 1/5] kup-snackbar : design and token application Yet to be finished --- packages/ketchup/src/assets/snackbar.js | 3 +- packages/ketchup/src/components.d.ts | 10 ++++ .../components/kup-snackbar/kup-snackbar.tsx | 14 +++++- .../styles/kup-snackbar-main.scss | 48 ++++++++++++++----- packages/ketchup/src/snackbar.html | 5 ++ 5 files changed, 67 insertions(+), 13 deletions(-) diff --git a/packages/ketchup/src/assets/snackbar.js b/packages/ketchup/src/assets/snackbar.js index d2e711d914..0efc23265a 100644 --- a/packages/ketchup/src/assets/snackbar.js +++ b/packages/ketchup/src/assets/snackbar.js @@ -2,7 +2,8 @@ const bottomButton = document.getElementById('bottom'); const topButton = document.getElementById('top'); const snackbar = document.getElementById('snackbar'); const props = { - text: 'This is a snackbar demo', + header: 'This is a snackbar title', + text: 'This is a snackbar text', actionButton: { label: 'Action', styling: 'flat' }, closeButton: true, timeout: 2000, diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index 51abc05493..397490d01b 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -3313,6 +3313,11 @@ export namespace Components { * @returns List of props as object, each key will be a prop. */ "getProps": (descriptions?: boolean) => Promise; + /** + * Sets the textual content of the snackbar. + * @default '' + */ + "header": string; /** * Hides the snackbar. */ @@ -7863,6 +7868,11 @@ declare namespace LocalJSX { * @see https://ketchup.smeup.com/ketchup-showcase/#/customization */ "customStyle"?: string; + /** + * Sets the textual content of the snackbar. + * @default '' + */ + "header"?: string; /** * Triggered when action button is clicked. */ diff --git a/packages/ketchup/src/components/kup-snackbar/kup-snackbar.tsx b/packages/ketchup/src/components/kup-snackbar/kup-snackbar.tsx index f4a34aa99b..a747715e1c 100644 --- a/packages/ketchup/src/components/kup-snackbar/kup-snackbar.tsx +++ b/packages/ketchup/src/components/kup-snackbar/kup-snackbar.tsx @@ -68,6 +68,11 @@ export class KupSnackbar { * @default '' */ @Prop() text: string = ''; + /** + * Sets the textual content of the snackbar. + * @default '' + */ + @Prop() header: string = ''; /** * Defaults at null, when set the snackbar will automatically disappear after the specified amount of milliseconds. * @default null @@ -203,7 +208,14 @@ export class KupSnackbar {
-
{this.text}
+
+
+ {this.header} +
+
+ {this.text} +
+
{this.actionButton || this.closeButton ? (
{this.actionButton ? ( diff --git a/packages/ketchup/src/components/kup-snackbar/styles/kup-snackbar-main.scss b/packages/ketchup/src/components/kup-snackbar/styles/kup-snackbar-main.scss index 83cff4b523..858debbbe1 100644 --- a/packages/ketchup/src/components/kup-snackbar/styles/kup-snackbar-main.scss +++ b/packages/ketchup/src/components/kup-snackbar/styles/kup-snackbar-main.scss @@ -1,4 +1,19 @@ :host { + --kup_snackbar_border_left_color: var( + --kup-snackbar-border-left-color, + var(--kup-primary-color-60) + ); + + --kup_snackbar_background_color: var( + --kup-snackbar-background-color, + var(--kup-gray-color-80) + ); + + --kup_snackbar_text_color: var( + --kup-snackbar-text-color, + var(--kup-gray-color-10) + ); + animation: snackbar-show 125ms; bottom: 0; box-sizing: border-box; @@ -29,33 +44,37 @@ .snackbar { align-items: center; - background: var(--kup-navbar-background-color); - border-radius: 5px; - box-shadow: var(--kup-box-shadow); + background-color: var(--kup_snackbar_background_color); color: var(--kup-navbar-color); display: flex; justify-content: space-between; max-width: 672px; min-height: 48px; min-width: 344px; + border-left: 4px solid var(--kup_snackbar_border_left_color); + padding: 0 var(--kup-space-05); + + .snackbar__text__block { + padding: var(--kup-space-05) 0; + color: var(--kup_snackbar_text_color); + } + + &__header { + pointer-events: all; + word-break: break-word; + @include kup-heading-compact-01; + } &__text { - padding: 14px 16px; pointer-events: all; word-break: break-word; + @include kup-body-compact-01; } &__buttons { - --kup-button-primary-color: var(--kup-navbar-color); - --kup-button-primary-color-rgb: var(--kup-navbar-color-rgb); - --kup-button-primary-color-h: var(--kup-navbar-color-h); - --kup-button-primary-color-s: var(--kup-navbar-color-s); - --kup-button-primary-color-l: var(--kup-navbar-color-l); - align-items: center; display: flex; justify-content: flex-end; - margin-right: 8px; pointer-events: all; width: max-content; } @@ -68,6 +87,13 @@ } } +@media (min-width: 768px) { + .snackbar__text__block { + padding: var(--kup-space-05) 0; + min-width: 350px; + } +} + @keyframes snackbar-show { from { transform: scale(0.5); diff --git a/packages/ketchup/src/snackbar.html b/packages/ketchup/src/snackbar.html index 25c1ec3903..d6d4a090ea 100644 --- a/packages/ketchup/src/snackbar.html +++ b/packages/ketchup/src/snackbar.html @@ -18,6 +18,11 @@ +

Snackbar

Bottom Snackbar From e6c08d64855117a3c382373e764eab9b251f3557 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Tue, 27 Feb 2024 19:13:29 +0100 Subject: [PATCH 2/5] Kup-data-table : Redesign and token - First part --- .../src/components/kup-accordion/readme.md | 11 ++- .../styles/kup-combobox-classes.scss | 20 ++++ .../kup-data-table/kup-data-table.tsx | 98 +++++++++---------- .../src/components/kup-data-table/readme.md | 2 +- .../styles/kup-data-table-main.scss | 55 +++++++---- .../styles/kup-data-table-sticky-header.scss | 3 +- .../src/components/kup-snackbar/readme.md | 1 + .../src/components/kup-tab-bar/readme.md | 3 +- .../src/f-components/f-cell/f-cell.scss | 2 +- .../f-components/f-paginator/f-paginator.scss | 19 ++-- .../f-components/f-paginator/f-paginator.tsx | 28 +++--- 11 files changed, 137 insertions(+), 105 deletions(-) diff --git a/packages/ketchup/src/components/kup-accordion/readme.md b/packages/ketchup/src/components/kup-accordion/readme.md index 7b43021632..e7e4e18a7f 100644 --- a/packages/ketchup/src/components/kup-accordion/readme.md +++ b/packages/ketchup/src/components/kup-accordion/readme.md @@ -5,11 +5,12 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | -------------- | --------------------------------------------------------------- | ------------------ | ------- | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Data of the accordion. | `KupAccordionData` | `null` | -| `ripple` | `ripple` | When enabled displays Material's ripple effect on item headers. | `boolean` | `true` | +| Property | Attribute | Description | Type | Default | +| ------------- | -------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | --------------------------- | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Data of the accordion. | `KupAccordionData` | `null` | +| `ripple` | `ripple` | When enabled displays Material's ripple effect on item headers. | `boolean` | `false` | +| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` | ## Events diff --git a/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-classes.scss b/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-classes.scss index 90bb0de1df..91481d5b0f 100644 --- a/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-classes.scss +++ b/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-classes.scss @@ -42,3 +42,23 @@ --kup-textfield-primary-color: var(--kup-warning-color); --kup-textfield-primary-color-rgb: var(--kup-warning-color-rgb); } + +:host(.page-selector), +:host(.rows-selector) { + .f-text-field { + .mdc-text-field { + border-bottom: none !important; + width: max-content !important; + } + .mdc-text-field-container { + flex-direction: row !important; + .mdc-text-field__label-container { + white-space: nowrap; + @include kup-body-compact-01; + } + } + .mdc-text-field-helper-line { + display: none; + } + } +} diff --git a/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx b/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx index 5559887b9a..576c9d3db4 100644 --- a/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx +++ b/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx @@ -651,7 +651,7 @@ export class KupDataTable { /** * Sets the position of the paginator. Available positions: top, bottom or both. */ - @Prop() paginatorPos: PaginatorPos = PaginatorPos.TOP; + @Prop() paginatorPos: PaginatorPos = PaginatorPos.BOTTOM; /** * Sets the possibility to remove the selected column. */ @@ -5668,7 +5668,9 @@ export class KupDataTable { )}
-
+
{paginatorTop}
+
{groupChips}
+
{this.globalFilter ? (
) : null} - {paginatorTop} -
-
{groupChips}
-
+ {this.insertMode !== '' && + this.selectedRows.length > 0 ? ( + { + this.kupSave.emit({ + comp: this, + id: this.rootElement.id, + selectedRows: this.selectedRows, + }); + }} + styling={FButtonStyling.ICON} + title="Save" + wrapperClass="save-button" + > + ) : null} + {this.showDeleteButton && + this.selectedRows.length > 0 ? ( + { + this.#rowsDelete(); + }} + styling={FButtonStyling.ICON} + title="Delete selected rows" + wrapperClass="delete-button" + > + ) : null} + {this.showHistoryButton ? ( + { + this.kupHistory.emit({ + comp: this, + id: this.rootElement.id, + selectedRows: this.selectedRows, + }); + }} + styling={FButtonStyling.ICON} + title="History" + wrapperClass="history-button" + > + ) : null} {this.insertMode !== '' ? ( ) : null} - {this.insertMode !== '' && - this.selectedRows.length > 0 ? ( - { - this.kupSave.emit({ - comp: this, - id: this.rootElement.id, - selectedRows: this.selectedRows, - }); - }} - styling={FButtonStyling.OUTLINED} - title="Save" - wrapperClass="save-button" - > - ) : null} - {this.showDeleteButton && - this.selectedRows.length > 0 ? ( - { - this.#rowsDelete(); - }} - styling={FButtonStyling.OUTLINED} - title="Delete selected rows" - wrapperClass="delete-button" - > - ) : null} - {this.showHistoryButton ? ( - { - this.kupHistory.emit({ - comp: this, - id: this.rootElement.id, - selectedRows: this.selectedRows, - }); - }} - styling={FButtonStyling.OUTLINED} - title="History" - wrapperClass="history-button" - > - ) : null}
diff --git a/packages/ketchup/src/radio.html b/packages/ketchup/src/radio.html index ab1809a903..bc2c2d47ce 100644 --- a/packages/ketchup/src/radio.html +++ b/packages/ketchup/src/radio.html @@ -23,8 +23,9 @@ + }; + + From cb1844d5693de2ff51cba75fd8c48fdf6ce498e0 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Wed, 28 Feb 2024 12:40:19 +0100 Subject: [PATCH 4/5] F-rating : token application --- packages/ketchup/src/f-components/f-rating/f-rating.scss | 5 +++-- packages/ketchup/src/managers/kup-theme/themes.json | 4 ++++ packages/ketchup/src/rating.html | 5 +++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/ketchup/src/f-components/f-rating/f-rating.scss b/packages/ketchup/src/f-components/f-rating/f-rating.scss index ec7b0faf5e..f1b23d53fc 100644 --- a/packages/ketchup/src/f-components/f-rating/f-rating.scss +++ b/packages/ketchup/src/f-components/f-rating/f-rating.scss @@ -1,6 +1,6 @@ .f-rating { - --kup_rating_color: var(--kup-rating-color, orange); - --kup_rating_font_size: var(--kup-rating-font-size, 30px); + --kup_rating_color: var(--kup-rating-color, #ffa000); + --kup_rating_font_size: var(--kup-rating-font-size, 20px); .rating { color: var(--kup_rating_color); @@ -10,6 +10,7 @@ &.disabled { .rating { + opacity: 0.5; cursor: auto; } } diff --git a/packages/ketchup/src/managers/kup-theme/themes.json b/packages/ketchup/src/managers/kup-theme/themes.json index 8da83ebc96..51afe7daa2 100644 --- a/packages/ketchup/src/managers/kup-theme/themes.json +++ b/packages/ketchup/src/managers/kup-theme/themes.json @@ -49,6 +49,7 @@ "--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)", "--kup-info-color": "#2592df", "--kup-success-color": "#24A148", + "--kup-rating-color": "#ffa000", "--kup-warning-color": "#de8906", "--kup-danger-color": "#a6192e", "--kup-spinner-color": "#fddc69", @@ -147,6 +148,7 @@ "--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)", "--kup-info-color": "#2592df", "--kup-success-color": "#24A148", + "--kup-rating-color": "#ffa000", "--kup-warning-color": "#de8906", "--kup-danger-color": "#a6192e", "--kup-spinner-color": "#fddc69", @@ -245,6 +247,7 @@ "--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)", "--kup-info-color": "#2592df", "--kup-success-color": "#42BE65", + "--kup-rating-color": "#ffa000", "--kup-warning-color": "#de8906", "--kup-danger-color": "#a6192e", "--kup-spinner-color": "#fddc69", @@ -343,6 +346,7 @@ "--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)", "--kup-info-color": "#2592df", "--kup-success-color": "#42BE65", + "--kup-rating-color": "#ffa000", "--kup-warning-color": "#de8906", "--kup-danger-color": "#da1e28", "--kup-spinner-color": "#fddc69", diff --git a/packages/ketchup/src/rating.html b/packages/ketchup/src/rating.html index d556aee213..4603326307 100644 --- a/packages/ketchup/src/rating.html +++ b/packages/ketchup/src/rating.html @@ -28,6 +28,11 @@ +
Date: Wed, 28 Feb 2024 15:58:19 +0100 Subject: [PATCH 5/5] f-progress-bar : token application --- .../f-progress-bar/f-progress-bar.scss | 46 ++++++++++--------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss b/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss index aa663658d5..29bd819383 100644 --- a/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss +++ b/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss @@ -1,5 +1,8 @@ .f-progress-bar { - --kup_progressbar_border_radius: var(--kup-progressbar-border-radius, 4px); + --kup_progressbar_border_radius: var( + --kup-progressbar-border-radius, + var(--kup-radius-00) + ); --kup_progressbar_font_family: var( --kup-progressbar-font-family, var(--kup-font-family) @@ -9,25 +12,25 @@ var(--kup-font-size) ); --kup_progressbar_height: var(--kup-progressbar-height, 1.25em); - --kup_progressbar_primary_color: var( - --kup-progressbar-primary-color, - var(--kup-primary-color) + --kup_progressbar_activebar_color: var( + --kup-progressbar-activebar-color, + var(--kup-primary-color-60) ); --kup_progressbar_text_color: var( --kup-progressbar-text-color, - var(--kup-text-color) + var(--kup-gray-color-70) ); --kup_progressbar_text_color_rgb: var( --kup-progressbar-text-color-rgb, - var(--kup-text-color-rgb) + var(--kup-text-color-70-rgb) ); - --kup_progressbar_text_on_primary_color: var( + --kup_progressbar_activebar_text_color: var( --kup-progressbar-text-on-primary-color, - var(--kup-text-on-primary-color) + var(--kup-gray-color-10) ); - --kup_progressbar_track_color: var( - --kup-progressbar-track-color, - var(--kup-disabled-background-color) + --kup_progressbar_track_background_color: var( + --kup-progressbar-track-background-color, + var(--kup-gray-color-10) ); --kup_progressbar_width: var(--kup-progressbar-width, 100%); @@ -36,7 +39,7 @@ width: var(--kup_progressbar_width); &.progress-bar { - background: var(--kup_progressbar_track_color); + background: var(--kup_progressbar_track_background_color); border-radius: var(--kup_progressbar_border_radius); overflow: hidden; position: relative; @@ -44,21 +47,21 @@ &.text-color-on-primary { & .progress-bar-percentage { - color: var(--kup_progressbar_text_on_primary_color); + color: var(--kup_progressbar_activebar_text_color); & span { - color: var(--kup_progressbar_text_on_primary_color); + color: var(--kup_progressbar_activebar_text_color); + @include kup-label-01; } } } } .progress-bar-percentage { - background: var(--kup_progressbar_primary_color); + background: var(--kup_progressbar_activebar_color); border-radius: var(--kup_progressbar_border_radius); box-sizing: content-box; color: var(--kup_progressbar_text_color); height: var(--kup_progressbar_height); - padding: 0.5em 0; text-align: center; transition: width 0.2s ease; @@ -70,13 +73,14 @@ line-height: var(--kup_progressbar_height); position: absolute; width: var(--kup_progressbar_width); + @include kup-label-01; } & .#{$kup-icon} { display: block; height: var(--kup_progressbar_height); &:not(.is-image) { - background-color: var(--kup_progressbar_text_on_primary_color); + background-color: var(--kup_progressbar_activebar_text_color); } img { width: auto; @@ -112,7 +116,7 @@ &.has-value { & .half-circle { - border-color: var(--kup_progressbar_primary_color); + border-color: var(--kup_progressbar_activebar_color); &.left-side { transition: transform 0.2s ease; } @@ -136,7 +140,7 @@ & .half-circle { height: 1em; width: 1em; - border: 0.1em solid var(--kup_progressbar_track_color); + border: 0.1em solid var(--kup_progressbar_track_background_color); border-radius: 50%; clip: rect(0, 0.5em, 1em, 0); left: 0; @@ -166,7 +170,7 @@ object-fit: cover; margin: auto; &:not(.is-image) { - background-color: var(--kup_progressbar_primary_color); + background-color: var(--kup_progressbar_activebar_color); } img { width: auto; @@ -186,7 +190,7 @@ & .shadow { height: 1em; width: 1em; - border: 0.1em solid var(--kup_progressbar_track_color); + border: 0.1em solid var(--kup_progressbar_track_background_color); border-radius: 50%; } }