fix(ActionsPanel): correct styling of internal subcomponents (divider, badge, buttons) (DS-5174) (#385)

Author: KamilEmeleev

packages/components/src/components/ActionsPanel/components/ActionsPanelAction/ActionsPanelAction.module.css

@@ -1,15 +1,28 @@
-.base {
+/* [data-slot] bumps specificity over Button's own rules */
+.base[data-slot='action'] {
   flex-shrink: 0;
   margin-inline-start: var(--kbq-size-xxs);
   background-color: var(--kbq-background-transparent);
-}
 
-.base:first-child {
-  margin-inline-start: unset;
-}
+  &[data-hovered='true']:not([data-loading='true']) {
+    background-color: var(--kbq-states-background-contrast-hover);
+  }
+
+  &[data-pressed='true']:not([data-loading='true']) {
+    background-color: var(--kbq-states-background-contrast-active);
+  }
+
+  &[data-disabled='true'] {
+    background-color: var(--kbq-states-background-disabled);
+  }
+
+  &:first-child {
+    margin-inline-start: unset;
+  }
 
-.base[aria-hidden='true'] {
-  visibility: hidden;
-  position: absolute;
-  inset-inline-start: -300vw;
+  &[aria-hidden='true'] {
+    visibility: hidden;
+    position: absolute;
+    inset-inline-start: -300vw;
+  }
 }

packages/components/src/components/ActionsPanel/components/ActionsPanelAction/ActionsPanelAction.tsx

@@ -15,6 +15,7 @@ export const ActionsPanelAction = (props: ActionsPanelActionProps) => {
       ref={ref}
       data-slot="action"
       startIcon={icon}
+      variant="contrast-filled"
       className={clsx(s.base, className)}
       {...other}
     >

packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.module.css

@@ -1,9 +1,22 @@
 .base {
   display: flex;
-  margin-inline-start: auto;
   align-items: center;
+  margin-inline-start: auto;
 }
 
-.clearButton {
+/* [data-slot] bumps specificity over Button's own rules */
+.clearButton[data-slot='clear-button'] {
   background-color: var(--kbq-background-transparent);
+
+  &[data-hovered='true']:not([data-loading='true']) {
+    background-color: var(--kbq-states-background-contrast-hover);
+  }
+
+  &[data-pressed='true']:not([data-loading='true']) {
+    background-color: var(--kbq-states-background-contrast-active);
+  }
+
+  &[data-disabled='true'] {
+    background-color: var(--kbq-states-background-disabled);
+  }
 }

packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.tsx

@@ -26,7 +26,9 @@ export const ActionsPanelClearButton = ({
     <div className={clsx(s.base, className)} {...other}>
       <ActionsPanelDivider />
       <Button
+        data-slot="clear-button"
         className={s.clearButton}
+        variant="contrast-filled"
         aria-label={t.format('clear selection')}
         onPress={onClearSelection}
         startIcon={<IconCircleXmark16 />}

packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.module.css

@@ -2,6 +2,12 @@
   order: -1;
   display: flex;
   align-items: center;
+
+  /* extra-counter */
+  .extraCounter {
+    margin-inline-start: var(--kbq-size-xs);
+    color: inherit;
+  }
 }
 
 .base[aria-hidden='true'] {
@@ -22,9 +28,3 @@
   min-inline-size: 1ch;
   display: inline-block;
 }
-
-/* extra-counter */
-.extraCounter {
-  margin-inline-start: var(--kbq-size-xs);
-  color: inherit;
-}

packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.tsx

@@ -35,9 +35,9 @@ export const ActionsPanelCounter = ({
       <Typography
         as="div"
         className={s.text}
-        ellipsis
         color="on-contrast"
         variant="text-normal-medium"
+        ellipsis
       >
         {isAll ? (
           t.format('all selected')

packages/components/src/components/ActionsPanel/components/ActionsPanelDivider/ActionsPanelDivider.module.css

@@ -1,4 +1,5 @@
-.base {
+/* [data-slot] bumps specificity to override Divider's own --divider-color */
+.base[data-slot='divider'] {
   --divider-color: var(--actions-panel-vertical-divider-color);
 
   block-size: var(--kbq-size-m);

packages/components/src/components/ActionsPanel/components/ActionsPanelDivider/ActionsPanelDivider.tsx

@@ -12,6 +12,7 @@ export const ActionsPanelDivider = ({
   ...other
 }: ActionsPanelCounterProps) => (
   <Divider
+    data-slot="divider"
     orientation="vertical"
     className={clsx(s.base, className)}
     {...other}

packages/components/src/components/ActionsPanel/components/ActionsPanelMoreAction/ActionsPanelMoreAction.module.css

@@ -1,16 +1,30 @@
-.base {
+/* [data-slot] bumps specificity over Button's own rules */
+.base[data-slot='more-action'] {
   flex-shrink: 0;
   background-color: var(--kbq-background-transparent);
-}
 
-.base[aria-hidden='true'] {
-  visibility: hidden;
-  position: absolute;
-  inset-inline-start: -300vw;
-}
+  &[data-hovered='true']:not([data-loading='true']) {
+    background-color: var(--kbq-states-background-contrast-hover);
+  }
+
+  &[data-pressed='true']:not([data-loading='true']) {
+    background-color: var(--kbq-states-background-contrast-active);
+  }
+
+  &[data-disabled='true'] {
+    background-color: var(--kbq-states-background-disabled);
+  }
+
+  /* depends on Button's internal --button-bg-color-active */
+  &[aria-expanded='true'] {
+    background-color: var(--button-bg-color-active);
+  }
 
-.base[aria-expanded='true'] {
-  background-color: var(--button-bg-color-active);
+  &[aria-hidden='true'] {
+    visibility: hidden;
+    position: absolute;
+    inset-inline-start: -300vw;
+  }
 }
 
 /* menu-header-title */

packages/components/src/components/ActionsPanel/components/ActionsPanelMoreAction/ActionsPanelMoreAction.tsx

@@ -42,6 +42,7 @@ export const ActionsPanelMoreAction = (props: ActionsPanelMoreActionProps) => {
   }) => (
     <Button
       data-slot="more-action"
+      variant="contrast-filled"
       ref={mergeRefs(ref, controlRef)}
       aria-label={t.format('show more actions')}
       className={clsx(s.base, className)}