From 1498e7af16f88dec740aeebd14b5f93bfc5292b7 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Tue, 6 Feb 2024 17:45:25 +0100 Subject: [PATCH 01/10] kup-chip : add sizing and general fixes --- packages/ketchup/src/chip.html | 8 +++- packages/ketchup/src/components.d.ts | 14 +++++- .../src/components/kup-chip/kup-chip.tsx | 7 +++ .../f-chip/f-chip-declarations.ts | 13 ++++++ .../src/f-components/f-chip/f-chip.scss | 46 ++++++++++++++----- .../src/f-components/f-chip/f-chip.tsx | 1 + 6 files changed, 73 insertions(+), 16 deletions(-) diff --git a/packages/ketchup/src/chip.html b/packages/ketchup/src/chip.html index 84d949c4f6..0ac50ae1a3 100644 --- a/packages/ketchup/src/chip.html +++ b/packages/ketchup/src/chip.html @@ -36,7 +36,7 @@ - + @@ -47,7 +47,6 @@ chipList.data = [ { checked: false, - icon: 'favorite', id: 'favorites', value: 'Favorites', }, @@ -57,6 +56,11 @@ id: 'Set alarm clock', value: 'Label 2', }, + { + checked: false, + id: 'favorites2', + value: 'Favorites', + }, ]; document.addEventListener("kup-chip-change", (e) => {console.log(e)}); diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index cc5990ed00..dc5e4234d7 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -22,7 +22,7 @@ import { FCellPadding } from "./f-components/f-cell/f-cell-declarations"; import { ChartAspect, ChartAxis, ChartOfflineMode, ChartSerie, ChartTitle, ChartType, KupChartClickEvent, KupChartSort, KupChartTrendlines } from "./components/kup-chart/kup-chart-declarations"; import { KupCheckboxEventPayload } from "./components/kup-checkbox/kup-checkbox-declarations"; import { KupChipChangeEventPayload, KupChipEventPayload, KupChipNode } from "./components/kup-chip/kup-chip-declarations"; -import { FChipType } from "./f-components/f-chip/f-chip-declarations"; +import { FChipSize, FChipType } from "./f-components/f-chip/f-chip-declarations"; import { KupColorPickerEventPayload } from "./components/kup-color-picker/kup-color-picker-declarations"; import { KupComboboxEventPayload, KupComboboxIconClickEventPayload } from "./components/kup-combobox/kup-combobox-declarations"; import { KupGanttPlannerProps, KupPlannerBarDisplayProps, KupPlannerBarTask, KupPlannerCalendarProps, KupPlannerClickEventPayload, KupPlannerEventOption, KupPlannerEventPayload, KupPlannerGanttEvent, KupPlannerGanttProps, KupPlannerGanttRow, KupPlannerGanttTaskN, KupPlannerItemDetail, KupPlannerPhase, KupPlannerSwitcherProps, KupPlannerTask, KupPlannerTaskGanttContentProps, KupPlannerTaskGanttProps, KupPlannerTaskItemProps, KupPlannerTaskListProps, KupPlannerTaskType, KupPlannerUnloadEventPayload, KupPlannerViewMode, PlannerProps } from "./components/kup-planner/kup-planner-declarations"; @@ -71,7 +71,7 @@ export { FCellPadding } from "./f-components/f-cell/f-cell-declarations"; export { ChartAspect, ChartAxis, ChartOfflineMode, ChartSerie, ChartTitle, ChartType, KupChartClickEvent, KupChartSort, KupChartTrendlines } from "./components/kup-chart/kup-chart-declarations"; export { KupCheckboxEventPayload } from "./components/kup-checkbox/kup-checkbox-declarations"; export { KupChipChangeEventPayload, KupChipEventPayload, KupChipNode } from "./components/kup-chip/kup-chip-declarations"; -export { FChipType } from "./f-components/f-chip/f-chip-declarations"; +export { FChipSize, FChipType } from "./f-components/f-chip/f-chip-declarations"; export { KupColorPickerEventPayload } from "./components/kup-color-picker/kup-color-picker-declarations"; export { KupComboboxEventPayload, KupComboboxIconClickEventPayload } from "./components/kup-combobox/kup-combobox-declarations"; export { KupGanttPlannerProps, KupPlannerBarDisplayProps, KupPlannerBarTask, KupPlannerCalendarProps, KupPlannerClickEventPayload, KupPlannerEventOption, KupPlannerEventPayload, KupPlannerGanttEvent, KupPlannerGanttProps, KupPlannerGanttRow, KupPlannerGanttTaskN, KupPlannerItemDetail, KupPlannerPhase, KupPlannerSwitcherProps, KupPlannerTask, KupPlannerTaskGanttContentProps, KupPlannerTaskGanttProps, KupPlannerTaskItemProps, KupPlannerTaskListProps, KupPlannerTaskType, KupPlannerUnloadEventPayload, KupPlannerViewMode, PlannerProps } from "./components/kup-planner/kup-planner-declarations"; @@ -1018,6 +1018,11 @@ export namespace Components { * @param props - Object containing props that will be set to the component. */ "setProps": (props: GenericObject) => Promise; + /** + * Sets the type of the button + * @default FChipSize.MEDIUM + */ + "sizing": FChipSize; /** * The type of chip. Available types: input, filter, choice or empty for default. * @default FChipType.STANDARD @@ -5888,6 +5893,11 @@ declare namespace LocalJSX { * Triggered when the removal icon on input chips is clicked. */ "onKup-chip-iconclick"?: (event: KupChipCustomEvent) => void; + /** + * Sets the type of the button + * @default FChipSize.MEDIUM + */ + "sizing"?: FChipSize; /** * The type of chip. Available types: input, filter, choice or empty for default. * @default FChipType.STANDARD diff --git a/packages/ketchup/src/components/kup-chip/kup-chip.tsx b/packages/ketchup/src/components/kup-chip/kup-chip.tsx index c41b4f4816..58dd88639a 100644 --- a/packages/ketchup/src/components/kup-chip/kup-chip.tsx +++ b/packages/ketchup/src/components/kup-chip/kup-chip.tsx @@ -17,6 +17,7 @@ import { } from '../../managers/kup-manager/kup-manager'; import { FChip } from '../../f-components/f-chip/f-chip'; import { + FChipSize, FChipsProps, FChipType, } from '../../f-components/f-chip/f-chip-declarations'; @@ -80,6 +81,11 @@ export class KupChip { * @default FChipType.STANDARD */ @Prop() type: FChipType = FChipType.STANDARD; + /** + * Sets the type of the button + * @default FChipSize.MEDIUM + */ + @Prop() sizing: FChipSize = FChipSize.MEDIUM; /*-------------------------------------------------*/ /* I n t e r n a l V a r i a b l e s */ @@ -359,6 +365,7 @@ export class KupChip { secondary: this.rootElement.classList.contains('kup-secondary') ? true : false, + sizing: this.sizing, success: this.rootElement.classList.contains('kup-success') ? true : false, diff --git a/packages/ketchup/src/f-components/f-chip/f-chip-declarations.ts b/packages/ketchup/src/f-components/f-chip/f-chip-declarations.ts index ed8afaae47..33bc06674e 100644 --- a/packages/ketchup/src/f-components/f-chip/f-chip-declarations.ts +++ b/packages/ketchup/src/f-components/f-chip/f-chip-declarations.ts @@ -12,6 +12,7 @@ export interface FChipsProps extends FComponent { onFocus?: ((chip: KupChipNode, e: FocusEvent) => void)[]; onIconClick?: ((chip: KupChipNode, e: PointerEvent) => void)[]; type?: FChipType; + sizing?: FChipSize; } /** * Types of the f-chip component. @@ -27,3 +28,15 @@ export enum FChipType { INPUT = 'input', STANDARD = 'standard', } + +/** + * Types of the f-chip component. + * @enum {string} + * @property {string} SMALL - Small size: height = 18px + * @property {string} MEDIUM - Medium size: height = 24px (default) + */ + +export enum FChipSize { // GenericTypes to be studied because small chips goes with small button/textfield but has different sizes + SMALL = 'small', + MEDIUM = 'medium', +} diff --git a/packages/ketchup/src/f-components/f-chip/f-chip.scss b/packages/ketchup/src/f-components/f-chip/f-chip.scss index 92529f1a38..7e1bb13691 100644 --- a/packages/ketchup/src/f-components/f-chip/f-chip.scss +++ b/packages/ketchup/src/f-components/f-chip/f-chip.scss @@ -1,16 +1,24 @@ .f-chip { --kup_chip_background_color: var( --kup-chip-background-color, - var(--kup-background-color) + var(--kup-gray-color-20) + ); + --kup_chip_border_radius: var( + --kup-chip-border-radius, + var(--kup-radius-100) ); - --kup_chip_border_radius: var(--kup-chip-border-radius, 16px); --kup_chip_font_family: var(--kup-chip-font-family, var(--kup-font-family)); --kup_chip_font_size: var(--kup-chip-font-size, var(--kup-font-size)); --kup_chip_font_weight: var(--kup-chip-font-weight, var(--kup-font-weight)); --kup_chip_height: var(--kup-chip-height, 32px); + --kup_chip_small_height: var(--kup-chip-small-height, var(--kup-space-05)); + --kup_chip_medium_height: var(--kup-chip-medium-height, var(--kup-space-06)); --kup_chip_indent_multiplier: var(--kup-chip-indent-multiplier, 10); - --kup_chip_margin: var(--kup-chip-margin, 4px); - --kup_chip_padding: var(--kup-chip-padding, 0 12px); + --kup_chip_margin: var( + --kup-chip-margin, + var(--kup-space-00) + ); // spacing is in the chip-set + --kup_chip_padding: var(--kup-chip-padding, var(--kup-space-03)); --kup_chip_primary_color: var( --kup-chip-primary-color, var(--kup-primary-color) @@ -19,7 +27,7 @@ --kup-chip-primary-color-rgb, var(--kup-primary-color-rgb) ); - --kup_chip_text_color: var(--kup-chip-text-color, var(--kup-text-color)); + --kup_chip_text_color: var(--kup-chip-text-color, var(--kup-gray-color-70)); --kup_chip_text_color_rgb: var( --kup-chip-text-color-rgb, var(--kup-text-color-rgb) @@ -27,9 +35,15 @@ font-family: var(--kup_chip_font_family); font-size: var(--kup_chip_font_size); + @include kup-label-01; .chip-set { - padding: 4px; + gap: var(--kup-space-03); + margin: var( + --kup-chip-margin, + var(--kup-space-00) var(--kup-space-00) var(--kup-space-03) + var(--kup-space-00) + ); display: flex; flex-wrap: wrap; box-sizing: border-box; @@ -67,6 +81,14 @@ ); } + &.chip--small .chip { + height: var(--kup_chip_small_height); + } + + &.chip--medium .chip-set__item .chip-set__wrapper .chip { + height: var(--kup_chip_medium_height); + } + .chip { align-items: center; background-color: var(--kup_chip_background_color); @@ -98,8 +120,8 @@ color: var(--kup_chip_text_color); &:not(.chip__icon--leading-hidden) { - margin-left: -4px; - margin-right: 6px; + // margin-left: -4px; + margin-right: var(--kup-space-03); } .chip__icon--trailing { @@ -212,8 +234,8 @@ } .chip__checkmark { - margin-left: -4px; - margin-right: 4px; + // margin-left: -4px; + margin-right: var(--kup-space-03); .chip__checkmark-svg { height: 20px; width: 20px; @@ -224,8 +246,8 @@ &.chip-set--input { .#{$kup-icon-clear} { - margin-left: 4px; - margin-right: -4px; + margin-left: var(--kup-space-03); + // margin-right: -4px; &:hover { opacity: 0.75; } diff --git a/packages/ketchup/src/f-components/f-chip/f-chip.tsx b/packages/ketchup/src/f-components/f-chip/f-chip.tsx index 2d3c356ffb..b30d0d415d 100644 --- a/packages/ketchup/src/f-components/f-chip/f-chip.tsx +++ b/packages/ketchup/src/f-components/f-chip/f-chip.tsx @@ -29,6 +29,7 @@ export const FChip: FunctionalComponent = (props: FChipsProps) => { 'chip-set--choice': isChoice ? true : false, 'chip-set--filter': isFilter ? true : false, 'chip-set--input': isInput ? true : false, + [`chip--${props.sizing}`]: props.sizing ? true : false, }; return ( From 296fcef90ccdda831a17eb7781e3d5638e979cc2 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Tue, 6 Feb 2024 17:46:06 +0100 Subject: [PATCH 02/10] kup-button : token fixes --- .../styles/kup-dropdown-button-classes.scss | 8 ++++---- .../styles/kup-dropdown-button-main.scss | 8 ++++---- packages/ketchup/src/f-components/f-button/f-button.scss | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss index 9c322e7f8f..6d8161c577 100644 --- a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss +++ b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss @@ -5,15 +5,15 @@ :host(.#{$kup-class-shaped}) { .dropdown-button__primary-action { .button { - border-top-left-radius: var(--kup-space-00); - border-bottom-left-radius: var(--kup-space-00); + border-top-left-radius: var(--kup-radius-00); + border-bottom-left-radius: var(--kup-radius-00); } } .dropdown-button__dropdown-action { .button { - border-top-right-radius: var(--kup-space-00); - border-bottom-right-radius: var(--kup-space-00); + border-top-right-radius: var(--kup-radius-00); + border-bottom-right-radius: var(--kup-radius-00); } } } diff --git a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss index 32ebd5001b..85c816a53f 100644 --- a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss +++ b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss @@ -26,15 +26,15 @@ .f-button.dropdown-button__dropdown-action.dropdown-only { .button { - border-top-left-radius: var(--kup-space-00); - border-bottom-left-radius: var(--kup-space-00); + border-top-left-radius: var(--kup-radius-00); + border-bottom-left-radius: var(--kup-radius-00); } } .f-button.dropdown-button__dropdown-action { .button { - border-top-left-radius: var(--kup-space-00); - border-bottom-left-radius: var(--kup-space-00); + border-top-left-radius: var(--kup-radius-00); + border-bottom-left-radius: var(--kup-radius-00); box-shadow: var(--kup-primary-color) -2px 0px 2px -2px; .button__icon { diff --git a/packages/ketchup/src/f-components/f-button/f-button.scss b/packages/ketchup/src/f-components/f-button/f-button.scss index 248597213c..ef4a218cb8 100644 --- a/packages/ketchup/src/f-components/f-button/f-button.scss +++ b/packages/ketchup/src/f-components/f-button/f-button.scss @@ -15,7 +15,7 @@ --kup-button-border-focus-color, var(--kup-primary-color-60) ); - --kup_button_border_radius: var(--kup-button-border-radius, --kup-space-00); + --kup_button_border_radius: var(--kup-button-border-radius, --kup-radius-00); --kup_button_disabled_color: var( --kup-button-disabled-color, var(--kup-gray-color-50) From 9e49535f87429e7d7e1a21fa78d77e1fc19321bf Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Tue, 6 Feb 2024 17:46:16 +0100 Subject: [PATCH 03/10] Theme : general fixes --- .../kup-badge/styles/kup-badge-main.scss | 2 +- .../src/managers/kup-theme/kup-theme.ts | 2 +- .../src/managers/kup-theme/themes.json | 24 ++++++++++--------- 3 files changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/ketchup/src/components/kup-badge/styles/kup-badge-main.scss b/packages/ketchup/src/components/kup-badge/styles/kup-badge-main.scss index 9453b7a89c..ccad9da6e6 100644 --- a/packages/ketchup/src/components/kup-badge/styles/kup-badge-main.scss +++ b/packages/ketchup/src/components/kup-badge/styles/kup-badge-main.scss @@ -48,7 +48,7 @@ font-size: 0.625em; min-height: var(--kup_badge_min_size); min-width: var(--kup_badge_min_size); - padding: var(--kup_badge_padding) calc(var(--kup_badge_padding) * 1.25); + padding: var(--kup_badge_padding) calc(var(--kup_badge_padding)); text-align: center; display: flex; justify-content: center; diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme.ts b/packages/ketchup/src/managers/kup-theme/kup-theme.ts index 3d619e307a..0150c2d261 100644 --- a/packages/ketchup/src/managers/kup-theme/kup-theme.ts +++ b/packages/ketchup/src/managers/kup-theme/kup-theme.ts @@ -62,7 +62,7 @@ export class KupTheme { this.cssVars = {}; this.list = list ? list : themesJson['default']; this.managedComponents = new Set(); - this.name = name ? name : 'ketchup'; + this.name = name ? name : 'octane'; this.styleTag = dom .querySelector('head') .appendChild(document.createElement('style')); diff --git a/packages/ketchup/src/managers/kup-theme/themes.json b/packages/ketchup/src/managers/kup-theme/themes.json index df8d6b80f6..4beca4fff1 100644 --- a/packages/ketchup/src/managers/kup-theme/themes.json +++ b/packages/ketchup/src/managers/kup-theme/themes.json @@ -2,17 +2,17 @@ "octane": { "cssVariables": { "--kup-primary-color": "#068a9c", - "--kup-primary-color-5": "#83c5ce", - "--kup-primary-color-10": "#6ab9c4", - "--kup-primary-color-20": "#51adba", - "--kup-primary-color-30": "#38a1b0", - "--kup-primary-color-40": "#1f96a6", - "--kup-primary-color-50": "#068a9c", - "--kup-primary-color-60": "#056e7d", - "--kup-primary-color-70": "#04616d", - "--kup-primary-color-80": "#03454e", + "--kup-primary-color-5": "#C6FEFF", + "--kup-primary-color-10": "#A5E6F0", + "--kup-primary-color-20": "#83CBD8", + "--kup-primary-color-30": "#5CB0C0", + "--kup-primary-color-40": "#3E9EAF", + "--kup-primary-color-50": "#068A9C", + "--kup-primary-color-60": "#007A8B", + "--kup-primary-color-70": "#006574", + "--kup-primary-color-80": "#005160", "--kup-primary-color-90": "#02292f", - "--kup-secondary-color": "#f4a22e", + "--kup-secondary-color": "#003C49", "--kup-gray-color-10": "#e8e8e8", "--kup-gray-color-20": "#d1d1d1", "--kup-gray-color-30": "#b5b5b5", @@ -76,7 +76,9 @@ "--kup-space-10": "64px", "--kup-space-11": "80px", "--kup-space-12": "96px", - "--kup-space-13": "160px" + "--kup-space-13": "160px", + "--kup-radius-00": "0px", + "--kup-radius-100": "100px" }, "icons": { "--kup-ascending-icon": "arrow_drop_up", From e2e786e8fb2544080664b2e8f6c52dfc9efc425a Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Tue, 6 Feb 2024 18:11:04 +0100 Subject: [PATCH 04/10] kup-chip : Measurement fixes --- .../src/f-components/f-chip/f-chip-declarations.ts | 4 ++-- packages/ketchup/src/f-components/f-chip/f-chip.scss | 6 +++--- packages/ketchup/src/f-components/f-chip/f-chip.tsx | 12 ++++++------ 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/ketchup/src/f-components/f-chip/f-chip-declarations.ts b/packages/ketchup/src/f-components/f-chip/f-chip-declarations.ts index 33bc06674e..e90bf1d22c 100644 --- a/packages/ketchup/src/f-components/f-chip/f-chip-declarations.ts +++ b/packages/ketchup/src/f-components/f-chip/f-chip-declarations.ts @@ -32,8 +32,8 @@ export enum FChipType { /** * Types of the f-chip component. * @enum {string} - * @property {string} SMALL - Small size: height = 18px - * @property {string} MEDIUM - Medium size: height = 24px (default) + * @property {string} SMALL - Small size: height = 24px + * @property {string} MEDIUM - Medium size: height = 32px (default) */ export enum FChipSize { // GenericTypes to be studied because small chips goes with small button/textfield but has different sizes diff --git a/packages/ketchup/src/f-components/f-chip/f-chip.scss b/packages/ketchup/src/f-components/f-chip/f-chip.scss index 7e1bb13691..a269fd7b4d 100644 --- a/packages/ketchup/src/f-components/f-chip/f-chip.scss +++ b/packages/ketchup/src/f-components/f-chip/f-chip.scss @@ -120,7 +120,7 @@ color: var(--kup_chip_text_color); &:not(.chip__icon--leading-hidden) { - // margin-left: -4px; + margin: var(--kup-space-00); margin-right: var(--kup-space-03); } @@ -172,8 +172,8 @@ .#{$kup-icon} { background: var(--kup_chip_text_color); display: block; - width: 18px; - height: 18px; + width: 16px; + height: 16px; } .chip__primary-action { diff --git a/packages/ketchup/src/f-components/f-chip/f-chip.tsx b/packages/ketchup/src/f-components/f-chip/f-chip.tsx index b30d0d415d..f6ce4c38de 100644 --- a/packages/ketchup/src/f-components/f-chip/f-chip.tsx +++ b/packages/ketchup/src/f-components/f-chip/f-chip.tsx @@ -97,8 +97,8 @@ function createChipList( : null } resource={`${KupThemeIconValues.DROPDOWN}`} - sizeX="18px" - sizeY="18px" + sizeX="16px" + sizeY="16px" title={ dom.ketchup.language.translate( KupLanguageGeneric.EXPAND @@ -114,8 +114,8 @@ function createChipList( ) : indent ? ( ) : null} @@ -155,8 +155,8 @@ function createChipList( ? `var(${KupThemeColorValues.PRIMARY})` : `var(${KupThemeColorValues.TEXT})`, resource: chip.icon, - sizeX: '18px', - sizeY: '18px', + sizeX: '16px', + sizeY: '16px', wrapperClass: iconClass, }; iconEl.push(); From 31a3fc92be712fa75272ada07376d11dd93e9e9b Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Fri, 9 Feb 2024 10:56:43 +0100 Subject: [PATCH 05/10] kup-chip : update kup-chip --- packages/ketchup/src/chip.html | 95 +++++++++++++++---- packages/ketchup/src/components.d.ts | 18 +++- .../src/components/kup-chip/kup-chip.tsx | 12 ++- .../ketchup/src/components/kup-chip/readme.md | 16 ++-- .../f-chip/f-chip-declarations.ts | 14 ++- .../src/f-components/f-chip/f-chip.scss | 69 ++++++++++---- .../src/f-components/f-chip/f-chip.tsx | 18 +++- packages/ketchup/src/style/global.scss | 1 + 8 files changed, 191 insertions(+), 52 deletions(-) diff --git a/packages/ketchup/src/chip.html b/packages/ketchup/src/chip.html index 0ac50ae1a3..c9a5530256 100644 --- a/packages/ketchup/src/chip.html +++ b/packages/ketchup/src/chip.html @@ -33,35 +33,90 @@ font-size: var(--kup-font-size); padding: 1rem; } + + body{ + display: grid; + } - +

Chip

+ + + +

Sizing

+
Default ( Medium )
+ + + +
Small
+ + + + + +

Styling

+
Default ( Neutral )
+ + +
+ + + + + +

Construction

+
Singular
+
Set construction
+ +

Type

+
Default ( Raised )
+ + + + + + + + + + + diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index dc5e4234d7..a1c1a63d8a 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -22,7 +22,7 @@ import { FCellPadding } from "./f-components/f-cell/f-cell-declarations"; import { ChartAspect, ChartAxis, ChartOfflineMode, ChartSerie, ChartTitle, ChartType, KupChartClickEvent, KupChartSort, KupChartTrendlines } from "./components/kup-chart/kup-chart-declarations"; import { KupCheckboxEventPayload } from "./components/kup-checkbox/kup-checkbox-declarations"; import { KupChipChangeEventPayload, KupChipEventPayload, KupChipNode } from "./components/kup-chip/kup-chip-declarations"; -import { FChipSize, FChipType } from "./f-components/f-chip/f-chip-declarations"; +import { FChipSize, FChipStyling, FChipType } from "./f-components/f-chip/f-chip-declarations"; import { KupColorPickerEventPayload } from "./components/kup-color-picker/kup-color-picker-declarations"; import { KupComboboxEventPayload, KupComboboxIconClickEventPayload } from "./components/kup-combobox/kup-combobox-declarations"; import { KupGanttPlannerProps, KupPlannerBarDisplayProps, KupPlannerBarTask, KupPlannerCalendarProps, KupPlannerClickEventPayload, KupPlannerEventOption, KupPlannerEventPayload, KupPlannerGanttEvent, KupPlannerGanttProps, KupPlannerGanttRow, KupPlannerGanttTaskN, KupPlannerItemDetail, KupPlannerPhase, KupPlannerSwitcherProps, KupPlannerTask, KupPlannerTaskGanttContentProps, KupPlannerTaskGanttProps, KupPlannerTaskItemProps, KupPlannerTaskListProps, KupPlannerTaskType, KupPlannerUnloadEventPayload, KupPlannerViewMode, PlannerProps } from "./components/kup-planner/kup-planner-declarations"; @@ -71,7 +71,7 @@ export { FCellPadding } from "./f-components/f-cell/f-cell-declarations"; export { ChartAspect, ChartAxis, ChartOfflineMode, ChartSerie, ChartTitle, ChartType, KupChartClickEvent, KupChartSort, KupChartTrendlines } from "./components/kup-chart/kup-chart-declarations"; export { KupCheckboxEventPayload } from "./components/kup-checkbox/kup-checkbox-declarations"; export { KupChipChangeEventPayload, KupChipEventPayload, KupChipNode } from "./components/kup-chip/kup-chip-declarations"; -export { FChipSize, FChipType } from "./f-components/f-chip/f-chip-declarations"; +export { FChipSize, FChipStyling, FChipType } from "./f-components/f-chip/f-chip-declarations"; export { KupColorPickerEventPayload } from "./components/kup-color-picker/kup-color-picker-declarations"; export { KupComboboxEventPayload, KupComboboxIconClickEventPayload } from "./components/kup-combobox/kup-combobox-declarations"; export { KupGanttPlannerProps, KupPlannerBarDisplayProps, KupPlannerBarTask, KupPlannerCalendarProps, KupPlannerClickEventPayload, KupPlannerEventOption, KupPlannerEventPayload, KupPlannerGanttEvent, KupPlannerGanttProps, KupPlannerGanttRow, KupPlannerGanttTaskN, KupPlannerItemDetail, KupPlannerPhase, KupPlannerSwitcherProps, KupPlannerTask, KupPlannerTaskGanttContentProps, KupPlannerTaskGanttProps, KupPlannerTaskItemProps, KupPlannerTaskListProps, KupPlannerTaskType, KupPlannerUnloadEventPayload, KupPlannerViewMode, PlannerProps } from "./components/kup-planner/kup-planner-declarations"; @@ -1019,10 +1019,15 @@ export namespace Components { */ "setProps": (props: GenericObject) => Promise; /** - * Sets the type of the button + * Sets the type of the chip * @default FChipSize.MEDIUM */ "sizing": FChipSize; + /** + * Sets the style of the chip + * @default FChipStyling.RAISED + */ + "styling": FChipStyling; /** * The type of chip. Available types: input, filter, choice or empty for default. * @default FChipType.STANDARD @@ -5894,10 +5899,15 @@ declare namespace LocalJSX { */ "onKup-chip-iconclick"?: (event: KupChipCustomEvent) => void; /** - * Sets the type of the button + * Sets the type of the chip * @default FChipSize.MEDIUM */ "sizing"?: FChipSize; + /** + * Sets the style of the chip + * @default FChipStyling.RAISED + */ + "styling"?: FChipStyling; /** * The type of chip. Available types: input, filter, choice or empty for default. * @default FChipType.STANDARD diff --git a/packages/ketchup/src/components/kup-chip/kup-chip.tsx b/packages/ketchup/src/components/kup-chip/kup-chip.tsx index 58dd88639a..efbf4fb710 100644 --- a/packages/ketchup/src/components/kup-chip/kup-chip.tsx +++ b/packages/ketchup/src/components/kup-chip/kup-chip.tsx @@ -19,6 +19,7 @@ import { FChip } from '../../f-components/f-chip/f-chip'; import { FChipSize, FChipsProps, + FChipStyling, FChipType, } from '../../f-components/f-chip/f-chip-declarations'; import { @@ -82,10 +83,15 @@ export class KupChip { */ @Prop() type: FChipType = FChipType.STANDARD; /** - * Sets the type of the button + * Sets the type of the chip * @default FChipSize.MEDIUM */ @Prop() sizing: FChipSize = FChipSize.MEDIUM; + /** + * Sets the style of the chip + * @default FChipStyling.RAISED + */ + @Prop() styling: FChipStyling = FChipStyling.RAISED; /*-------------------------------------------------*/ /* I n t e r n a l V a r i a b l e s */ @@ -362,10 +368,14 @@ export class KupChip { onExpansionClick: [], onFocus: [], onIconClick: [], + primary: this.rootElement.classList.contains('kup-primary') + ? true + : false, secondary: this.rootElement.classList.contains('kup-secondary') ? true : false, sizing: this.sizing, + styling: this.styling, success: this.rootElement.classList.contains('kup-success') ? true : false, diff --git a/packages/ketchup/src/components/kup-chip/readme.md b/packages/ketchup/src/components/kup-chip/readme.md index 912407ded3..67aef88461 100644 --- a/packages/ketchup/src/components/kup-chip/readme.md +++ b/packages/ketchup/src/components/kup-chip/readme.md @@ -5,13 +5,15 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | -------------------- | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | List of elements. | `KupChipNode[]` | `[]` | -| `displayId` | `display-id` | When enabled, the chip's text will display both the id and the value. | `boolean` | `false` | -| `enableInput` | `enable-input` | When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field). | `boolean` | `false` | -| `type` | `type` | The type of chip. Available types: input, filter, choice or empty for default. | `FChipType.CHOICE \| FChipType.FILTER \| FChipType.INPUT \| FChipType.STANDARD` | `FChipType.STANDARD` | +| Property | Attribute | Description | Type | Default | +| ------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------- | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | List of elements. | `KupChipNode[]` | `[]` | +| `displayId` | `display-id` | When enabled, the chip's text will display both the id and the value. | `boolean` | `false` | +| `enableInput` | `enable-input` | When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field). | `boolean` | `false` | +| `sizing` | `sizing` | Sets the type of the chip | `FChipSize.MEDIUM \| FChipSize.SMALL` | `FChipSize.MEDIUM` | +| `styling` | `styling` | Sets the style of the chip | `FChipStyling.OUTLINED \| FChipStyling.RAISED` | `FChipStyling.RAISED` | +| `type` | `type` | The type of chip. Available types: input, filter, choice or empty for default. | `FChipType.CHOICE \| FChipType.FILTER \| FChipType.INPUT \| FChipType.STANDARD` | `FChipType.STANDARD` | ## Events diff --git a/packages/ketchup/src/f-components/f-chip/f-chip-declarations.ts b/packages/ketchup/src/f-components/f-chip/f-chip-declarations.ts index e90bf1d22c..a89022cc91 100644 --- a/packages/ketchup/src/f-components/f-chip/f-chip-declarations.ts +++ b/packages/ketchup/src/f-components/f-chip/f-chip-declarations.ts @@ -11,8 +11,10 @@ export interface FChipsProps extends FComponent { onExpansionClick?: ((chip: KupChipNode, e: PointerEvent) => void)[]; onFocus?: ((chip: KupChipNode, e: FocusEvent) => void)[]; onIconClick?: ((chip: KupChipNode, e: PointerEvent) => void)[]; - type?: FChipType; + primary?: boolean; sizing?: FChipSize; + styling?: FChipStyling; + type?: FChipType; } /** * Types of the f-chip component. @@ -28,6 +30,16 @@ export enum FChipType { INPUT = 'input', STANDARD = 'standard', } +/** + * Types of the f-chip component. + * @enum {string} + * @property {string} OUTLINED - Outlined style : no background with border. + * @property {string} RAISED - Raised style : no border with solid background. + */ +export enum FChipStyling { + OUTLINED = 'outlined', + RAISED = 'raised', +} /** * Types of the f-chip component. diff --git a/packages/ketchup/src/f-components/f-chip/f-chip.scss b/packages/ketchup/src/f-components/f-chip/f-chip.scss index a269fd7b4d..f7124a9aa4 100644 --- a/packages/ketchup/src/f-components/f-chip/f-chip.scss +++ b/packages/ketchup/src/f-components/f-chip/f-chip.scss @@ -3,6 +3,10 @@ --kup-chip-background-color, var(--kup-gray-color-20) ); + --kup_chip_border_color: var( + --kup-chip-border-color, + var(--kup-gray-color-80) + ); --kup_chip_border_radius: var( --kup-chip-border-radius, var(--kup-radius-100) @@ -21,13 +25,13 @@ --kup_chip_padding: var(--kup-chip-padding, var(--kup-space-03)); --kup_chip_primary_color: var( --kup-chip-primary-color, - var(--kup-primary-color) + var(--kup-gray-color-80) ); --kup_chip_primary_color_rgb: var( --kup-chip-primary-color-rgb, var(--kup-primary-color-rgb) ); - --kup_chip_text_color: var(--kup-chip-text-color, var(--kup-gray-color-70)); + --kup_chip_text_color: var(--kup-chip-text-color, var(--kup-gray-color-80)); --kup_chip_text_color_rgb: var( --kup-chip-text-color-rgb, var(--kup-text-color-rgb) @@ -89,17 +93,22 @@ height: var(--kup_chip_medium_height); } + &.chip--outlined .chip-set__item .chip-set__wrapper .chip { + background-color: transparent; + border-color: var(--kup_chip_border_color); + } + .chip { align-items: center; background-color: var(--kup_chip_background_color); - background-image: linear-gradient( - to right, - rgba(var(--kup_chip_text_color_rgb), 0.1) 0%, - rgba(var(--kup_chip_text_color_rgb), 0.1) 0.1%, - rgba(var(--kup_chip_text_color_rgb), 0.1) - ); + // background-image: linear-gradient( + // to right, + // rgba(var(--kup_chip_text_color_rgb), 0.1) 0%, + // rgba(var(--kup_chip_text_color_rgb), 0.1) 0.1%, + // rgba(var(--kup_chip_text_color_rgb), 0.1) + // ); border-radius: var(--kup_chip_border_radius); - border-width: 0; + border: 1px solid transparent; box-sizing: border-box; color: var(--kup_chip_text_color); cursor: pointer; @@ -146,6 +155,7 @@ } .f-image__icon { margin: auto; + background: var(--kup_chip_text_color); height: var(--kup_image_height, 100%); width: var(--kup_image_width, 100%); } @@ -187,13 +197,13 @@ &.chip-set--choice { .chip--selected { background-color: var(--kup_chip_background_color); - background-image: linear-gradient( - to right, - rgba(var(--kup_chip_primary_color_rgb), 0.25) 0%, - rgba(var(--kup_chip_primary_color_rgb), 0.25) 0.1%, - rgba(var(--kup_chip_primary_color_rgb), 0.25) - ); - color: var(--kup_chip_primary_color); + // background-image: linear-gradient( + // to right, + // rgba(var(--kup_chip_primary_color_rgb), 0.25) 0%, + // rgba(var(--kup_chip_primary_color_rgb), 0.25) 0.1%, + // rgba(var(--kup_chip_primary_color_rgb), 0.25) + // ); + color: var(--kup_chip_gray_color); } } @@ -259,6 +269,33 @@ transform-origin: 0px 0px; } + &.#{$kup-class-primary} { + .chip--outlined .chip-set__item .chip-set__wrapper .chip { + --kup_chip_background_color: transparent; + --kup_chip_border_color: var(--kup-primary-color-80); + --kup_chip_primary_color: var( + --kup-chip-primary-color, + var(--kup-primary-color-80) + ); + --kup_chip_text_color: var( + --kup-chip-text-color, + var(--kup-primary-color-80) + ); + } + .chip--raised .chip-set__item .chip-set__wrapper .chip { + --kup_chip_background_color: var(--kup-primary-color-20); + --kup_chip_border_color: var(--kup-primary-color-20); + --kup_chip_primary_color: var( + --kup-chip-primary-color, + var(--kup-primary-color-80) + ); + --kup_chip_text_color: var( + --kup-chip-text-color, + var(--kup-primary-color-80) + ); + } + } + &.#{$kup-class-danger} { --kup-chip-primary-color: var(--kup-danger-color); --kup-chip-primary-color-rgb: var(--kup-danger-color-rgb); diff --git a/packages/ketchup/src/f-components/f-chip/f-chip.tsx b/packages/ketchup/src/f-components/f-chip/f-chip.tsx index f6ce4c38de..10db0ad511 100644 --- a/packages/ketchup/src/f-components/f-chip/f-chip.tsx +++ b/packages/ketchup/src/f-components/f-chip/f-chip.tsx @@ -1,5 +1,9 @@ import { FunctionalComponent, h, VNode } from '@stencil/core'; -import { FChipsProps, FChipType } from '../f-chip/f-chip-declarations'; +import { + FChipsProps, + FChipStyling, + FChipType, +} from '../f-chip/f-chip-declarations'; import { FImage } from '../f-image/f-image'; import { FImageProps } from '../f-image/f-image-declarations'; import { @@ -17,6 +21,9 @@ const dom: KupDom = document.documentElement as KupDom; /*-------------------------------------------------*/ export const FChip: FunctionalComponent = (props: FChipsProps) => { + if (!props.styling) { + props.styling = FChipStyling.RAISED; + } if (!props.type) { props.type = FChipType.STANDARD; } @@ -24,11 +31,16 @@ export const FChip: FunctionalComponent = (props: FChipsProps) => { const isChoice = props.type.toLowerCase() === FChipType.CHOICE; const isFilter = props.type.toLowerCase() === FChipType.FILTER; const isInput = props.type.toLowerCase() === FChipType.INPUT; + const isOutlined: boolean = + props.styling.toLowerCase() === FChipStyling.OUTLINED; + const isRaised: boolean = !isOutlined ? true : false; const classObj: Record = { 'chip-set': true, 'chip-set--choice': isChoice ? true : false, 'chip-set--filter': isFilter ? true : false, 'chip-set--input': isInput ? true : false, + 'chip--outlined': isOutlined ? true : false, + 'chip--raised': isRaised ? true : false, [`chip--${props.sizing}`]: props.sizing ? true : false, }; @@ -40,7 +52,7 @@ export const FChip: FunctionalComponent = (props: FChipsProps) => { props.success ? 'kup-success' : '' } ${props.warning ? 'kup-warning' : ''} ${ props.wrapperClass ? props.wrapperClass : '' - }`} + } ${props.primary ? 'kup-primary' : ''}`} {...props.dataSet} id={props.id} title={props.title} @@ -152,7 +164,7 @@ function createChipList( const p: FImageProps = { color: isChoice && chip.checked - ? `var(${KupThemeColorValues.PRIMARY})` + ? `var(--kup_chip_primary_color)` : `var(${KupThemeColorValues.TEXT})`, resource: chip.icon, sizeX: '16px', diff --git a/packages/ketchup/src/style/global.scss b/packages/ketchup/src/style/global.scss index e4fc64b22c..d4a6d640bc 100644 --- a/packages/ketchup/src/style/global.scss +++ b/packages/ketchup/src/style/global.scss @@ -55,6 +55,7 @@ $kup-class-shaped: 'kup-shaped'; // Gives the component a shaped look by roundin $kup-class-striped: 'kup-striped'; // Displays a striped texture. $kup-class-unclickable: 'kup-unclickable'; // The component will be unclickable. $kup-class-neutral: 'kup-neutral'; // The component will have a neutral styling. +$kup-class-primary: 'kup-primary'; // The component will have a neutral styling. //-----------------------------------------------------// // T h e m e I c o n s // From d60e4df1f7eb72e366824411daa80f01dee3d95b Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Mon, 12 Feb 2024 15:13:24 +0100 Subject: [PATCH 06/10] f-checkbox : correct design classes --- .../f-components/f-checkbox/f-checkbox.scss | 31 +++++++++---------- .../src/managers/kup-theme/themes.json | 2 ++ 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss b/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss index 6bbfaf9c64..8d3308dcbf 100644 --- a/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss +++ b/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss @@ -1,32 +1,32 @@ .f-checkbox { --kup_checkbox_disabled_checkmark_color: var( --kup-checkbox-disabled-checkmark-color, - var(--kup-background-color) + var(--kup-gray-color-10) ); --kup_checkbox_padding: var(--kup-checkbox-padding, 11px); --kup_checkbox_primary_color: var( --kup-checkbox-primary-color, - var(--kup-primary-color) + var(--kup-gray-color-100) ); --kup_checkbox_primary_color_rgb: var( --kup-checkbox-primary-color-rgb, - var(--kup-primary-color-rgb) + var(--kup-gray-color-100-rgb) ); --kup_checkbox_text_color: var( --kup-checkbox-text-color, - var(--kup-text-color) + var(--kup-gray-color-100) ); --kup_checkbox_text_color_rgb: var( --kup-checkbox-text-color-rgb, - var(--kup-text-color-rgb) + var(--kup-gray-color-100-rgb) ); --kup_checkbox_text_on_primary_color: var( --kup-checkbox-text-on-primary-color, - var(--kup-text-on-primary-color) + var(--kup-gray-color-10) ); --kup_checkbox_text_on_primary_color_rgb: var( --kup-checkbox-text-on-primary-color-rgb, - var(--kup-text-on-primary-color-rgb) + var(--kup-gray-color-10-rgb) ); @include kup-body-compact-01; @@ -124,7 +124,7 @@ box-sizing: border-box; width: 18px; height: 18px; - border: 2px solid rgba(var(--kup_checkbox_text_color_rgb), 0.5); + border: 1px solid rgba(var(--kup_checkbox_text_color_rgb), 1); border-radius: 2px; background-color: transparent; pointer-events: none; @@ -147,9 +147,9 @@ .checkbox__mixedmark { position: absolute; top: 6px; - left: -1px; + left: 1px; color: var(--kup_checkbox_text_on_primary_color); - width: 100%; + width: 75%; height: 0; border-width: 1px; border-style: solid; @@ -159,14 +159,10 @@ } } - .checkbox__error-message { - color: var(--kup-accent-red-color); - } - &.checkbox--checked { .checkbox__background { background-color: var(--kup_checkbox_primary_color); - border-color: var(--kup_checkbox_primary_color); + // border-color: var(--kup_checkbox_primary_color); opacity: 1; } @@ -178,7 +174,7 @@ &.checkbox--indeterminate { .checkbox__background { background-color: var(--kup_checkbox_primary_color); - border-color: var(--kup_checkbox_primary_color); + // border-color: var(--kup_checkbox_primary_color); } .checkbox__mixedmark { @@ -219,6 +215,9 @@ color: var(--kup_checkbox_disabled_checkmark_color); } } + .checkbox__error-message { + color: var(--kup-accent-red-color); + } } } diff --git a/packages/ketchup/src/managers/kup-theme/themes.json b/packages/ketchup/src/managers/kup-theme/themes.json index 4beca4fff1..9a94cb124c 100644 --- a/packages/ketchup/src/managers/kup-theme/themes.json +++ b/packages/ketchup/src/managers/kup-theme/themes.json @@ -13,6 +13,7 @@ "--kup-primary-color-80": "#005160", "--kup-primary-color-90": "#02292f", "--kup-secondary-color": "#003C49", + "--kup-white": "#fff", "--kup-gray-color-10": "#e8e8e8", "--kup-gray-color-20": "#d1d1d1", "--kup-gray-color-30": "#b5b5b5", @@ -23,6 +24,7 @@ "--kup-gray-color-80": "#474747", "--kup-gray-color-90": "#333333", "--kup-gray-color-100": "#292929", + "--kup-black": "#000", "--kup-accent-red-color": "#A6192E", "--kup-accent-orange-color": "#DE8906", "--kup-accent-yellow-color": "#FDDC69", From 9fc351afaae20454258b81477cf79fc1855f1974 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Tue, 13 Feb 2024 12:18:18 +0100 Subject: [PATCH 07/10] kup-combobox : component redesign --- packages/ketchup/src/combobox.html | 5 +- packages/ketchup/src/components.d.ts | 120 ++++++++++++++++++ .../kup-combobox/kup-combobox-declarations.ts | 3 + .../components/kup-combobox/kup-combobox.tsx | 102 ++++++++++++++- .../src/components/kup-combobox/readme.md | 2 + .../styles/kup-combobox-main.scss | 7 +- 6 files changed, 230 insertions(+), 9 deletions(-) diff --git a/packages/ketchup/src/combobox.html b/packages/ketchup/src/combobox.html index 27622fe1c6..e5c66be41b 100644 --- a/packages/ketchup/src/combobox.html +++ b/packages/ketchup/src/combobox.html @@ -21,22 +21,23 @@

Material Combobox (widget)

- isSelect=true
- isSelect=false 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 + */ + "icon": string; /** * Sets the initial value of the component */ "initialValue": string; + /** + * Enables a clear trailing icon. + * @default false + */ + "isClearable": boolean; /** * Lets the combobox behave as a select element. */ "isSelect": 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; + /** + * 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. */ @@ -1155,6 +1205,16 @@ export namespace Components { * When true shows the drop-down icon, for open list. */ "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 KupCustomTaskListHeader { "doubleView"?: boolean; @@ -5944,6 +6004,11 @@ declare namespace LocalJSX { "swatchOnly"?: boolean; } interface KupCombobox { + /** + * Set alert message + * @default ''' + */ + "alert"?: string; /** * Custom style of the component. * @default "" @@ -5962,14 +6027,54 @@ declare namespace LocalJSX { * Sets how to show the selected item value. Suported values: "code", "description", "both". */ "displayMode"?: ItemsDisplayMode; + /** + * Set error message + * @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 + */ + "icon"?: string; /** * Sets the initial value of the component */ "initialValue"?: string; + /** + * Enables a clear trailing icon. + * @default false + */ + "isClearable"?: boolean; /** * Lets the combobox behave as a select element. */ "isSelect"?: 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; "onKup-combobox-blur"?: (event: KupComboboxCustomEvent) => void; "onKup-combobox-change"?: (event: KupComboboxCustomEvent) => void; "onKup-combobox-click"?: (event: KupComboboxCustomEvent) => void; @@ -5977,6 +6082,11 @@ declare namespace LocalJSX { "onKup-combobox-iconclick"?: (event: KupComboboxCustomEvent) => void; "onKup-combobox-input"?: (event: KupComboboxCustomEvent) => void; "onKup-combobox-itemclick"?: (event: KupComboboxCustomEvent) => 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". */ @@ -5985,6 +6095,16 @@ declare namespace LocalJSX { * When true shows the drop-down icon, for open list. */ "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 KupCustomTaskListHeader { "doubleView"?: boolean; diff --git a/packages/ketchup/src/components/kup-combobox/kup-combobox-declarations.ts b/packages/ketchup/src/components/kup-combobox/kup-combobox-declarations.ts index 419f139f1d..6bf0d58b6e 100644 --- a/packages/ketchup/src/components/kup-combobox/kup-combobox-declarations.ts +++ b/packages/ketchup/src/components/kup-combobox/kup-combobox-declarations.ts @@ -11,9 +11,12 @@ export enum KupComboboxProps { disabled = 'Defaults at false. When set to true, the component is disabled.', displayMode = 'Sets how to show the selected item value. Suported values: "code", "description", "both".', initialValue = 'Sets the initial value of the component', + isClearable = 'Enables a clear trailing icon.', isSelect = 'Lets the combobox behave as a select element.', selectMode = 'Sets how to return the selected item value. Suported values: "code", "description", "both".', showDropDownIcon = 'When true shows the drop-down icon, for open list.', + label = 'When set, its content will be shown as a label.', + leadingLabel = 'When set to true, the label will be on the left of the component.', } export interface KupComboboxEventPayload extends KupEventPayload { diff --git a/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx b/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx index 2529d4e102..e8bc295477 100644 --- a/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx +++ b/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx @@ -12,7 +12,11 @@ import { State, Watch, } from '@stencil/core'; -import type { GenericObject, KupComponent } from '../../types/GenericTypes'; +import { + GenericObject, + KupComponent, + KupComponentSizing, +} from '../../types/GenericTypes'; import { KupManager, kupManagerInstance, @@ -35,6 +39,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-combobox', @@ -55,6 +60,11 @@ export class KupCombobox { /* P r o p s */ /*-------------------------------------------------*/ + /** + * Set alert message + * @default ''' + */ + @Prop() alert: string = ''; /** * Custom style of the component. * @default "" @@ -73,14 +83,59 @@ export class KupCombobox { * Sets how to show the selected item value. Suported values: "code", "description", "both". */ @Prop() displayMode: ItemsDisplayMode = ItemsDisplayMode.DESCRIPTION; + /** + * Set error message + * @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 + */ + @Prop() icon: string = null; /** * Sets the initial value of the component */ @Prop() initialValue: string = ''; + /** + * Enables a clear trailing icon. + * @default false + */ + @Prop() isClearable: boolean = false; /** * Lets the combobox behave as a select element. */ @Prop({ reflect: true }) isSelect: boolean = false; + /** + * 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; + /** + * 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". */ @@ -89,6 +144,16 @@ export class KupCombobox { * When true shows the drop-down icon, for open list. */ @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 */ @@ -371,6 +436,10 @@ export class KupCombobox { if (this.#isListOpened()) { return; } + // Manage list open while helperline is displayed + 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; this.#listEl.filter = ''; @@ -386,7 +455,7 @@ export class KupCombobox { this.#kupManager.dynamicPosition.register( this.#listEl, this.#textfieldWrapper, - 0, + topOffset, KupDynamicPositionPlacement.AUTO, true ); @@ -495,11 +564,35 @@ export class KupCombobox { } render() { + const props: FTextFieldProps = { + alert: this.alert, + danger: this.rootElement.classList.contains('kup-danger') + ? true + : false, + disabled: this.disabled, + error: this.error, + helper: this.helper, + 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: boolean = this.rootElement.classList.contains('kup-full-height'); const fullWidth: boolean = this.rootElement.classList.contains('kup-full-width'); - return (
this.onKupBlur()} onClick={() => this.onKupClick()} diff --git a/packages/ketchup/src/components/kup-combobox/readme.md b/packages/ketchup/src/components/kup-combobox/readme.md index d1f08083eb..51dc70973c 100644 --- a/packages/ketchup/src/components/kup-combobox/readme.md +++ b/packages/ketchup/src/components/kup-combobox/readme.md @@ -13,6 +13,8 @@ | `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` | diff --git a/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-main.scss b/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-main.scss index 6d54d9098b..30af0cea4f 100644 --- a/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-main.scss +++ b/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-main.scss @@ -8,9 +8,9 @@ #kup-component { transition: background-color 0.2s; - &:hover { - background-color: rgba(var(--kup-text-color-rgb), 0.1); - } + // &:hover { + // background-color: rgba(var(--kup-text-color-rgb), 0.1); + // } } .mdc-text-field:not(.mdc-text-field--disabled) input { @@ -29,6 +29,7 @@ .#{$kup-icon}.#{$kup-icon-dropdown} { -webkit-mask: var(--kup-dropdown-icon); mask: var(--kup-dropdown-icon); + order: 2; } .f-text-field { From 354456beba907fc5c84bba50588d878c404b16a0 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Tue, 13 Feb 2024 12:19:17 +0100 Subject: [PATCH 08/10] kup-list : redesign --- .../kup-list/styles/kup-list-main.scss | 35 ++++++++++++------- .../kup-dynamic-position.ts | 6 ++-- 2 files changed, 26 insertions(+), 15 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 4d314e7faa..ea7a96a2c9 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,17 +16,26 @@ */ :host { - --kup_list_background: var( - --kup-list-background, - var(--kup-background-color) + --kup_list_background: var(--kup-list-background, var(--kup-gray-color-10)); + --kup_list_background_hover: var( + --kup-list-background-hover, + var(--kup-gray-color-20) ); - --kup_list_color: var(--kup-list-color, var(--kup-text-color)); + + --kup_list_focus_color: var(--kup-list-focus-color, var(--kup-primary-color)); + --kup_list_color: var(--kup-list-color, var(--kup-gray-color-70)); --kup_list_font_family: var(--kup-list-font-family, var(--kup-font-family)); --kup_list_font_size: var(--kup-list-font-size, var(--kup-font-size)); --kup_list_font_weight: var(--kup-list-font-weight, 400); --kup_list_group_item_height: var(--kup-list-group-item-height, 3em); - --kup_list_item_height: var(--kup-list-item-height, 2.5em); - --kup_list_item_padding_left: var(--kup-list-item-padding, 0.75em); + --kup_list_item_height: var(--kup_list_item_height_medium, 2.5em); + --kup_list_item_height_small: var(--kup-list-item-height-small, 32px); + --kup_list_item_height_medium: var(--kup-list-item-height-medium, 40px); + --kup_list_item_height_large: var(--kup-list-item-height-large, 48px); + --kup_list_item_padding_left: var( + --kup-list-item-padding, + var(--kup-space-05) + ); --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( @@ -57,7 +66,7 @@ line-height: 1.5em; list-style-type: none; margin: 0; - padding: 0.5em 0; + padding: 0; text-decoration: inherit; text-transform: inherit; @@ -93,8 +102,8 @@ &.list-item--activated .list-item__graphic, &.list-item--selected, &.list-item--selected .list-item__graphic { - background-color: rgba(var(--kup_list_primary_color_rgb), 0.175); - color: var(--kup_list_primary_color); + background-color: var(--kup_list_background_hover); + color: var(--kup-hover-color); } .list-item__text { @@ -192,7 +201,7 @@ &:not(.list-item--selected) { &:hover, &.list-item--focused { - background-color: var(--kup-hover-background-color); + background-color: var(--kup_list_background_hover); color: var(--kup-hover-color); } } @@ -208,8 +217,9 @@ .kup-menu { animation: fade-in 0.25s ease-out; - background-color: var(--kup-background-color); - box-shadow: var(--kup-box-shadow); + background-color: var(--kup_list_background); + box-shadow: var(--kup-box-shadow); // da sistemare + border: 1px solid var(--kup_list_focus_color); color: var(--kup-text-color); display: none; max-height: var(--kup_list_max_height_as_menu); @@ -227,6 +237,7 @@ .list-item__text { user-select: none; + @include kup-body-compact-01; } } diff --git a/packages/ketchup/src/managers/kup-dynamic-position/kup-dynamic-position.ts b/packages/ketchup/src/managers/kup-dynamic-position/kup-dynamic-position.ts index a4daab296d..df92acb35f 100644 --- a/packages/ketchup/src/managers/kup-dynamic-position/kup-dynamic-position.ts +++ b/packages/ketchup/src/managers/kup-dynamic-position/kup-dynamic-position.ts @@ -169,7 +169,7 @@ export class KupDynamicPosition { // When anchor doesn't have the tagName property, anchor is considered as a set of coordinates. if (!this.anchorIsHTMLElement(el.kupDynamicPosition.anchor)) { const x: number = el.kupDynamicPosition.anchor.x; - const y: number = el.kupDynamicPosition.anchor.y; + const y: number = el.kupDynamicPosition.anchor.y - 1; if ( el.offsetWidth > window.innerWidth - el.kupDynamicPosition.anchor.x @@ -224,7 +224,7 @@ export class KupDynamicPosition { el.kupDynamicPosition.placement === KupDynamicPositionPlacement.BOTTOM_RIGHT ) { - el.style.top = `${bottom + el.kupDynamicPosition.margin}px`; + el.style.top = `${bottom - 1 + el.kupDynamicPosition.margin}px`; } else { if ( offsetH < rect.top && @@ -234,7 +234,7 @@ export class KupDynamicPosition { window.innerHeight - top + el.kupDynamicPosition.margin }px`; } else { - el.style.top = `${bottom + el.kupDynamicPosition.margin}px`; + el.style.top = `${bottom - 1 + el.kupDynamicPosition.margin}px`; } } // Horizontal position From 725cef66242beb32117cef5f6600c01d6d1a8ebb Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Tue, 13 Feb 2024 12:19:42 +0100 Subject: [PATCH 09/10] f-text-field : minor fixes --- .../f-text-field/f-text-field.scss | 28 ++++++++++--------- .../f-text-field/f-text-field.tsx | 21 +++++++------- packages/ketchup/src/text-field.html | 7 +++-- 3 files changed, 30 insertions(+), 26 deletions(-) diff --git a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss index 3003c90250..3744ffc978 100644 --- a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss +++ b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss @@ -227,25 +227,25 @@ left: 36px; } - & .mdc-text-field__icon.#{$kup-icon-clear} { - right: 0px; - left: initial; - position: absolute; - top: 50%; - transform: translateY(-50%); - } + // & .mdc-text-field__icon.#{$kup-icon-clear} { + // right: 0px; + // left: initial; + // position: absolute; + // top: 50%; + // transform: translateY(-50%); + // } &.mdc-text-field--with-trailing-icon input ~ .#{$kup-icon-clear} { right: 26px; } - &.is-clearable .mdc-text-field__input { - padding-right: 48px; - } + // &.is-clearable .mdc-text-field__input { + // padding-right: 48px; + // } - &.mdc-text-field--with-trailing-icon.is-clearable .mdc-text-field__input { - padding-right: 72px; - } + // &.mdc-text-field--with-trailing-icon.is-clearable .mdc-text-field__input { + // padding-right: 72px; + // } &.mdc-text-field--fullwidth.mdc-text-field--focused { color: var(--kup_textfield_primary_color); @@ -441,6 +441,7 @@ .f-image .f-image__icon { --kup_image_height: 16px; --kup_image_width: 16px; + width: 16px; } .kup-icon { padding: unset; @@ -460,6 +461,7 @@ .f-image .f-image__icon { --kup_image_height: 16px; --kup_image_width: 16px; + width: 16px; } } diff --git a/packages/ketchup/src/f-components/f-text-field/f-text-field.tsx b/packages/ketchup/src/f-components/f-text-field/f-text-field.tsx index d5d47304be..835b16ec6b 100644 --- a/packages/ketchup/src/f-components/f-text-field/f-text-field.tsx +++ b/packages/ketchup/src/f-components/f-text-field/f-text-field.tsx @@ -27,7 +27,7 @@ export const FTextField: FunctionalComponent = ( 'kup-success': props.success, 'kup-warning': props.warning, [props.wrapperClass]: !!props.wrapperClass, - } + }; return (
)} - {props.isClearable ? ( - - ) : undefined} - {props.trailingIcon ? iconEl : undefined} {/* {isOutlined ? ( @@ -413,6 +403,15 @@ function setContent(props: FTextFieldProps): HTMLDivElement {
)} + {props.isClearable ? ( + + ) : undefined}
); diff --git a/packages/ketchup/src/text-field.html b/packages/ketchup/src/text-field.html index b52174cfe8..cfa9898338 100644 --- a/packages/ketchup/src/text-field.html +++ b/packages/ketchup/src/text-field.html @@ -179,12 +179,14 @@

Simple text field:

max-length="10" > Textarea text field: max-length="10" > Date: Tue, 13 Feb 2024 15:17:06 +0100 Subject: [PATCH 10/10] Code cleaning --- .../styles/kup-combobox-main.scss | 4 ---- .../kup-list/styles/kup-list-main.scss | 2 +- .../f-components/f-checkbox/f-checkbox.scss | 2 -- .../src/f-components/f-chip/f-chip.scss | 14 ----------- .../f-text-field/f-text-field.scss | 24 ------------------- 5 files changed, 1 insertion(+), 45 deletions(-) diff --git a/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-main.scss b/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-main.scss index 30af0cea4f..8cdb81f030 100644 --- a/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-main.scss +++ b/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-main.scss @@ -7,10 +7,6 @@ :host([is-select]) { #kup-component { transition: background-color 0.2s; - - // &:hover { - // background-color: rgba(var(--kup-text-color-rgb), 0.1); - // } } .mdc-text-field:not(.mdc-text-field--disabled) input { 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 ea7a96a2c9..8924439e51 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 @@ -218,7 +218,7 @@ .kup-menu { animation: fade-in 0.25s ease-out; background-color: var(--kup_list_background); - box-shadow: var(--kup-box-shadow); // da sistemare + box-shadow: var(--kup-box-shadow); // box shadow to be fixed border: 1px solid var(--kup_list_focus_color); color: var(--kup-text-color); display: none; diff --git a/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss b/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss index 8d3308dcbf..22377f59a4 100644 --- a/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss +++ b/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss @@ -162,7 +162,6 @@ &.checkbox--checked { .checkbox__background { background-color: var(--kup_checkbox_primary_color); - // border-color: var(--kup_checkbox_primary_color); opacity: 1; } @@ -174,7 +173,6 @@ &.checkbox--indeterminate { .checkbox__background { background-color: var(--kup_checkbox_primary_color); - // border-color: var(--kup_checkbox_primary_color); } .checkbox__mixedmark { diff --git a/packages/ketchup/src/f-components/f-chip/f-chip.scss b/packages/ketchup/src/f-components/f-chip/f-chip.scss index f7124a9aa4..1ab880053c 100644 --- a/packages/ketchup/src/f-components/f-chip/f-chip.scss +++ b/packages/ketchup/src/f-components/f-chip/f-chip.scss @@ -101,12 +101,6 @@ .chip { align-items: center; background-color: var(--kup_chip_background_color); - // background-image: linear-gradient( - // to right, - // rgba(var(--kup_chip_text_color_rgb), 0.1) 0%, - // rgba(var(--kup_chip_text_color_rgb), 0.1) 0.1%, - // rgba(var(--kup_chip_text_color_rgb), 0.1) - // ); border-radius: var(--kup_chip_border_radius); border: 1px solid transparent; box-sizing: border-box; @@ -197,12 +191,6 @@ &.chip-set--choice { .chip--selected { background-color: var(--kup_chip_background_color); - // background-image: linear-gradient( - // to right, - // rgba(var(--kup_chip_primary_color_rgb), 0.25) 0%, - // rgba(var(--kup_chip_primary_color_rgb), 0.25) 0.1%, - // rgba(var(--kup_chip_primary_color_rgb), 0.25) - // ); color: var(--kup_chip_gray_color); } } @@ -244,7 +232,6 @@ } .chip__checkmark { - // margin-left: -4px; margin-right: var(--kup-space-03); .chip__checkmark-svg { height: 20px; @@ -257,7 +244,6 @@ &.chip-set--input { .#{$kup-icon-clear} { margin-left: var(--kup-space-03); - // margin-right: -4px; &:hover { opacity: 0.75; } diff --git a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss index 3744ffc978..cab554e39e 100644 --- a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss +++ b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss @@ -227,26 +227,10 @@ left: 36px; } - // & .mdc-text-field__icon.#{$kup-icon-clear} { - // right: 0px; - // left: initial; - // position: absolute; - // top: 50%; - // transform: translateY(-50%); - // } - &.mdc-text-field--with-trailing-icon input ~ .#{$kup-icon-clear} { right: 26px; } - // &.is-clearable .mdc-text-field__input { - // padding-right: 48px; - // } - - // &.mdc-text-field--with-trailing-icon.is-clearable .mdc-text-field__input { - // padding-right: 72px; - // } - &.mdc-text-field--fullwidth.mdc-text-field--focused { color: var(--kup_textfield_primary_color); } @@ -512,8 +496,6 @@ width: 100%; .mdc-text-field { - // padding: 0 var(--kup_textfield_fullwidth_padding); - &.mdc-text-field--with-leading-icon { padding-left: 0; } @@ -529,21 +511,15 @@ } &.#{$kup-class-shaped} { - // .mdc-text-field.mdc-text-field--filled { - // border-radius: 16px 16px 0 0; - // } - .mdc-text-field.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading { - // border-radius: 28px 0 0 28px; width: 28px; } .mdc-text-field.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing { - // border-radius: 0 28px 28px 0; width: 28px; } }