Merge pull request #1736 from epam/bugfix/rc-5.2.0_fixPack-9Nov

themes fixPack
epam · Nov 10, 2023 · e50c267 · e50c267
2 parents d03f1aa + b2f63a4
commit e50c267
Show file tree

Hide file tree

Showing 12 changed files with 36 additions and 83 deletions.
diff --git 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<PickerBaseOptions<any, any>>(
             'Language', 'City', 'Role', 'Location', 'Person',
         ],
     })
-    .prop('entityPluralName', { examples: ['Cities'] })
-    .prop('renderRow', {
-        examples: (ctx) => [
-            {
-                name: 'UserPickerRow',
-                value: (props) => (
-                    <DataPickerRow
-                        { ...props }
-                        key={ props.rowKey }
-                        alignActions="center"
-                        padding={ (ctx.getSelectedProps() as any).editMode === 'modal' ? '24' : '12' }
-                        renderItem={ (item, rowProps) => <PickerItem { ...rowProps } avatarUrl={ item.avatarUrl } title={ item.name } subtitle={ item.jobTitle } /> }
-                    />
-                ),
-            }, {
-                name: 'Skills',
-                value: (rowProps) => {
-                    const isParent = !rowProps.value.parentId;
-                    return (
-                        <DataPickerRow
-                            { ...rowProps }
-                            depth={ isParent ? 0 : 1 }
-                            cx={ isParent && css.parent }
-                            isFoldable={ false }
-                            isChecked={ isParent ? false : rowProps.isChecked }
-                            isChildrenChecked={ false }
-                            isSelectable={ isParent ? false : rowProps.isSelectable }
-                            isFocused={ isParent ? false : rowProps.isFocused }
-                            borderBottom="none"
-                            size="36"
-                            renderItem={ (i) => <Text size="36">{i.name}</Text> }
-                        />
-                    );
-                },
-            },
-        ],
-    });
+    .prop('entityPluralName', { examples: ['Cities'] });
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<SliderBaseProps<number>, SliderMods>(UuiSlider, applySliderMods);
diff --git 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
@@ -2,7 +2,7 @@
 
 exports[`Slider should render with maximum props 1`] = `
 <div
-  className="uui-slider-container root root"
+  className="uui-slider-container root root uui-color-neutral"
   onClick={[Function]}
   onMouseDown={[Function]}
 >
@@ -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`] = `
 <div
-  className="uui-slider-container root root"
+  className="uui-slider-container root root uui-color-neutral"
   onClick={[Function]}
   onMouseDown={[Function]}
 >
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,24 +61,12 @@
             width: 8px;
             height: 8px;
         }
-
-        :global(.uui-status_indicator_caption) {
-            font-size: 14px;
-            font-weight: 400;
-            line-height: 18px;
-        }
     }
 
     &.size-24 {
         :global(.uui-status_indicator_dot) {
             width: 12px;
             height: 12px;
         }
-
-        :global(.uui-status_indicator_caption) {
-            font-size: 14px;
-            font-weight: 600;
-            line-height: 18px;
-        }
     }
 }