From c635fa7f786afb5665cc673904acf482857f4fca Mon Sep 17 00:00:00 2001 From: IhorKorenets Date: Thu, 9 Nov 2023 17:49:17 +0200 Subject: [PATCH 1/2] [PickerInput]: fixed uui PE, [Switch]: fixed colors, [DatePicker]: fixed selected year/month bg color, [RangeDatePicker]: fixed error border color, [Slider]: fixed tooltip & caption colors, [Switch]: fixed toggler and border colors, [ProgressBar]: fixed border-radius, [StatusIndicator]: fixed 24size font-weight. --- .../_props/uui/components/pickers/common.tsx | 47 +------------------ epam-assets/theme/theme_loveship_dark.scss | 6 --- .../datePickers/DatePickerBody.module.scss | 4 +- .../datePickers/RangeDatePicker.module.scss | 8 +++- uui/components/inputs/Slider.module.scss | 19 ++++---- uui/components/inputs/Slider.tsx | 2 +- uui/components/inputs/Switch.module.scss | 4 +- .../__snapshots__/Slider.test.tsx.snap | 8 ++-- .../pickers/DataPickerRow.module.scss | 2 +- .../widgets/IndeterminateBar.module.scss | 3 ++ .../widgets/ProgressBar.module.scss | 2 + .../widgets/StatusIndicator.module.scss | 16 ++----- 12 files changed, 37 insertions(+), 84 deletions(-) diff --git a/app/src/docs/_props/uui/components/pickers/common.tsx b/app/src/docs/_props/uui/components/pickers/common.tsx index d5452fdd7a..6f0d33f137 100644 --- a/app/src/docs/_props/uui/components/pickers/common.tsx +++ b/app/src/docs/_props/uui/components/pickers/common.tsx @@ -1,13 +1,6 @@ -import * as React from 'react'; -import { - ArrayDataSource, LazyDataSource, AsyncDataSource, PickerBaseOptions, -} from '@epam/uui-core'; +import { ArrayDataSource, LazyDataSource, AsyncDataSource, PickerBaseOptions } from '@epam/uui-core'; import { DocBuilder, PropSamplesCreationContext } from '@epam/uui-docs'; -import { Text } from '@epam/uui'; -import { DataPickerRow } from '@epam/uui'; import { demoData } from '@epam/uui-docs'; -import { PickerItem } from '@epam/uui'; -import css from './DataPickerRowDoc.module.scss'; const dataSourcesMap: any = { languages: null, @@ -103,40 +96,4 @@ export const pickerBaseOptionsDoc = new DocBuilder>( 'Language', 'City', 'Role', 'Location', 'Person', ], }) - .prop('entityPluralName', { examples: ['Cities'] }) - .prop('renderRow', { - examples: (ctx) => [ - { - name: 'UserPickerRow', - value: (props) => ( - } - /> - ), - }, { - name: 'Skills', - value: (rowProps) => { - const isParent = !rowProps.value.parentId; - return ( - {i.name} } - /> - ); - }, - }, - ], - }); + .prop('entityPluralName', { examples: ['Cities'] }); diff --git a/epam-assets/theme/theme_loveship_dark.scss b/epam-assets/theme/theme_loveship_dark.scss index 9f7e5d5a1a..fa715da347 100644 --- a/epam-assets/theme/theme_loveship_dark.scss +++ b/epam-assets/theme/theme_loveship_dark.scss @@ -535,12 +535,6 @@ } } - .uui-switch { - --uui-switch-bg: var(--uui-neutral-40); - --uui-switch-bg-hover: var(--uui-neutral-50); - --uui-switch-border-hover: var(--uui-neutral-50); - } - .uui-blocker-container { --uui-blocker-bg: var(--uui-surface-main); --uui-blocker-bg-with-opacity: #303240CC; diff --git a/uui/components/datePickers/DatePickerBody.module.scss b/uui/components/datePickers/DatePickerBody.module.scss index a9b09f661c..38cb1c37b9 100644 --- a/uui/components/datePickers/DatePickerBody.module.scss +++ b/uui/components/datePickers/DatePickerBody.module.scss @@ -2,9 +2,9 @@ .root { --uui-dtp_body-title-bg: var(--uui-control-bg); - --uui-dtp_body-bg-selected: var(--uui-control-border-checked); + --uui-dtp_body-bg-selected: var(--uui-primary-50); --uui-dtp_body-text: var(--uui-control-text); - --uui-dtp_body-text-hovered: var(--uui-control-border-checked); + --uui-dtp_body-text-hovered: var(--uui-primary-50); --uui-dtp_body-text-selected: var(--uui-neutral-0); --uui-dtp_body-content-font: var(--uui-font); diff --git a/uui/components/datePickers/RangeDatePicker.module.scss b/uui/components/datePickers/RangeDatePicker.module.scss index 6ce4409426..1ec433b873 100644 --- a/uui/components/datePickers/RangeDatePicker.module.scss +++ b/uui/components/datePickers/RangeDatePicker.module.scss @@ -63,7 +63,7 @@ } } - &:global(.uui-focus) { + &:global(.uui-focus):not(:global(.uui-invalid)) { border-color: var(--uui-control-border); .separator { @@ -92,6 +92,10 @@ } &:global(.uui-invalid) { - border-color: var(--uui-text-input-border-error); + border-color: var(--uui-error-50); + + .separator { + background: var(--uui-error-50); + } } } diff --git a/uui/components/inputs/Slider.module.scss b/uui/components/inputs/Slider.module.scss index a3cebeed2a..36269509c1 100644 --- a/uui/components/inputs/Slider.module.scss +++ b/uui/components/inputs/Slider.module.scss @@ -1,13 +1,16 @@ .root { + --uui-slider-tooltip-bg: var(--uui-color-70); + --uui-slider-font: var(--uui-font); + :global(.uui-tooltip-body) { - background-color: var(--uui-neutral-70); + background-color: var(--uui-slider-tooltip-bg); padding: 0 10px; color: white; line-height: 24px; font-size: 14px; - font-family: var(--uui-font); + font-family: var(--uui-slider-font); font-weight: 400; - box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2); + box-shadow: var(--uui-shadow-level-1); } :global(.uui-tooltip-arrow) { @@ -16,9 +19,9 @@ :global(.uui-slider-scale-number) { font-size: 11px; - font-family: var(--uui-font); + font-family: var(--uui-slider-font); font-weight: 400; - color: var(--uui-neutral-70); + color: var(--uui-text-primary); margin-top: 10px; } @@ -67,12 +70,12 @@ &:hover { :global(.uui-slider) { - background-color: var(--uui-primary-50); + background-color: var(--uui-primary-20); } :global(.uui-slider-scale-dot):not(:global(.uui-slider-scale-filled-dot)) { - border-color: var(--uui-primary-50); - background-color: var(--uui-primary-50); + border-color: var(--uui-primary-20); + background-color: var(--uui-primary-20); } } diff --git a/uui/components/inputs/Slider.tsx b/uui/components/inputs/Slider.tsx index 35143466d9..445539e36c 100644 --- a/uui/components/inputs/Slider.tsx +++ b/uui/components/inputs/Slider.tsx @@ -5,7 +5,7 @@ import { withMods } from '@epam/uui-core'; export interface SliderMods {} export function applySliderMods() { - return [css.root]; + return [css.root, 'uui-color-neutral']; } export const Slider = withMods, SliderMods>(UuiSlider, applySliderMods); diff --git a/uui/components/inputs/Switch.module.scss b/uui/components/inputs/Switch.module.scss index 6075015d39..f8ed69a0a2 100644 --- a/uui/components/inputs/Switch.module.scss +++ b/uui/components/inputs/Switch.module.scss @@ -36,14 +36,14 @@ --uui-switch-bg-checked-hover: var(--uui-color-60); --uui-switch-bg-checked-disabled: var(--uui-color-20); --uui-switch-border: var(--uui-control-border); - --uui-switch-border-hover: var(--uui-neutral-40); + --uui-switch-border-hover: var(--uui-control-bg-hover); --uui-switch-border-checked: var(--uui-color-50); --uui-switch-border-disabled: var(--uui-control-border-disabled); --uui-switch-border-checked-hover: var(--uui-color-60); --uui-switch-border-checked-disabled: var(--uui-color-20); --uui-switch-label: var(--uui-control-label); --uui-switch-label-disabled: var(--uui-control-label-disabled); - --uui-switch-toggler-bg: var(--uui-surface-main); + --uui-switch-toggler-bg: var(--uui-neutral-0); --uui-switch-toggler-bg-disabled: var(--uui-control-bg-disabled); --uui-switch-toggler-border-checked: var(--uui-color-50); --uui-switch-toggler-border-hover: var(--uui-control-bg-hover); diff --git a/uui/components/inputs/__tests__/__snapshots__/Slider.test.tsx.snap b/uui/components/inputs/__tests__/__snapshots__/Slider.test.tsx.snap index 1e267622f5..d5d6953c10 100644 --- a/uui/components/inputs/__tests__/__snapshots__/Slider.test.tsx.snap +++ b/uui/components/inputs/__tests__/__snapshots__/Slider.test.tsx.snap @@ -2,7 +2,7 @@ exports[`Slider should render with maximum props 1`] = `
@@ -61,7 +61,7 @@ exports[`Slider should render with maximum props 1`] = ` aria-valuemax={50} aria-valuemin={0} aria-valuenow={null} - className="uui-slider-handle root" + className="uui-slider-handle root uui-color-neutral" onBlur={[Function]} onFocus={[Function]} onKeyDown={[Function]} @@ -80,7 +80,7 @@ exports[`Slider should render with maximum props 1`] = ` exports[`Slider should render with minimum props 1`] = `
@@ -139,7 +139,7 @@ exports[`Slider should render with minimum props 1`] = ` aria-valuemax={50} aria-valuemin={0} aria-valuenow={null} - className="uui-slider-handle root" + className="uui-slider-handle root uui-color-neutral" onBlur={[Function]} onFocus={[Function]} onKeyDown={[Function]} diff --git a/uui/components/pickers/DataPickerRow.module.scss b/uui/components/pickers/DataPickerRow.module.scss index 9715cd632e..de975b73cf 100644 --- a/uui/components/pickers/DataPickerRow.module.scss +++ b/uui/components/pickers/DataPickerRow.module.scss @@ -13,7 +13,7 @@ .picker-row { &:global(.uui-focus) { - background-color: var(--uui-surface-highest); + background-color: var(--uui-surface-higher); } &:global(.-clickable) { diff --git a/uui/components/widgets/IndeterminateBar.module.scss b/uui/components/widgets/IndeterminateBar.module.scss index ec73f4f771..2058e9e546 100644 --- a/uui/components/widgets/IndeterminateBar.module.scss +++ b/uui/components/widgets/IndeterminateBar.module.scss @@ -1,9 +1,12 @@ .root { --uui-indeterminate_bar-wrapper: var(--uui-secondary-20); --uui-indeterminate_bar-background: var(--uui-primary-50); + --uui-indeterminate_bar-border-radius: var(--uui-border-radius); // position: relative; background-color: var(--uui-indeterminate_bar-wrapper); + border-radius: var(--uui-indeterminate_bar-border-radius); + overflow: hidden; .bar { background-color: var(--uui-indeterminate_bar-background); diff --git a/uui/components/widgets/ProgressBar.module.scss b/uui/components/widgets/ProgressBar.module.scss index 2970085662..cf61698bd7 100644 --- a/uui/components/widgets/ProgressBar.module.scss +++ b/uui/components/widgets/ProgressBar.module.scss @@ -9,6 +9,7 @@ --uui-progress_bar-background: var(--uui-primary-50); --uui-progress_bar-label: var(--uui-neutral-0); --uui-progress_bar-top-label: var(--uui-neutral-80); + --uui-progress_bar-border-radius: var(--uui-border-radius); --uui-progress_bar-font: var(--uui-font); --uui-progress_bar-font-weight: 400; @@ -17,6 +18,7 @@ font-family: var(--uui-progress_bar-font); font-weight: var(--uui-progress_bar-font-weight); color: var(--uui-progress_bar-label); + border-radius: var(--uui-progress_bar-border-radius); :global(.bar) { background-color: var(--uui-progress_bar-background); diff --git a/uui/components/widgets/StatusIndicator.module.scss b/uui/components/widgets/StatusIndicator.module.scss index e41dfea947..51d9afbe1f 100644 --- a/uui/components/widgets/StatusIndicator.module.scss +++ b/uui/components/widgets/StatusIndicator.module.scss @@ -18,6 +18,9 @@ padding: 0; margin: 0; font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 18px; } &:global(.uui-color-neutral) { @@ -49,7 +52,6 @@ :global(.uui-status_indicator_caption) { font-size: 12px; - font-weight: 400; line-height: 12px; } } @@ -59,12 +61,6 @@ width: 8px; height: 8px; } - - :global(.uui-status_indicator_caption) { - font-size: 14px; - font-weight: 400; - line-height: 18px; - } } &.size-24 { @@ -72,11 +68,5 @@ width: 12px; height: 12px; } - - :global(.uui-status_indicator_caption) { - font-size: 14px; - font-weight: 600; - line-height: 18px; - } } } From b2f63a4cf29ebd2c8843fda9b4f3e1b2e710c97c Mon Sep 17 00:00:00 2001 From: IhorKorenets Date: Fri, 10 Nov 2023 07:20:24 +0200 Subject: [PATCH 2/2] [RangeDatePicker]: restored focus to invalid state --- uui/components/datePickers/RangeDatePicker.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/uui/components/datePickers/RangeDatePicker.module.scss b/uui/components/datePickers/RangeDatePicker.module.scss index 1ec433b873..21da9973e1 100644 --- a/uui/components/datePickers/RangeDatePicker.module.scss +++ b/uui/components/datePickers/RangeDatePicker.module.scss @@ -63,7 +63,7 @@ } } - &:global(.uui-focus):not(:global(.uui-invalid)) { + &:global(.uui-focus) { border-color: var(--uui-control-border); .separator {