diff --git a/packages/ketchup/src/chip.html b/packages/ketchup/src/chip.html index 84d949c4f6..c9a5530256 100644 --- a/packages/ketchup/src/chip.html +++ b/packages/ketchup/src/chip.html @@ -33,31 +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/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; + /** + * 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 @@ -1082,6 +1092,11 @@ export namespace Components { "swatchOnly": boolean; } interface KupCombobox { + /** + * Set alert message + * @default ''' + */ + "alert": string; /** * Custom style of the component. * @default "" @@ -1100,6 +1115,11 @@ export namespace Components { * Sets how to show the selected item value. Suported values: "code", "description", "both". */ "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. @@ -1111,14 +1131,54 @@ 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 + */ + "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. */ @@ -1145,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; @@ -5888,6 +5958,16 @@ declare namespace LocalJSX { * Triggered when the removal icon on input chips is clicked. */ "onKup-chip-iconclick"?: (event: KupChipCustomEvent) => void; + /** + * 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 @@ -5924,6 +6004,11 @@ declare namespace LocalJSX { "swatchOnly"?: boolean; } interface KupCombobox { + /** + * Set alert message + * @default ''' + */ + "alert"?: string; /** * Custom style of the component. * @default "" @@ -5942,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; @@ -5957,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". */ @@ -5965,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-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/components/kup-chip/kup-chip.tsx b/packages/ketchup/src/components/kup-chip/kup-chip.tsx index c41b4f4816..efbf4fb710 100644 --- a/packages/ketchup/src/components/kup-chip/kup-chip.tsx +++ b/packages/ketchup/src/components/kup-chip/kup-chip.tsx @@ -17,7 +17,9 @@ import { } from '../../managers/kup-manager/kup-manager'; import { FChip } from '../../f-components/f-chip/f-chip'; import { + FChipSize, FChipsProps, + FChipStyling, FChipType, } from '../../f-components/f-chip/f-chip-declarations'; import { @@ -80,6 +82,16 @@ export class KupChip { * @default FChipType.STANDARD */ @Prop() type: FChipType = FChipType.STANDARD; + /** + * 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 */ @@ -356,9 +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/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..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 { @@ -29,6 +25,7 @@ .#{$kup-icon}.#{$kup-icon-dropdown} { -webkit-mask: var(--kup-dropdown-icon); mask: var(--kup-dropdown-icon); + order: 2; } .f-text-field { 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/components/kup-list/styles/kup-list-main.scss b/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss index 4d314e7faa..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 @@ -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); // box shadow to be fixed + 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/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) 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..22377f59a4 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,9 @@ } } - .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); opacity: 1; } @@ -178,7 +173,6 @@ &.checkbox--indeterminate { .checkbox__background { background-color: var(--kup_checkbox_primary_color); - border-color: var(--kup_checkbox_primary_color); } .checkbox__mixedmark { @@ -219,6 +213,9 @@ color: var(--kup_checkbox_disabled_checkmark_color); } } + .checkbox__error-message { + color: var(--kup-accent-red-color); + } } } 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..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,6 +11,9 @@ export interface FChipsProps extends FComponent { onExpansionClick?: ((chip: KupChipNode, e: PointerEvent) => void)[]; onFocus?: ((chip: KupChipNode, e: FocusEvent) => void)[]; onIconClick?: ((chip: KupChipNode, e: PointerEvent) => void)[]; + primary?: boolean; + sizing?: FChipSize; + styling?: FChipStyling; type?: FChipType; } /** @@ -27,3 +30,25 @@ 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. + * @enum {string} + * @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 + 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..1ab880053c 100644 --- a/packages/ketchup/src/f-components/f-chip/f-chip.scss +++ b/packages/ketchup/src/f-components/f-chip/f-chip.scss @@ -1,25 +1,37 @@ .f-chip { --kup_chip_background_color: var( --kup-chip-background-color, - var(--kup-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) ); - --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) + 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-text-color)); + --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) @@ -27,9 +39,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,17 +85,24 @@ ); } + &.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--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) - ); 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; @@ -98,8 +123,8 @@ color: var(--kup_chip_text_color); &:not(.chip__icon--leading-hidden) { - margin-left: -4px; - margin-right: 6px; + margin: var(--kup-space-00); + margin-right: var(--kup-space-03); } .chip__icon--trailing { @@ -124,6 +149,7 @@ } .f-image__icon { margin: auto; + background: var(--kup_chip_text_color); height: var(--kup_image_height, 100%); width: var(--kup_image_width, 100%); } @@ -150,8 +176,8 @@ .#{$kup-icon} { background: var(--kup_chip_text_color); display: block; - width: 18px; - height: 18px; + width: 16px; + height: 16px; } .chip__primary-action { @@ -165,13 +191,7 @@ &.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); + color: var(--kup_chip_gray_color); } } @@ -212,8 +232,7 @@ } .chip__checkmark { - margin-left: -4px; - margin-right: 4px; + margin-right: var(--kup-space-03); .chip__checkmark-svg { height: 20px; width: 20px; @@ -224,8 +243,7 @@ &.chip-set--input { .#{$kup-icon-clear} { - margin-left: 4px; - margin-right: -4px; + margin-left: var(--kup-space-03); &:hover { opacity: 0.75; } @@ -237,6 +255,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 2d3c356ffb..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,17 @@ 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, }; return ( @@ -39,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} @@ -96,8 +109,8 @@ function createChipList( : null } resource={`${KupThemeIconValues.DROPDOWN}`} - sizeX="18px" - sizeY="18px" + sizeX="16px" + sizeY="16px" title={ dom.ketchup.language.translate( KupLanguageGeneric.EXPAND @@ -113,8 +126,8 @@ function createChipList( ) : indent ? ( ) : null} @@ -151,11 +164,11 @@ function createChipList( const p: FImageProps = { color: isChoice && chip.checked - ? `var(${KupThemeColorValues.PRIMARY})` + ? `var(--kup_chip_primary_color)` : `var(${KupThemeColorValues.TEXT})`, resource: chip.icon, - sizeX: '18px', - sizeY: '18px', + sizeX: '16px', + sizeY: '16px', wrapperClass: iconClass, }; iconEl.push(); 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..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); } @@ -441,6 +425,7 @@ .f-image .f-image__icon { --kup_image_height: 16px; --kup_image_width: 16px; + width: 16px; } .kup-icon { padding: unset; @@ -460,6 +445,7 @@ .f-image .f-image__icon { --kup_image_height: 16px; --kup_image_width: 16px; + width: 16px; } } @@ -510,8 +496,6 @@ width: 100%; .mdc-text-field { - // padding: 0 var(--kup_textfield_fullwidth_padding); - &.mdc-text-field--with-leading-icon { padding-left: 0; } @@ -527,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; } } 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/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 diff --git a/packages/ketchup/src/managers/kup-theme/themes.json b/packages/ketchup/src/managers/kup-theme/themes.json index bdca572969..9a94cb124c 100644 --- a/packages/ketchup/src/managers/kup-theme/themes.json +++ b/packages/ketchup/src/managers/kup-theme/themes.json @@ -2,17 +2,18 @@ "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-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", @@ -77,7 +79,8 @@ "--kup-space-11": "80px", "--kup-space-12": "96px", "--kup-space-13": "160px", - "--kup-radius-00": "0px" + "--kup-radius-00": "0px", + "--kup-radius-100": "100px" }, "icons": { "--kup-ascending-icon": "arrow_drop_up", 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 // 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" >