diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.scss b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.scss index 167e278ec0..a800125416 100644 --- 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 index 456c635582..10e45abbdf 100644 --- 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; @@ -56,12 +57,16 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => { const prepareItems = React.useCallback((tableColumnItems: TableColumnSetupItem[]) => { return tableColumnItems.map((tableColumnItem) => { + const hasSelectionIcon = tableColumnItem.isRequired === false; + return { ...tableColumnItem, startSlot: tableColumnItem.isRequired ? : 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 index 7e1af9eba4..90be600114 100644 --- 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),