refactor(EuiButtonGroup): update the disabled behavior to ensure a background/fill for selected buttons

Author: mgadewoll

packages/eui/src/components/button/button_context.tsx

@@ -31,7 +31,10 @@ export const EuiButtonContext = createContext<{
    * Set by `EuiButtonGroup` with `variant="selection"` to resolve per-button
    * selected state and its derived display props.
    */
-  getSelectionProps?: (id: string) => {
+  getSelectionProps?: (
+    id: string,
+    isDisabled?: boolean
+  ) => {
     isSelected: boolean;
     fill: boolean;
     display?: 'fill' | 'base';

packages/eui/src/components/button/button_group/button_group.styles.ts

@@ -263,8 +263,10 @@ export const euiButtonGroupButtonsStyles = (euiThemeContext: UseEuiTheme) => {
 
         ${segmentedChildrenStyles}
 
-        *:where(.euiButton, .euiButtonIcon):is(${euiDisabledSelector}) {
-          background-color: transparent;
+        *:where(.euiButton, .euiButtonIcon) {
+          &:where(:is(${euiDisabledSelector}):not([aria-pressed='true'])) {
+            background-color: transparent;
+          }
         }
 
         &:where([data-dividers='true'] &) {
@@ -316,20 +318,22 @@ export const euiButtonGroupButtonsStyles = (euiThemeContext: UseEuiTheme) => {
 
       &:where([data-variant='selection'][data-display='regular'] &) {
         *:where(.euiButton, .euiButtonIcon):is([aria-pressed='true']) {
-          background-color: ${euiTheme.colors.backgroundLightText};
+          &:not(:is(${euiDisabledSelector})) {
+            background-color: ${euiTheme.colors.backgroundLightText};
 
-          ${highContrastModeStyles(euiThemeContext, {
-            none: `
-              background-color: ${euiTheme.colors.backgroundLightText};
-            `,
-            preferred: `
-              border: ${euiTheme.border.thin};
-            `,
-            forced: `
-              background-color: ${euiTheme.colors.fullShade};
-              border: none;
-            `,
-          })}
+            ${highContrastModeStyles(euiThemeContext, {
+              none: `
+                background-color: ${euiTheme.colors.backgroundLightText};
+              `,
+              preferred: `
+                border: ${euiTheme.border.thin};
+              `,
+              forced: `
+                background-color: ${euiTheme.colors.fullShade};
+                border: none;
+              `,
+            })}
+          }
         }
       }
 
@@ -343,6 +347,10 @@ export const euiButtonGroupButtonsStyles = (euiThemeContext: UseEuiTheme) => {
             `,
           })}
         }
+
+        *:where(.euiButton, .euiButtonIcon):is(${euiDisabledSelector}) {
+          background-color: transparent;
+        }
       }
     `,
     noWrap: css`
@@ -454,7 +462,7 @@ const _highContrastStyles = (euiThemeContext: UseEuiTheme) => {
         color: ${euiTheme.colors.emptyShade};
         background-color: ${euiTheme.colors.fullShade};
 
-        &:is(:hover, :focus):not(${euiDisabledSelector}) {
+        &:is(:hover, :focus):not(:is(${euiDisabledSelector})) {
           &::before {
             border-color: ${euiTheme.colors.textInverse};
           }

packages/eui/src/components/button/button_group/button_group.tsx

@@ -468,10 +468,12 @@ export const EuiButtonGroupChildren: FunctionComponent<ChildrenModeProps> = ({
         fill: false,
       }),
       ...(isSelection && {
-        getSelectionProps: (id: string) => {
+        getSelectionProps: (id: string, _isDisabled?: boolean) => {
           const selected = isSelected(id);
           const isInverse = display === 'inverse';
-          const hasFill = selected && display === 'highlighted';
+          const hasFill =
+            (selected && display === 'highlighted') ||
+            !!(selected && _isDisabled);
 
           return {
             isSelected: selected,

packages/eui/src/components/button/use_button_common_props.ts

@@ -89,7 +89,7 @@ export function useEuiButtonCommonProps<
   });
 
   const selectionProps =
-    id != null ? groupContext.getSelectionProps?.(id) : undefined;
+    id != null ? groupContext.getSelectionProps?.(id, isDisabled) : undefined;
 
   const onClick = selectionProps
     ? (event: React.MouseEvent<HTMLElement>) => {