From 8a5b258f549769080ab70dfd35bb6daac491a08e Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Wed, 14 Feb 2024 16:48:54 +0100 Subject: [PATCH 01/22] kup-radio : Redesign --- packages/ketchup/src/components.d.ts | 50 ++++++++----------- .../src/components/kup-radio/kup-radio.scss | 13 +++++ .../src/components/kup-radio/kup-radio.tsx | 20 +++++++- .../src/components/kup-radio/readme.md | 2 + .../f-radio/f-radio-declarations.ts | 1 + .../src/f-components/f-radio/f-radio.scss | 50 ++++++++++++------- .../src/f-components/f-radio/f-radio.tsx | 24 +++++---- packages/ketchup/src/radio.html | 3 +- 8 files changed, 101 insertions(+), 62 deletions(-) diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index 113c74516a..551a75895b 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -1131,21 +1131,6 @@ export namespace Components { * @returns Value of the component. */ "getValue": () => Promise; - /** - * When set, its content will be shown as a help text below the field. - * @default null - */ - "helper": string; - /** - * When true, the helper will be displayed. - * @default true - */ - "helperEnabled": boolean; - /** - * When set, the helper will be shown only when the field is focused. - * @default false - */ - "helperWhenFocused": boolean; /** * When set, the text-field will show this icon. * @default null @@ -3190,6 +3175,16 @@ export namespace Components { * @returns List of props as object, each key will be a prop. */ "getProps": (descriptions?: boolean) => Promise; + /** + * Defaults at false. When set to true, the component is horizontal. + * @default false + */ + "horizontal": boolean; + /** + * When set, its content will be shown as a label. + * @default null + */ + "label": string; /** * Defaults at false. When set to true, the label will be on the left of the component. * @default false @@ -6032,21 +6027,6 @@ declare namespace LocalJSX { * @default ''' */ "error"?: string; - /** - * When set, its content will be shown as a help text below the field. - * @default null - */ - "helper"?: string; - /** - * When true, the helper will be displayed. - * @default true - */ - "helperEnabled"?: boolean; - /** - * When set, the helper will be shown only when the field is focused. - * @default false - */ - "helperWhenFocused"?: boolean; /** * When set, the text-field will show this icon. * @default null @@ -7702,6 +7682,16 @@ declare namespace LocalJSX { * @default false */ "disabled"?: boolean; + /** + * Defaults at false. When set to true, the component is horizontal. + * @default false + */ + "horizontal"?: boolean; + /** + * When set, its content will be shown as a label. + * @default null + */ + "label"?: string; /** * Defaults at false. When set to true, the label will be on the left of the component. * @default false diff --git a/packages/ketchup/src/components/kup-radio/kup-radio.scss b/packages/ketchup/src/components/kup-radio/kup-radio.scss index a6dd9c0e9d..3d22d9b171 100644 --- a/packages/ketchup/src/components/kup-radio/kup-radio.scss +++ b/packages/ketchup/src/components/kup-radio/kup-radio.scss @@ -10,4 +10,17 @@ :host { display: block; + --kup_radio_group_label_color: var( + --kup-radio-group-label-color, + var(--kup-gray-color-70) + ); +} + +.kup-radio-wrapper { + display: grid; + gap: var(--kup-space-03); + .kup-radio-group-label { + color: var(--kup_radio_group_label_color); + @include kup-label-01; + } } diff --git a/packages/ketchup/src/components/kup-radio/kup-radio.tsx b/packages/ketchup/src/components/kup-radio/kup-radio.tsx index 00c61586cf..1ceb03bb13 100644 --- a/packages/ketchup/src/components/kup-radio/kup-radio.tsx +++ b/packages/ketchup/src/components/kup-radio/kup-radio.tsx @@ -77,6 +77,16 @@ export class KupRadio { * @default false */ @Prop() disabled: boolean = false; + /** + * Defaults at false. When set to true, the component is horizontal. + * @default false + */ + @Prop() horizontal: boolean = false; + /** + * When set, its content will be shown as a label. + * @default null + */ + @Prop() label: string = ''; /** * Defaults at false. When set to true, the label will be on the left of the component. * @default false @@ -224,6 +234,9 @@ export class KupRadio { info: this.rootElement.classList.contains('kup-info') ? true : false, + horizontal: this.rootElement.classList.contains('kup-horizontal') + ? true + : false, leadingLabel: this.leadingLabel, secondary: this.rootElement.classList.contains('kup-secondary') ? true @@ -246,7 +259,12 @@ export class KupRadio { this.rootElement as KupComponent )} -
+
+ {this.label && ( + + )}
diff --git a/packages/ketchup/src/components/kup-radio/readme.md b/packages/ketchup/src/components/kup-radio/readme.md index ab0a4ad0ab..ce73d192fd 100644 --- a/packages/ketchup/src/components/kup-radio/readme.md +++ b/packages/ketchup/src/components/kup-radio/readme.md @@ -11,6 +11,8 @@ | `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | | `data` | -- | List of elements. | `FRadioData[]` | `null` | | `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | +| `isHorizontal` | `is-horizontal` | Defaults at false. When set to true, the component is horizontal. | `boolean` | `false` | +| `label` | `label` | When set, its content will be shown as a label. | `string` | `''` | | `leadingLabel` | `leading-label` | Defaults at false. When set to true, the label will be on the left of the component. | `boolean` | `false` | diff --git a/packages/ketchup/src/f-components/f-radio/f-radio-declarations.ts b/packages/ketchup/src/f-components/f-radio/f-radio-declarations.ts index 072d4b57c4..84a0b4ef00 100644 --- a/packages/ketchup/src/f-components/f-radio/f-radio-declarations.ts +++ b/packages/ketchup/src/f-components/f-radio/f-radio-declarations.ts @@ -11,6 +11,7 @@ export interface FRadioProps extends FComponent { onBlur?: (event: FocusEvent) => void; onChange?: (i: number, event: Event) => void; onFocus?: (event: FocusEvent) => void; + horizontal?: boolean; } /** * The object of a single radio. diff --git a/packages/ketchup/src/f-components/f-radio/f-radio.scss b/packages/ketchup/src/f-components/f-radio/f-radio.scss index a88d40689d..bd99920a3a 100644 --- a/packages/ketchup/src/f-components/f-radio/f-radio.scss +++ b/packages/ketchup/src/f-components/f-radio/f-radio.scss @@ -4,17 +4,24 @@ --kup_radio_font_weight: var(--kup-radio-font-weight, 400); --kup_radio_outer_circle_color: var( --kup-radio-outer-circle-color, - rgba(var(--kup-text-color-rgb), 0.5) + var(--kup-gray-color-100) + ); + --kup_radio_focus_color: var( + --kup-radio-focus-color, + var(--kup-primary-color-60) ); --kup_radio_primary_color: var( --kup-radio-primary-color, - var(--kup-primary-color) + var(--kup-gray-color-100) ); --kup_radio_primary_color_rgb: var( --kup-radio-primary-color-rgb, - var(--kup-primary-color-rgb) + var(--kup-gray-color-100-rgb) + ); + --kup_radio_text_color: var( + --kup-radio-text-color, + var(--kup-gray-color-100) ); - --kup_radio_text_color: var(--kup-radio-text-color, var(--kup-text-color)); font-family: var(--kup_radio_font_family); font-size: var(--kup_radio_font_size); @@ -23,7 +30,6 @@ -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 0.875em; - line-height: 2em; font-weight: var(--kup_radio_font_weight); letter-spacing: 0.0178571429em; display: inline-flex; @@ -32,11 +38,9 @@ label { color: var(--kup_radio_text_color); - margin-left: 0px; - margin-right: auto; - padding-left: 4px; - padding-right: 0px; + padding-left: var(--kup-space-03); order: 0; + @include kup-body-compact-01; } &.form-field--align-end { @@ -51,6 +55,8 @@ } &.radio-wrapper { + display: grid; + gap: var(--kup-space-03); &.radio-wrapper--grid { display: grid; grid-gap: 1em; @@ -59,18 +65,19 @@ .radio { border-radius: 50%; - padding: 10px; + // padding: 10px; position: relative; flex: 0 0 auto; box-sizing: content-box; - width: 20px; - height: 20px; + width: 15px; + height: 15px; cursor: pointer; will-change: opacity, transform, border-color, color; will-change: transform, opacity; + border: 1px solid transparent; &:hover { - background-color: rgba(var(--kup_radio_primary_color_rgb), 0.125); + border: 1px solid var(--kup_radio_focus_color); } .radio__native-control { @@ -83,16 +90,16 @@ top: 0px; right: 0px; left: 0px; - width: 40px; - height: 40px; + width: 15px; + height: 15px; } .radio__background { display: inline-block; position: relative; box-sizing: border-box; - width: 20px; - height: 20px; + width: 15px; + height: 15px; transition: opacity 120ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 120ms cubic-bezier(0, 0, 0.2, 1) 0ms; @@ -104,7 +111,7 @@ box-sizing: border-box; width: 100%; height: 100%; - border-width: 2px; + border-width: 1px; border-style: solid; border-radius: 50%; transition: border-color 120ms cubic-bezier(0.4, 0, 0.6, 1) 0ms; @@ -118,7 +125,7 @@ width: 100%; height: 100%; transform: scale(0, 0); - border-width: 10px; + border-width: 7.5px; border-style: solid; border-radius: 50%; transition: transform 120ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, @@ -157,6 +164,11 @@ } } + &.#{$kup-class-horizontal} { + display: flex; + gap: var(--kup-space-05); + } + &.#{$kup-class-danger} { --kup-radio-primary-color: var(--kup-danger-color); --kup-radio-primary-color-rgb: var(--kup-danger-color-rgb); diff --git a/packages/ketchup/src/f-components/f-radio/f-radio.tsx b/packages/ketchup/src/f-components/f-radio/f-radio.tsx index 6b7e629ef3..760314b980 100644 --- a/packages/ketchup/src/f-components/f-radio/f-radio.tsx +++ b/packages/ketchup/src/f-components/f-radio/f-radio.tsx @@ -17,12 +17,13 @@ export const FRadio: FunctionalComponent = ( const classObj: GenericObject = { radio: true, 'radio--checked': data.checked ? true : false, - 'radio--disabled': props.disabled ? true : false, + // 'radio--disabled': props.disabled ? true : false, }; radioList.push(
@@ -68,14 +69,15 @@ export const FRadio: FunctionalComponent = ( return (
diff --git a/packages/ketchup/src/radio.html b/packages/ketchup/src/radio.html index 8c381c40d6..17afbc6f86 100644 --- a/packages/ketchup/src/radio.html +++ b/packages/ketchup/src/radio.html @@ -20,7 +20,8 @@ + > + From 8d45d80a368a25a140327c9c560535645390ae06 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Wed, 14 Feb 2024 16:49:26 +0100 Subject: [PATCH 02/22] kup-list & kup-combobox : fixes --- .../components/kup-combobox/kup-combobox.tsx | 16 ---------- .../src/components/kup-combobox/readme.md | 31 ++++++++++++------- .../kup-list/styles/kup-list-main.scss | 4 ++- 3 files changed, 22 insertions(+), 29 deletions(-) diff --git a/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx b/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx index e8bc295477..acc7851258 100644 --- a/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx +++ b/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx @@ -88,21 +88,6 @@ export class KupCombobox { * @default ''' */ @Prop() error: string = ''; - /** - * When set, its content will be shown as a help text below the field. - * @default null - */ - @Prop() helper: string = null; - /** - * When true, the helper will be displayed. - * @default true - */ - @Prop() helperEnabled: boolean = true; - /** - * When set, the helper will be shown only when the field is focused. - * @default false - */ - @Prop() helperWhenFocused: boolean = false; /** * When set, the text-field will show this icon. * @default null @@ -571,7 +556,6 @@ export class KupCombobox { : false, disabled: this.disabled, error: this.error, - helper: this.helper, icon: this.icon, info: this.rootElement.classList.contains('kup-info') ? true diff --git a/packages/ketchup/src/components/kup-combobox/readme.md b/packages/ketchup/src/components/kup-combobox/readme.md index 51dc70973c..a8186607d6 100644 --- a/packages/ketchup/src/components/kup-combobox/readme.md +++ b/packages/ketchup/src/components/kup-combobox/readme.md @@ -5,18 +5,25 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | --------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------ | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Props of the sub-components (date input text field). | `Object` | `undefined` | -| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | -| `displayMode` | `display-mode` | Sets how to show the selected item value. Suported values: "code", "description", "both". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | -| `initialValue` | `initial-value` | Sets the initial value of the component | `string` | `''` | -| `isSelect` | `is-select` | Lets the combobox behave as a select element. | `boolean` | `false` | -| `label` | `label` | When set, its content will be shown as a label. | `string` | `null` | -| `leadingLabel` | `leading-label` | When set to true, the label will be on the left of the component. | `boolean` | `false` | -| `selectMode` | `select-mode` | Sets how to return the selected item value. Suported values: "code", "description", "both". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.CODE` | -| `showDropDownIcon` | `show-drop-down-icon` | When true shows the drop-down icon, for open list. | `boolean` | `true` | +| Property | Attribute | Description | Type | Default | +| ------------------ | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------ | +| `alert` | `alert` | Set alert message | `string` | `''` | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Props of the sub-components (date input text field). | `Object` | `undefined` | +| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | +| `displayMode` | `display-mode` | Sets how to show the selected item value. Suported values: "code", "description", "both". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | +| `error` | `error` | Set error message | `string` | `''` | +| `icon` | `icon` | When set, the text-field will show this icon. | `string` | `null` | +| `initialValue` | `initial-value` | Sets the initial value of the component | `string` | `''` | +| `isClearable` | `is-clearable` | Enables a clear trailing icon. | `boolean` | `false` | +| `isSelect` | `is-select` | Lets the combobox behave as a select element. | `boolean` | `false` | +| `label` | `label` | When set, its content will be shown as a label. | `string` | `null` | +| `leadingLabel` | `leading-label` | When set to true, the label will be on the left of the component. | `boolean` | `false` | +| `readOnly` | `read-only` | Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. | `boolean` | `false` | +| `selectMode` | `select-mode` | Sets how to return the selected item value. Suported values: "code", "description", "both". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.CODE` | +| `showDropDownIcon` | `show-drop-down-icon` | When true shows the drop-down icon, for open list. | `boolean` | `true` | +| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` | +| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | ## Events diff --git a/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss b/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss index 8924439e51..9cf1613603 100644 --- a/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss +++ b/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss @@ -16,6 +16,7 @@ */ :host { + --kup_box_shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.3); --kup_list_background: var(--kup-list-background, var(--kup-gray-color-10)); --kup_list_background_hover: var( --kup-list-background-hover, @@ -36,6 +37,7 @@ --kup-list-item-padding, var(--kup-space-05) ); + --kup_list_box_shadow: var(--kup-box-shadow, var(--kup_box_shadow)); --kup_list_item_padding_right: var(--kup-list-item-padding, 0.75em); --kup_list_max_height_as_menu: var(--kup-list-max-height-as-menu, 33vh); --kup_list_primary_color: var( @@ -218,7 +220,7 @@ .kup-menu { animation: fade-in 0.25s ease-out; background-color: var(--kup_list_background); - box-shadow: var(--kup-box-shadow); // box shadow to be fixed + box-shadow: var(--kup_list_box_shadow); // box shadow to be fixed border: 1px solid var(--kup_list_focus_color); color: var(--kup-text-color); display: none; From 0fbf92d28e0d1a70aec60857e5f9c59da2662968 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Wed, 14 Feb 2024 16:53:01 +0100 Subject: [PATCH 03/22] Code cleaning --- .../ketchup/src/components/kup-list/styles/kup-list-main.scss | 2 +- packages/ketchup/src/f-components/f-radio/f-radio.scss | 1 - packages/ketchup/src/f-components/f-radio/f-radio.tsx | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss b/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss index 9cf1613603..4c2e36f62f 100644 --- a/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss +++ b/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss @@ -220,7 +220,7 @@ .kup-menu { animation: fade-in 0.25s ease-out; background-color: var(--kup_list_background); - box-shadow: var(--kup_list_box_shadow); // box shadow to be fixed + box-shadow: var(--kup_list_box_shadow); border: 1px solid var(--kup_list_focus_color); color: var(--kup-text-color); display: none; diff --git a/packages/ketchup/src/f-components/f-radio/f-radio.scss b/packages/ketchup/src/f-components/f-radio/f-radio.scss index bd99920a3a..92bdf9606d 100644 --- a/packages/ketchup/src/f-components/f-radio/f-radio.scss +++ b/packages/ketchup/src/f-components/f-radio/f-radio.scss @@ -65,7 +65,6 @@ .radio { border-radius: 50%; - // padding: 10px; position: relative; flex: 0 0 auto; box-sizing: content-box; diff --git a/packages/ketchup/src/f-components/f-radio/f-radio.tsx b/packages/ketchup/src/f-components/f-radio/f-radio.tsx index 760314b980..7b82190e5c 100644 --- a/packages/ketchup/src/f-components/f-radio/f-radio.tsx +++ b/packages/ketchup/src/f-components/f-radio/f-radio.tsx @@ -17,7 +17,7 @@ export const FRadio: FunctionalComponent = ( const classObj: GenericObject = { radio: true, 'radio--checked': data.checked ? true : false, - // 'radio--disabled': props.disabled ? true : false, + 'radio--disabled': props.disabled ? true : false, }; radioList.push(
Date: Wed, 14 Feb 2024 17:10:33 +0100 Subject: [PATCH 04/22] f-radio : disabled token --- packages/ketchup/src/f-components/f-radio/f-radio.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/ketchup/src/f-components/f-radio/f-radio.scss b/packages/ketchup/src/f-components/f-radio/f-radio.scss index 92bdf9606d..25ba128405 100644 --- a/packages/ketchup/src/f-components/f-radio/f-radio.scss +++ b/packages/ketchup/src/f-components/f-radio/f-radio.scss @@ -146,9 +146,12 @@ } &.radio--disabled { + --kup_radio_outer_circle_color: var(--kup-gray-color-30); + --kup_radio_text_color: var(--kup-gray-color-30); pointer-events: none; + label { + color: var(--kup_radio_text_color); pointer-events: none; } From 0584cc58b70d09d0ce5311cf3ab6dc14031cfae0 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Fri, 16 Feb 2024 10:38:35 +0100 Subject: [PATCH 05/22] Kup-list : fixes --- .../src/components/kup-list/styles/kup-list-main.scss | 6 ++++-- packages/ketchup/src/components/kup-radio/readme.md | 2 +- packages/ketchup/src/style/fonts.scss | 1 + 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss b/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss index 4c2e36f62f..3953f982b5 100644 --- a/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss +++ b/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss @@ -16,7 +16,6 @@ */ :host { - --kup_box_shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.3); --kup_list_background: var(--kup-list-background, var(--kup-gray-color-10)); --kup_list_background_hover: var( --kup-list-background-hover, @@ -37,7 +36,10 @@ --kup-list-item-padding, var(--kup-space-05) ); - --kup_list_box_shadow: var(--kup-box-shadow, var(--kup_box_shadow)); + --kup_list_box_shadow: var( + --kup-box-shadow, + 0px 3px 6px 0 rgba(0, 0, 0, 0.3) + ); --kup_list_item_padding_right: var(--kup-list-item-padding, 0.75em); --kup_list_max_height_as_menu: var(--kup-list-max-height-as-menu, 33vh); --kup_list_primary_color: var( diff --git a/packages/ketchup/src/components/kup-radio/readme.md b/packages/ketchup/src/components/kup-radio/readme.md index ce73d192fd..fb3f30a9b2 100644 --- a/packages/ketchup/src/components/kup-radio/readme.md +++ b/packages/ketchup/src/components/kup-radio/readme.md @@ -11,7 +11,7 @@ | `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | | `data` | -- | List of elements. | `FRadioData[]` | `null` | | `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | -| `isHorizontal` | `is-horizontal` | Defaults at false. When set to true, the component is horizontal. | `boolean` | `false` | +| `horizontal` | `horizontal` | Defaults at false. When set to true, the component is horizontal. | `boolean` | `false` | | `label` | `label` | When set, its content will be shown as a label. | `string` | `''` | | `leadingLabel` | `leading-label` | Defaults at false. When set to true, the label will be on the left of the component. | `boolean` | `false` | diff --git a/packages/ketchup/src/style/fonts.scss b/packages/ketchup/src/style/fonts.scss index 13d28cceb8..197fb1d691 100644 --- a/packages/ketchup/src/style/fonts.scss +++ b/packages/ketchup/src/style/fonts.scss @@ -1,4 +1,5 @@ // New mixins for font sizes. + @mixin kup-body-compact-01 { font-family: var(--kup-font-family); font-size: 14px; From 2641eed3bbb8bda4e0ccf2af454db5da1e8dc605 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Fri, 16 Feb 2024 10:40:09 +0100 Subject: [PATCH 06/22] kup-date-picker: redesign --- .../built-in/kup-card-built-in-1.scss | 58 ++++++++++++++----- packages/ketchup/src/date-picker.html | 16 +++-- packages/ketchup/src/design-system.html | 5 -- .../src/managers/kup-theme/themes.json | 4 +- 4 files changed, 53 insertions(+), 30 deletions(-) diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss index 9a5978720d..e86ee0c168 100644 --- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss +++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss @@ -1,6 +1,23 @@ .built-in-layout-1 { - background-color: var(--kup-background-color); - border-radius: 4px; + --kup_card_l1_color: var(--kup-color-secondary, var(--kup-gray-color-100)); + --kup_card_background: var( + --kup-card-background-color, + var(--kup-gray-color-10) + ); + --kup_card_focus_color: var( + --kup-card-focus-color, + var(--kup-primary-color-50) + ); + --kup_card_hover_color: var( + --kup-card-hover-color, + var(--kup-primary-color-30) + ); + --kup_card_box_shadow: var( + --kup-box-shadow, + 0px 3px 6px 0 rgba(0, 0, 0, 0.3) + ); + background-color: var(--kup_card_background); + border-radius: var(--kup-radius-00); box-sizing: border-box; box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6); @@ -32,22 +49,28 @@ width: 100%; } - .prev-page { - margin-left: auto; - } - .change-view-button { margin: auto; width: 12em; text-align: center; + button { + &:hover { + background-color: var(--kup-color-gray-30); + } + span { + @include kup-heading-compact-01; + color: var(--kup_card_l1_color); + } + } } #change-view-button button { text-transform: capitalize; } - .next-page { - margin-right: auto; + .next-page .icon-button .f-image .f-image__icon, + .prev-page .icon-button .f-image .f-image__icon { + background-color: var(--kup_card_l1_color) !important; } .calendar { @@ -55,35 +78,40 @@ width: 100%; } - thead { - border-bottom: 1px solid var(--kup-border-color); + tbody:before { + content: '@'; + display: block; + line-height: var(--kup-space-05); + text-indent: -99999px; } .item-text { - color: rgba(var(--kup-text-color-rgb), 0.5); + color: rgba(var(--kup_card_l1_color)); + @include kup-body-compact-01; } .item { text-align: center; &:not(.selected) .item-number:hover { - background-color: var(--kup-hover-background-color); + background-color: var(--kup_card_hover_color); } &.selected .item-number, &.selected .item-number:hover { - background-color: rgba(var(--kup-primary-color-rgb), 0.175); + background-color: var(--kup_card_focus_color); + color: var(--kup-white); } } .item-number { - border-radius: 50%; cursor: pointer; display: flex; justify-content: center; - line-height: 2.5em; margin: auto; width: 2.5em; transition: background-color 0.25s; text-transform: capitalize; + @include kup-body-compact-01; + line-height: 2.5em; } } diff --git a/packages/ketchup/src/date-picker.html b/packages/ketchup/src/date-picker.html index 1ee2227347..5684500bb7 100644 --- a/packages/ketchup/src/date-picker.html +++ b/packages/ketchup/src/date-picker.html @@ -15,11 +15,6 @@ type="text/css" /> - -

Form

Form with layout

@@ -31,5 +36,11 @@

Form with autocomplete

> + From 20e95fd20507f3e1bb9d28a1725340c20648ddfa Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Mon, 19 Feb 2024 17:26:12 +0100 Subject: [PATCH 08/22] General advance pt1 --- packages/ketchup/src/autocomplete.html | 5 + packages/ketchup/src/badge.html | 5 + packages/ketchup/src/button.html | 8 + packages/ketchup/src/checkbox.html | 5 + packages/ketchup/src/chip.html | 5 + packages/ketchup/src/combobox.html | 5 + packages/ketchup/src/components.d.ts | 94 ++++- .../kup-autocomplete/kup-autocomplete.tsx | 83 ++++- .../src/components/kup-autocomplete/readme.md | 35 +- .../built-in/kup-card-built-in-1.scss | 2 +- .../src/components/kup-form/kup-form.tsx | 4 +- .../ketchup/src/components/kup-form/readme.md | 16 +- packages/ketchup/src/dropdown-button.html | 5 + .../src/f-components/f-button/f-button.scss | 233 +++++++------ .../src/f-components/f-button/f-button.tsx | 12 +- .../src/f-components/f-switch/f-switch.scss | 33 +- .../f-text-field/f-text-field.scss | 13 +- packages/ketchup/src/form.html | 3 +- .../src/managers/kup-theme/themes.json | 324 +++++++++++++++++- packages/ketchup/src/radio.html | 6 +- packages/ketchup/src/switch.html | 5 + packages/ketchup/src/text-field.html | 5 + packages/ketchup/src/time-picker.html | 5 + 23 files changed, 727 insertions(+), 184 deletions(-) diff --git a/packages/ketchup/src/autocomplete.html b/packages/ketchup/src/autocomplete.html index 317fe38c9d..7a2e877a5c 100644 --- a/packages/ketchup/src/autocomplete.html +++ b/packages/ketchup/src/autocomplete.html @@ -14,6 +14,11 @@ +
diff --git a/packages/ketchup/src/badge.html b/packages/ketchup/src/badge.html index 1c9f51a084..241d49f33e 100644 --- a/packages/ketchup/src/badge.html +++ b/packages/ketchup/src/badge.html @@ -48,6 +48,11 @@ +

Badge

Status:

diff --git a/packages/ketchup/src/button.html b/packages/ketchup/src/button.html index 5ad148eea7..c83c1f5b7e 100644 --- a/packages/ketchup/src/button.html +++ b/packages/ketchup/src/button.html @@ -36,6 +36,11 @@ +

Material Buttons (widget)

empty: @@ -210,6 +215,9 @@

All variants:

active="true" > +
+ +

The Checkbox

diff --git a/packages/ketchup/src/chip.html b/packages/ketchup/src/chip.html index c9a5530256..377aff8e86 100644 --- a/packages/ketchup/src/chip.html +++ b/packages/ketchup/src/chip.html @@ -40,6 +40,11 @@ +

Chip

diff --git a/packages/ketchup/src/combobox.html b/packages/ketchup/src/combobox.html index e5c66be41b..609cf87740 100644 --- a/packages/ketchup/src/combobox.html +++ b/packages/ketchup/src/combobox.html @@ -20,6 +20,11 @@ +

Material Combobox (widget)

Promise; } interface KupAutocomplete { + /** + * Set alert message + * @default ''' + */ + "alert": string; /** * When true, the autocomplete fires the change event even when the value typed isn't included in the autocomplete list. * @default false @@ -177,6 +182,11 @@ export namespace Components { * @default ItemsDisplayMode.DESCRIPTION */ "displayMode": ItemsDisplayMode; + /** + * Set error message + * @default ''' + */ + "error": string; /** * Used to retrieve component's props values. * @param descriptions - When provided and true, the result will be the list of props with their description. @@ -188,6 +198,11 @@ export namespace Components { * @returns Value of the component. */ "getValue": () => Promise; + /** + * When set, the text-field will show this icon. + * @default null + */ + "icon": string; /** * Sets the initial value of the component. * @default "" @@ -198,11 +213,31 @@ export namespace Components { * @default 300 */ "inputDelay": number; + /** + * Enables a clear trailing icon. + * @default false + */ + "isClearable": boolean; + /** + * When set, its content will be shown as a label. + * @default null + */ + "label": string; + /** + * When set to true, the label will be on the left of the component. + * @default false + */ + "leadingLabel": boolean; /** * The minimum number of chars to trigger the autocomplete * @default 1 */ "minimumChars": number; + /** + * Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. + * @default false + */ + "readOnly": boolean; /** * This method is used to trigger a new render of the component. */ @@ -236,6 +271,16 @@ export namespace Components { * @default true */ "showDropDownIcon": boolean; + /** + * Sets the type of the button + * @default KupComponentSizing.MEDIUM + */ + "sizing": KupComponentSizing; + /** + * When set, the icon will be shown after the text. + * @default false + */ + "trailingIcon": boolean; } interface KupBadge { /** @@ -2064,7 +2109,7 @@ export namespace Components { "hiddenSubmitButton": boolean; /** * Sets the label placement for 'all' fields in form - * @default KupFormLabelPlacement.LEFT + * @default KupFormLabelPlacement.TOP */ "labelPlacement": KupFormLabelPlacement; /** @@ -5184,6 +5229,11 @@ declare namespace LocalJSX { "ripple"?: boolean; } interface KupAutocomplete { + /** + * Set alert message + * @default ''' + */ + "alert"?: string; /** * When true, the autocomplete fires the change event even when the value typed isn't included in the autocomplete list. * @default false @@ -5210,6 +5260,16 @@ declare namespace LocalJSX { * @default ItemsDisplayMode.DESCRIPTION */ "displayMode"?: ItemsDisplayMode; + /** + * Set error message + * @default ''' + */ + "error"?: string; + /** + * When set, the text-field will show this icon. + * @default null + */ + "icon"?: string; /** * Sets the initial value of the component. * @default "" @@ -5220,6 +5280,21 @@ declare namespace LocalJSX { * @default 300 */ "inputDelay"?: number; + /** + * Enables a clear trailing icon. + * @default false + */ + "isClearable"?: boolean; + /** + * When set, its content will be shown as a label. + * @default null + */ + "label"?: string; + /** + * When set to true, the label will be on the left of the component. + * @default false + */ + "leadingLabel"?: boolean; /** * The minimum number of chars to trigger the autocomplete * @default 1 @@ -5232,6 +5307,11 @@ declare namespace LocalJSX { "onKup-autocomplete-iconclick"?: (event: KupAutocompleteCustomEvent) => void; "onKup-autocomplete-input"?: (event: KupAutocompleteCustomEvent) => void; "onKup-autocomplete-itemclick"?: (event: KupAutocompleteCustomEvent) => void; + /** + * Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. + * @default false + */ + "readOnly"?: boolean; /** * Sets how to return the selected item value. Suported values: "code", "description", "both". * @default ItemsDisplayMode.CODE @@ -5247,6 +5327,16 @@ declare namespace LocalJSX { * @default true */ "showDropDownIcon"?: boolean; + /** + * Sets the type of the button + * @default KupComponentSizing.MEDIUM + */ + "sizing"?: KupComponentSizing; + /** + * When set, the icon will be shown after the text. + * @default false + */ + "trailingIcon"?: boolean; } interface KupBadge { /** @@ -6782,7 +6872,7 @@ declare namespace LocalJSX { "hiddenSubmitButton"?: boolean; /** * Sets the label placement for 'all' fields in form - * @default KupFormLabelPlacement.LEFT + * @default KupFormLabelPlacement.TOP */ "labelPlacement"?: KupFormLabelPlacement; /** diff --git a/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx b/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx index 1a39557500..7b4410e46a 100644 --- a/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx +++ b/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx @@ -17,7 +17,11 @@ import { } from '../../managers/kup-manager/kup-manager'; import { FTextField } from '../../f-components/f-text-field/f-text-field'; import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc'; -import { GenericObject, KupComponent } from '../../types/GenericTypes'; +import { + GenericObject, + KupComponent, + KupComponentSizing, +} from '../../types/GenericTypes'; import { KupAutocompleteEventPayload, KupAutocompleteIconClickEventPayload, @@ -34,6 +38,7 @@ import { getProps, setProps } from '../../utils/utils'; import { componentWrapperId } from '../../variables/GenericVariables'; import { KupManagerClickCb } from '../../managers/kup-manager/kup-manager-declarations'; import { KupDynamicPositionPlacement } from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations'; +import { FTextFieldProps } from '../../f-components/f-text-field/f-text-field-declarations'; @Component({ tag: 'kup-autocomplete', @@ -57,6 +62,11 @@ export class KupAutocomplete { /* P r o p s */ /*-------------------------------------------------*/ + /** + * Set alert message + * @default ''' + */ + @Prop() alert: string = ''; /** * When true, the autocomplete fires the change event even when the value typed isn't included in the autocomplete list. * @default false @@ -83,21 +93,52 @@ export class KupAutocomplete { * @default ItemsDisplayMode.DESCRIPTION */ @Prop() displayMode: ItemsDisplayMode = ItemsDisplayMode.DESCRIPTION; + /** + * Set error message + * @default ''' + */ + @Prop() error: string = ''; + /** + * When set, the text-field will show this icon. + * @default null + */ + @Prop() icon: string = null; /** * Sets the initial value of the component. * @default "" */ @Prop() initialValue: string = ''; + /** + * Enables a clear trailing icon. + * @default false + */ + @Prop() isClearable: boolean = false; /** * Input event emission delay in milliseconds. * @default 300 */ @Prop() inputDelay: number = 300; + /** + * When set, its content will be shown as a label. + * @default null + */ + @Prop() label: string = null; + /** + * When set to true, the label will be on the left of the component. + * @default false + */ + @Prop() leadingLabel: boolean = false; + /** * The minimum number of chars to trigger the autocomplete * @default 1 */ @Prop() minimumChars: number = 1; + /** + * Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. + * @default false + */ + @Prop() readOnly: boolean = false; /** * Sets how to return the selected item value. Suported values: "code", "description", "both". * @default ItemsDisplayMode.CODE @@ -113,6 +154,16 @@ export class KupAutocomplete { * @default true */ @Prop() showDropDownIcon: boolean = true; + /** + * Sets the type of the button + * @default KupComponentSizing.MEDIUM + */ + @Prop() sizing: KupComponentSizing = KupComponentSizing.MEDIUM; + /** + * When set, the icon will be shown after the text. + * @default false + */ + @Prop() trailingIcon: boolean = false; /*-------------------------------------------------*/ /* I n t e r n a l V a r i a b l e s */ @@ -393,6 +444,9 @@ export class KupAutocomplete { this.#closeList(); return false; } + const hasError = this.error.trim().length > 0; + const hasAlert = this.alert.trim().length > 0; + const topOffset = hasError || hasAlert ? -20 : 0; this.#textfieldWrapper.classList.add('toggled'); this.#listEl.menuVisible = true; const elStyle = this.#listEl.style; @@ -407,7 +461,7 @@ export class KupAutocomplete { this.#kupManager.dynamicPosition.register( this.#listEl, this.#textfieldWrapper, - 0, + topOffset, KupDynamicPositionPlacement.AUTO, true ); @@ -520,6 +574,30 @@ export class KupAutocomplete { } render() { + const props: FTextFieldProps = { + alert: this.alert, + danger: this.rootElement.classList.contains('kup-danger') + ? true + : false, + disabled: this.disabled, + error: this.error, + icon: this.icon, + info: this.rootElement.classList.contains('kup-info') + ? true + : false, + isClearable: this.isClearable, + label: this.label, + leadingLabel: this.leadingLabel, + readOnly: this.readOnly, + sizing: this.sizing, + success: this.rootElement.classList.contains('kup-success') + ? true + : false, + value: this.value, + warning: this.rootElement.classList.contains('kup-warning') + ? true + : false, + }; const fullHeight = this.rootElement.classList.contains('kup-full-height'); const fullWidth = this.rootElement.classList.contains('kup-full-width'); @@ -538,6 +616,7 @@ export class KupAutocomplete {