move size grid theme to mixin & add to each theme, add setting file f…

…or sizes, fixed types for IconButton, IconContainer, Avatar
epam · May 27, 2024 · b4c23fe · b4c23fe
1 parent c3c4165
commit b4c23fe
Show file tree

Hide file tree

Showing 49 changed files with 513 additions and 352 deletions.
diff --git a/app/public/index.html b/app/public/index.html
@@ -33,7 +33,7 @@
         <script src='https://menu.epam.com/scripts/menu.js?app=uui3' async></script>
     <% } %>
 </head>
-<body class="uui-theme-promo uui-6px-grid">
+<body class="uui-theme-promo">
 <noscript>
     You need to enable JavaScript to run this app.
 </noscript>

diff --git a/app/src/common/AppHeader.tsx b/app/src/common/AppHeader.tsx
@@ -205,7 +205,7 @@ export function AppHeader() {
                         target="_blank"
                         href="https://forms.office.com/e/9iEvJUKdeM"
                     >
-                        <img height="60px" src="/static/survey_banner.png" alt="Take part in UUI survey" />
+                        <img width="172px" height="60px" src="/static/survey_banner.png" alt="Take part in UUI survey" />
                     </Anchor>
                 ),
             },

diff --git a/app/src/index.tsx b/app/src/index.tsx
@@ -18,7 +18,6 @@ import '@epam/internal/styles.css';
 import '@epam/assets/theme/theme_vanilla_thunder.scss';
 import '@epam/assets/theme/theme_loveship_dark.scss';
 import '@epam/assets/theme/theme_electric.scss';
