[EuiFilterGroup][EuiFilterButton] Implement redesign

packages/eui/changelogs/upcoming/9953.md

@@ -1,5 +1,4 @@
 - Updated styles on `EuiButtonGroup` with legacy Options API
-- Updated styles of `EuiFilterGroup` and `EuiFilterButton` to align with `EuiButtonGroup`
 - Updated usages of `EuiButtonGroup` in `EuiDataGrid`'s display selector and column sorting to use the Children API
 - Updated `EuiSuperDatePicker`'s time window buttons to use `EuiButtonGroup` with Children API
 

packages/eui/changelogs/upcoming/9961.md

@@ -0,0 +1,5 @@
+- Updated styles of `EuiFilterButton`
+- Updated `EuiFilterGroup`
+    - Updated styles
+    - Added `display` prop (values: `'regular' | 'highlighted'`) to render different visual toggle variants
+    - Added `showDividers` prop to optionally render dividers between group children

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>) => {

packages/eui/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap

@@ -2,77 +2,62 @@
 
 exports[`EuiFilterButton does not render a badge or count if numFilters is not passed 1`] = `
 <div
-  class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+  class="euiFilterButton__wrapper css-1bvxi87-wrapper-isIconOnly"
 >
   <button
     aria-label="aria-label"
-    class="euiButtonEmpty euiFilterButton testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default-euiTestCss"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isIconOnly testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly-euiTestCss"
     data-test-subj="test subject string"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
-    >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
-    </span>
+    />
   </button>
 </div>
 `;
 
 exports[`EuiFilterButton props badgeColor renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+  class="euiFilterButton__wrapper css-1bvxi87-wrapper-isIconOnly"
 >
   <button
-    class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
-    >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
-    </span>
+    />
   </button>
 </div>
 `;
 
 exports[`EuiFilterButton props grow can be turned off 1`] = `
 <div
-  class="euiFilterButton__wrapper css-1j0znlt-wrapper-noGrow"
+  class="euiFilterButton__wrapper css-1nag8c-wrapper-isIconOnly-noGrow"
 >
   <button
-    class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
-    >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
-    </span>
+    />
   </button>
 </div>
 `;
 
 exports[`EuiFilterButton props iconType and iconSide renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+  class="euiFilterButton__wrapper css-1bvxi87-wrapper-isIconOnly"
 >
   <button
-    class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content-hasIcon"
     >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
       <span
         color="inherit"
         data-euiicon-type="user"
@@ -84,58 +69,47 @@ exports[`EuiFilterButton props iconType and iconSide renders 1`] = `
 
 exports[`EuiFilterButton props isDisabled renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+  class="euiFilterButton__wrapper css-1bvxi87-wrapper-isIconOnly"
 >
   <button
-    class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-disabled-isDisabled-euiFilterButton-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-disabled-isDisabled-euiFilterButton-isIconOnly"
     data-test-subj="button"
     disabled=""
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
-    >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
-    </span>
+    />
   </button>
 </div>
 `;
 
 exports[`EuiFilterButton props isSelected renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+  class="euiFilterButton__wrapper css-1bvxi87-wrapper-isIconOnly"
 >
   <button
-    class="euiButtonEmpty euiFilterButton euiFilterButton-isSelected emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isSelected euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
-    >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
-    </span>
+    />
   </button>
 </div>
 `;
 
 exports[`EuiFilterButton props numActiveFilters and hasActiveFilters renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+  class="euiFilterButton__wrapper css-1bvxi87-wrapper-isIconOnly"
 >
   <button
-    class="euiButtonEmpty euiFilterButton euiFilterButton-hasActiveFilters emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-hasActiveFilters-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-hasActiveFilters euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-hasActiveFilters-isIconOnly"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
     >
-      <span
-        class="euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text-hasNotification"
-      />
       <span
         class="euiThemeProvider emotion-euiColorMode-LIGHT"
       >
@@ -154,18 +128,15 @@ exports[`EuiFilterButton props numActiveFilters and hasActiveFilters renders 1`]
 
 exports[`EuiFilterButton props numFilters renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-w61jgg-wrapper-hasNotification"
+  class="euiFilterButton__wrapper css-1r66fqw-wrapper-hasNotification-isIconOnly"
 >
   <button
-    class="euiButtonEmpty euiFilterButton euiFilterButton-hasNotification emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-hasNotification euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
     >
-      <span
-        class="euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text-hasNotification"
-      />
       <span
         class="euiThemeProvider emotion-euiColorMode-LIGHT"
       >
@@ -184,79 +155,64 @@ exports[`EuiFilterButton props numFilters renders 1`] = `
 
 exports[`EuiFilterButton props type renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+  class="euiFilterButton__wrapper css-1bvxi87-wrapper-isIconOnly"
 >
   <button
-    class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
-    >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
-    </span>
+    />
   </button>
 </div>
 `;
 
 exports[`EuiFilterButton props withNext renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-2spkli-wrapper-withNext"
+  class="euiFilterButton__wrapper css-152vodj-wrapper-withNext-isIconOnly"
 >
   <button
-    class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
-    >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
-    </span>
+    />
   </button>
 </div>
 `;
 
 exports[`EuiFilterButton renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+  class="euiFilterButton__wrapper css-1bvxi87-wrapper-isIconOnly"
 >
   <button
     aria-label="aria-label"
-    class="euiButtonEmpty euiFilterButton testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default-euiTestCss"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isIconOnly testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly-euiTestCss"
     data-test-subj="test subject string"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
-    >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
-    </span>
+    />
   </button>
 </div>
 `;
 
 exports[`EuiFilterButton renders zero properly 1`] = `
 <div
-  class="euiFilterButton__wrapper css-w61jgg-wrapper-hasNotification"
+  class="euiFilterButton__wrapper css-1r66fqw-wrapper-hasNotification-isIconOnly"
 >
   <button
     aria-label="aria-label"
-    class="euiButtonEmpty euiFilterButton euiFilterButton-hasNotification testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default-euiTestCss"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-hasNotification euiFilterButton-isIconOnly testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly-euiTestCss"
     data-test-subj="test subject string"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
     >
-      <span
-        class="euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text-hasNotification"
-      />
       <span
         class="euiThemeProvider emotion-euiColorMode-LIGHT"
       >