[Breaking change]: reworked vertical padding props for ModalHeader, M…

…odalFooter. Added global classes to PickerInput. Reworked PickerInput body ui. Fixed 'Filtered Table' demo
epam · Mar 5, 2025 · c8b2c8f · c8b2c8f
1 parent 32a09f5
commit c8b2c8f
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
diff --git a/.github/workflows/qa.yml b/.github/workflows/qa.yml
@@ -3,7 +3,7 @@ name: qa
 # Controls when the action will run.
 on:
     push:
-        branches: [ feature/4px-grid-for-uui ]
+        branches: [ feature/icons-for-theming ]
     # Allows you to run this workflow manually from the Actions tab
     workflow_dispatch:
 

diff --git a/app/src/demo/tables/filteredTable/filters.tsx b/app/src/demo/tables/filteredTable/filters.tsx
@@ -16,11 +16,9 @@ export const getFilters = (): TableFiltersConfig<Person>[] => {
             renderRow: (props) => (
                 <DataPickerRow
                     { ...props }
-                    padding="12"
-                    size="36"
                     alignItems="center"
                     key={ props.rowKey }
-                    renderItem={ (item: any) => <FlexRow size="36"><Badge size="24" fill="outline" indicator color={ item.name.toLowerCase() as BadgeProps['color'] } caption={ item.name } /></FlexRow> }
+                    renderItem={ (item: any) => <FlexRow><Badge size="24" fill="outline" indicator color={ item.name.toLowerCase() as BadgeProps['color'] } caption={ item.name } /></FlexRow> }
                 />
             ),
             predicates: defaultPredicates.multiPicker,
@@ -35,8 +33,6 @@ export const getFilters = (): TableFiltersConfig<Person>[] => {
             renderRow: (props, dataSourceState) => (
                 <DataPickerRow
                     { ...props }
-                    size="36"
-                    padding="12"
                     key={ props.rowKey }
                     renderItem={ (item: Country, rowProps) => (
                         <PickerItem

diff --git a/epam-assets/theme/variables/fresh_4px.scss b/epam-assets/theme/variables/fresh_4px.scss
@@ -575,4 +575,29 @@
             font-weight: 700;
         }
     }
+
+    .uui-picker_input-body-search {
+        --uui-data_picker_body-search-padding: 12px;
+    }
+
+    .uui-picker_input-row {
+        margin: 0 12px;
+        border-radius: 4px;
+    }
+
+    [aria-selected='true'], [aria-selected='true'].uui-focus {
+        background-color: var(--uui-primary-60);
+
+        .uui-picker_input-item {
+            .uui-text.uui-typography-inline {
+                &.uui-color-primary, &.uui-color-secondary {
+                    --uui-text: var(--uui-neutral-0);
+                }
+            }
+        }
+
+        .uui-picker_input-cell-select_icon {
+            display: none;
+        }
+    }
 }
diff --git a/uui/components/pickers/DataPickerCell.tsx b/uui/components/pickers/DataPickerCell.tsx
@@ -39,7 +39,7 @@ export function DataPickerCell<TItem, TId>(props: DataPickerCellProps<TItem, TId
                 {props.renderItem(props.rowProps.value, props.rowProps)}
                 <FlexSpacer />
                 {(props.rowProps.isChildrenSelected || props.rowProps.isSelected) && (
-                    <div className={ cx(css.iconWrapper, uuiMod.selected) }>
+                    <div className={ cx(css.iconWrapper, 'uui-picker_input-cell-select_icon', uuiMod.selected) }>
                         <IconContainer
                             size={ settings.pickerInput.sizes.body.selectIconMap[props.size] }
                             icon={ SelectIcon }