-import '@epam/assets/theme/theme_6px.scss';
 import './index.module.scss';
 
 const router6 = createBrowserRouter([

diff --git a/epam-assets/theme/theme_6px.scss b/epam-assets/theme/theme_6px.scss
@@ -1,13 +1,25 @@
-.uui-6px-grid {
+@mixin uui-6px-grid {
     --uui-focus-outline-width: 2px;
     --uui-focus-outline-offset: 2px;
     --uui-focus-radius: 2px;
-    --uui-border-radius: 3px;
+    //--uui-border-radius: 3px; // TODO: ?????
     --uui-y-inner-padding: calc((var(--uui-size) - var(--uui-line-height) - (var(--uui-border-width) * 2)) / 2);
     --uui-tab-line-width: 3px;
     --uui-notify-size: 6px;
 
-    .uui-size-18, .uui-size-24.uui-picker-toggler .uui-tag.uui-size-inherit {
+
+    .uui-size-12 {
+        --uui-size: 12px;
+        --uui-border-width: 1px;
+        --uui-x-outer-padding: 6px;
+        --uui-x-inner-padding: 6px;
+        --uui-icon-size: 12px;
+        --uui-line-height: 12px;
+        --uui-font-size: 12px;
+
+    }
+
+    .uui-size-18 {
         --uui-size: 18px;
         --uui-border-width: 1px;
         --uui-x-outer-padding: 3px;
@@ -18,7 +30,7 @@
 
     }
 
-    .uui-size-24, .uui-size-30.uui-picker-toggler .uui-tag.uui-size-inherit {
+    .uui-size-24 {
         --uui-size: 24px;
         --uui-border-width: 1px;
         --uui-x-outer-padding: 6px;
@@ -29,7 +41,7 @@
         --uui-font-size: 12px;
     }
 
-    .uui-size-30, .uui-size-36.uui-picker-toggler .uui-tag.uui-size-inherit {
+    .uui-size-30 {
         --uui-size: 30px;
         --uui-border-width: 1px;
         --uui-x-outer-padding: 6px;
@@ -40,7 +52,7 @@
         --uui-font-size: 14px;
     }
 
-    .uui-size-36, .uui-size-42.uui-picker-toggler .uui-tag.uui-size-inherit {
+    .uui-size-36 {
         --uui-size: 36px;
         --uui-border-width: 1px;
         --uui-x-outer-padding: 6px;
@@ -51,7 +63,7 @@
         --uui-font-size: 14px;
     }
 
-    .uui-size-42, .uui-size-48.uui-picker-toggler .uui-tag.uui-size-inherit {
+    .uui-size-42 {
         --uui-size: 42px;
         --uui-border-width: 1px;
         --uui-x-outer-padding: 12px;
@@ -81,7 +93,7 @@
         --uui-y-outer-padding: 3px;
         --uui-icon-size: 24px;
         --uui-line-height: 24px;
-        --uui-font-size: 16px;
+        --uui-font-size: 20px;
     }
 
     .uui-input-box {
@@ -94,17 +106,20 @@
         }
     }
 
-    .uui-tab-button {
-        &.uui-size-36, &.uui-size-48, &.uui-size-60 {
-            --uui-x-outer-padding: 9px;
-            --uui-x-inner-padding: 3px;
-            --uui-icon-size: 18px;
-            --uui-line-height: 18px;
-            --uui-font-size: 14px;
-        }
+    .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {
+        --uui-x-outer-padding: 9px;
+        --uui-x-inner-padding: 3px;
+        --uui-icon-size: 18px;
+        --uui-line-height: 18px;
+        --uui-font-size: 14px;
     }
 
     .uui-tag {
+        &.uui-size-18 {
+            --uui-font-size: 12px;
+            --uui-line-height: 14px;
+        }
+
         &.uui-size-18,
         &.uui-size-24,
         &.uui-size-30,
@@ -117,20 +132,20 @@
         &.uui-size-30 {
             --uui-x-outer-padding: 3px;
         }
+
+        &.uui-size-42,
+        &.uui-size-48 {
+            --uui-x-outer-padding: 6px;
+        }
     }
 
-    .uui-size-24.uui-picker-toggler,
-    .uui-size-30.uui-picker-toggler,
-    .uui-size-36.uui-picker-toggler,
-    .uui-size-42.uui-picker-toggler {
+    .uui-picker-toggler:is(.uui-size-24, .uui-size-30, .uui-size-36, .uui-size-42) {
         .uui-tag.uui-size-inherit {
             --uui-x-inner-padding: 3px;
         }
     }
 
-    .uui-size-24.uui-picker-toggler,
-    .uui-size-30.uui-picker-toggler,
-    .uui-size-36.uui-picker-toggler {
+    .uui-picker-toggler:is(.uui-size-24, .uui-size-30, .uui-size-36) {
         .uui-tag.uui-size-inherit {
             --uui-x-outer-padding: 3px;
         }
@@ -141,4 +156,39 @@
             --uui-x-outer-padding: 6px;
         }
     }
+
+    .uui-checkbox-container {
+        &.uui-size-18 {
+            --uui-x-inner-padding: 12px;
+            --uui-line-height: 18px;
+            --uui-font-size: 14px;
+        }
+    }
+
+    .uui-switch {
+        &.uui-size-18 {
+            --uui-x-inner-padding: 12px;
+            --uui-line-height: 18px;
+            --uui-font-size: 14px;
+        }
+
+        &.uui-size-24 {
+            --uui-x-inner-padding: 12px;
+            --uui-line-height: 24px;
+            --uui-font-size: 16px;
+        }
+    }
+
+    .uui-picker-body:is(.uui-size-30, .uui-size-36) .uui-switch.uui-size-inherit {
+        --uui-x-inner-padding: 12px;
+        --uui-line-height: 18px;
+        --uui-font-size: 14px;
+
+    }
+
+    .uui-picker-body:is(.uui-size-42, .uui-size-48) .uui-switch.uui-size-inherit {
+        --uui-x-inner-padding: 12px;
+        --uui-line-height: 24px;
+        --uui-font-size: 16px;
+    }
 }
diff --git a/epam-assets/theme/theme_electric.scss b/epam-assets/theme/theme_electric.scss
@@ -1,4 +1,5 @@
 @use './tokens/_theme_electric.scss' as tokens;
+@use './theme_6px' as *;
 @import '../scss/electric/font-faces';
 
 /*  Name convention  */
@@ -537,5 +538,6 @@
 }
 
 .uui-theme-electric {
+    @include uui-6px-grid();
     @include theme-electric();
 }
diff --git a/epam-assets/theme/theme_loveship.scss b/epam-assets/theme/theme_loveship.scss
@@ -1,4 +1,5 @@
 @use '../scss/loveship/font-faces';
+@use './theme_6px' as *;
 @use './tokens/_theme_loveship.scss' as tokens;
 /*  Name convention  */
 /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
@@ -624,5 +625,6 @@
 }
 
 .uui-theme-loveship {
+    @include uui-6px-grid();
     @include theme-loveship();
 }
diff --git a/epam-assets/theme/theme_loveship_dark.scss b/epam-assets/theme/theme_loveship_dark.scss
@@ -1,4 +1,5 @@
 @use '../scss/loveship/font-faces';
+@use './theme_6px' as *;
 @use './tokens/_theme_loveship_dark.scss' as tokens;
 /*  Name convention  */
 /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
@@ -824,5 +825,6 @@
 }
 
 .uui-theme-loveship_dark {
+    @include uui-6px-grid();
     @include theme-loveship_dark();
 }
diff --git a/epam-assets/theme/theme_promo.scss b/epam-assets/theme/theme_promo.scss
@@ -1,4 +1,5 @@
 @use '../scss/promo/font-faces';
+@use './theme_6px' as *;
 @use './tokens/_theme_promo.scss' as tokens;
 /*  Name convention  */
 /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
@@ -636,6 +637,7 @@
 }
 
 .uui-theme-promo {
+    @include uui-6px-grid();
     @include theme-promo();
 }
 
diff --git a/epam-assets/theme/theme_vanilla_thunder.scss b/epam-assets/theme/theme_vanilla_thunder.scss
@@ -1,6 +1,9 @@
+@use './theme_6px' as *;
+
 /*  Name convention  */
 /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
 .uui-theme-vanilla_thunder {
+    @include uui-6px-grid();
     --uui-font: var(--font-inter);
     --uui-font-mono: 'Roboto Mono', monospace;
 
@@ -478,4 +481,4 @@
             }
         }
     }
-}
+}
diff --git a/uui-components/src/buttons/IconButton.tsx b/uui-components/src/buttons/IconButton.tsx
@@ -12,25 +12,24 @@ export type IconButtonProps = ClickableComponentProps & Omit<IDropdownToggler, '
     /**
      * Defines component size.
      */
-    size?: number;
+    size?: number | string;
     /**
      * Pass true to enable dropdown icon.
      */
     showDropdownIcon?: boolean;
 };
 
 export const IconButton = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, IconButtonProps>((props, ref) => {
-    const size = props.size && Number(props.size);
     return (
         <Clickable
             { ...props }
             type="button"
             cx={ [css.container, props.cx] }
             ref={ ref }
         >
-            <IconContainer icon={ props.icon } size={ size } />
+            <IconContainer icon={ props.icon } size={ props.size } />
             { props.showDropdownIcon && (
-                <IconContainer icon={ props.dropdownIcon } flipY={ props.isOpen } size={ size } />
+                <IconContainer icon={ props.dropdownIcon } flipY={ props.isOpen } size={ props.size } />
             ) }
         </Clickable>
     );

diff --git a/uui-components/src/layout/IconContainer.tsx b/uui-components/src/layout/IconContainer.tsx
@@ -17,7 +17,7 @@ export interface ControlIconProps extends IHasCX, IDisableable, IHasRawProps<Rea
     /** CSS style prop to put on the component */
     style?: React.CSSProperties;
     /** Icon size in pixels (both width and height, as icons are assumed to be square-shaped) */
-    size?: number;
+    size?: number | string;
 }
 
 export const IconContainer = React.forwardRef<HTMLDivElement, ControlIconProps>((props, ref) => {

diff --git a/uui-components/src/widgets/Avatar.tsx b/uui-components/src/widgets/Avatar.tsx
@@ -38,15 +38,13 @@ function AvatarComponent(props: AvatarProps, ref: React.ForwardedRef<HTMLImageEl
         }
     }
 
-    const size = typeof props.size === 'number' ? props.size.toString() : props.size;
-
     return (
         <img
             onClick={ props.onClick }
             ref={ ref }
             className={ cx(css.avatar, props.cx) }
-            width={ size }
-            height={ size }
+            width={ props.size }
+            height={ props.size }
             src={
                 props.isLoading || !props.img || isError
                     ? 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/icons/avatar_placeholder.svg'

diff --git a/uui/components/buttons/Button.tsx b/uui/components/buttons/Button.tsx
@@ -2,16 +2,15 @@ import * as uuiComponents from '@epam/uui-components';
 import { devLogger, withMods } from '@epam/uui-core';
 import { ControlSize } from '../types';
 import { systemIcons } from '../../icons/icons';
+import { settings } from '../../settings';
 import css from './Button.module.scss';
 
-const DEFAULT_SIZE = '36';
-
 type ButtonMods = {
     /**
      * Defines component size.
      * @default '36'
      */
-    size?: ControlSize | '18' | 'inherit';
+    size?: ControlSize | '18';
     /**
      * Defines component fill style.
      * @default 'solid'
@@ -36,7 +35,7 @@ function applyButtonMods(mods: ButtonProps) {
         'uui-button',
         `uui-fill-${mods.fill || 'solid'}`,
         `uui-color-${mods.color || 'primary'}`,
-        `uui-size-${mods.size || DEFAULT_SIZE}`,
+        `uui-size-${mods.size || settings.sizes.defaults.button}`,
     ];
 }
 

diff --git a/uui/components/buttons/IconButton.tsx b/uui/components/buttons/IconButton.tsx
@@ -31,7 +31,6 @@ export const IconButton = createSkinComponent<uuiComponents.IconButtonProps, Ico
     (props) => {
         return {
             dropdownIcon: props.dropdownIcon || systemIcons.foldingArrow,
-            size: props.size && Number(props.size),
         };
     },
     applyIconButtonMods,