chore: add override bg color

gravity-ui · Feb 9, 2024 · 0c3ab33 · 0c3ab33
1 parent 30ce055
commit 0c3ab33
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.scss b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.scss
@@ -6,4 +6,15 @@ $block: '.#{variables.$ns}table-column-setup';
     &__apply {
         margin: 4px 4px 0;
     }
+
+    // to override this https://github.com/gravity-ui/uikit/blob/main/src/components/useList/components/ListItemView/ListItemView.scss#L16
+    &__required-item {
+        background: inherit;
+
+        &:hover {
+            /* stylelint-disable declaration-no-important */
+            background: var(--g-color-base-simple-hover-solid) !important;
+            /* stylelint-enable declaration-no-important */
+        }
+    }
 }
diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
@@ -23,6 +23,7 @@ import './TableColumnSetup.scss';
 const b = block('table-column-setup');
 const tableColumnSetupCn = b(null);
 const applyButtonCn = b('apply');
+const requiredDndItemCn = b('required-item');
 
 interface SwitcherProps {
     onKeyDown: React.KeyboardEventHandler<HTMLElement>;
@@ -56,12 +57,16 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
 
     const prepareItems = React.useCallback((tableColumnItems: TableColumnSetupItem[]) => {
         return tableColumnItems.map<Item>((tableColumnItem) => {
+            const hasSelectionIcon = tableColumnItem.isRequired === false;
+
             return {
                 ...tableColumnItem,
                 startSlot: tableColumnItem.isRequired ? <Icon data={Lock} /> : undefined,
-                hasSelectionIcon: tableColumnItem.isRequired === false,
-                hasSelectionBackground: false,
                 isDragDisabled: sortable === false,
+                hasSelectionIcon,
+
+                // to overwrite select bacground effect - https://github.com/gravity-ui/uikit/blob/main/src/components/useList/components/ListItemView/ListItemView.tsx#L125
+                className: hasSelectionIcon ? undefined : requiredDndItemCn,
             };
         });
     }, []);

diff --git a/src/components/useList/components/ListItemView/ListItemView.tsx b/src/components/useList/components/ListItemView/ListItemView.tsx
@@ -36,10 +36,6 @@ export interface ListItemViewProps extends QAProps {
      * Build in indentation component to render nested views structure
      */
     indentation?: number;
-    /**
-     * Show selected background if selected
-     */
-    hasSelectionBackground?: boolean;
     /**
      * Show selected icon if selected and reserve space for this icon
      */
@@ -101,7 +97,6 @@ export const ListItemView = React.forwardRef(
             activeOnHover = true,
             className,
             hasSelectionIcon = true,
-            hasSelectionBackground = true,
             indentation,
             startSlot,
             subtitle,
@@ -127,7 +122,7 @@ export const ListItemView = React.forwardRef(
                 className={b(
                     {
                         active,
-                        selected: selected && hasSelectionBackground && !hasSelectionIcon,
+                        selected: selected && !hasSelectionIcon,
                         activeOnHover,
                         radius: size,
                         clickable: Boolean(onClick),