[EuiFilterGroup] Add compressed prop (#5717)

* Added `compressed` prop to `EuiFilterGroup` * Addressing PR review * Changing notification badge to default size * CL * Using `DistributiveOmit` instead of `Omit` in a `ExclusiveUnion` * Update src/components/filter_group/filter_button.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src/components/filter_group/filter_group.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Prettier Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
elastic · Mar 15, 2022 · 43444cc · 43444cc
1 parent d48c06b
commit 43444cc
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 45 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,13 @@
 ## [`main`](https://github.com/elastic/eui/tree/main)
 
+- Added `compressed` prop to `EuiFilterGroup` and reduced the size of the `EuiFilterButton` notification badge ([#5717](https://github.com/elastic/eui/pull/5717))
 - Updated `testenv` mock for `EuiIcon` to render `aria-label` as text ([#5709](https://github.com/elastic/eui/pull/5709))
 - Added `editorChecklist` glyph to `EuiIcon` ([#5705](https://github.com/elastic/eui/pull/5705))
 
 **Breaking changes**
 
 - Removed Legacy theme including compiled CSS ([#5688](https://github.com/elastic/eui/pull/5688))
+- Removed `flush` and `size` props in `EuiFilterButtonProps` ([#5717](https://github.com/elastic/eui/pull/5717))
 
 **CSS-in-JS conversions**
 

diff --git a/src-docs/src/views/filter_group/filter_group_simple.js b/src-docs/src/views/filter_group/filter_group_simple.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 
 import { EuiFilterGroup, EuiFilterButton } from '../../../../src/components';
+import { DisplayToggles } from '../form_controls/display_toggles';
 
 export default () => {
   const [isFilterOn, setIsFilterOn] = useState(false);
@@ -22,23 +23,31 @@ export default () => {
   };
 
   return (
-    <EuiFilterGroup>
-      <EuiFilterButton hasActiveFilters={isFilterOn} onClick={toggleFilter}>
-        Single filter
-      </EuiFilterButton>
-      <EuiFilterButton
-        withNext
-        hasActiveFilters={isOnFilterOn}
-        onClick={toggleOnFilter}
-      >
-        On
-      </EuiFilterButton>
-      <EuiFilterButton
-        hasActiveFilters={isOffFilterOn}
-        onClick={toggleOffFilter}
-      >
-        Off
-      </EuiFilterButton>
-    </EuiFilterGroup>
+    <DisplayToggles
+      canDisabled={false}
+      canReadOnly={false}
+      canLoading={false}
+      canInvalid={false}
+      canFullWidth
+    >
+      <EuiFilterGroup>
+        <EuiFilterButton hasActiveFilters={isFilterOn} onClick={toggleFilter}>
+          Single filter
+        </EuiFilterButton>
+        <EuiFilterButton
+          withNext
+          hasActiveFilters={isOnFilterOn}
+          onClick={toggleOnFilter}
+        >
+          On
+        </EuiFilterButton>
+        <EuiFilterButton
+          hasActiveFilters={isOffFilterOn}
+          onClick={toggleOffFilter}
+        >
+          Off
+        </EuiFilterButton>
+      </EuiFilterGroup>
+    </DisplayToggles>
   );
 };
diff --git a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
@@ -1,5 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiFilterButton does not render a badge or count if numFilters is not passed 1`] = `
+<button
+  aria-label="aria-label"
+  class="euiButtonEmpty euiButtonEmpty--text euiFilterButton testClass1 testClass2"
+  data-test-subj="test subject string"
+  type="button"
+>
+  <span
+    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+  >
+    <span
+      class="euiButtonEmpty__text"
+    >
+      <span
+        class="euiFilterButton__textShift"
+      />
+    </span>
+  </span>
+</button>
+`;
+
 exports[`EuiFilterButton is rendered 1`] = `
 <button
   aria-label="aria-label"
@@ -119,7 +140,7 @@ exports[`EuiFilterButton props numActiveFilters and hasActiveFilters is rendered
       />
       <span
         aria-label="5 active filters"
-        class="euiNotificationBadge euiNotificationBadge--medium euiFilterButton__notification"
+        class="euiNotificationBadge euiFilterButton__notification"
       >
         5
       </span>
@@ -144,7 +165,7 @@ exports[`EuiFilterButton props numFilters is rendered 1`] = `
       />
       <span
         aria-label="5 available filters"
-        class="euiNotificationBadge euiNotificationBadge--medium euiNotificationBadge--subdued euiFilterButton__notification"
+        class="euiNotificationBadge euiNotificationBadge--subdued euiFilterButton__notification"
       >
         5
       </span>
@@ -209,32 +230,11 @@ exports[`EuiFilterButton renders zero properly 1`] = `
       />
       <span
         aria-label="0 available filters"
-        class="euiNotificationBadge euiNotificationBadge--medium euiNotificationBadge--subdued euiFilterButton__notification"
+        class="euiNotificationBadge euiNotificationBadge--subdued euiFilterButton__notification"
       >
         0
       </span>
     </span>
   </span>
 </button>
 `;
-
-exports[`EuiFilterButton does not render a badge or count if numFilters is not passed 1`] = `
-<button
-  aria-label="aria-label"
-  class="euiButtonEmpty euiButtonEmpty--text euiFilterButton testClass1 testClass2"
-  data-test-subj="test subject string"
-  type="button"
->
-  <span
-    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-  >
-    <span
-      class="euiButtonEmpty__text"
-    >
-      <span
-        class="euiFilterButton__textShift"
-      />
-    </span>
-  </span>
-</button>
-`;
diff --git a/src/components/filter_group/__snapshots__/filter_group.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_group.test.tsx.snap
@@ -8,6 +8,12 @@ exports[`EuiFilterGroup is rendered 1`] = `
 />
 `;
 
+exports[`EuiFilterGroup props compressed is rendered 1`] = `
+<div
+  class="euiFilterGroup euiFilterGroup--compressed"
+/>
+`;
+
 exports[`EuiFilterGroup props fullWidth is rendered 1`] = `
 <div
   class="euiFilterGroup euiFilterGroup--fullWidth"

diff --git a/src/components/filter_group/filter_button.tsx b/src/components/filter_group/filter_button.tsx
@@ -14,8 +14,9 @@ import { EuiNotificationBadge } from '../badge/notification_badge';
 import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button/button_empty';
 
 import { useInnerText } from '../inner_text';
+import { DistributiveOmit } from '../common';
 
-export type EuiFilterButtonProps = EuiButtonEmptyProps & {
+export type EuiFilterButtonProps = {
   /**
    * Bolds the button if true
    */
@@ -47,7 +48,7 @@ export type EuiFilterButtonProps = EuiButtonEmptyProps & {
    * Remove border after button, good for opposite filters
    */
   noDivider?: boolean;
-};
+} & DistributiveOmit<EuiButtonEmptyProps, 'flush' | 'size'>;
 
 export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
   children,
@@ -107,7 +108,6 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
   const badgeContent = showBadge && (
     <EuiNotificationBadge
       className="euiFilterButton__notification"
-      size="m"
       aria-label={hasActiveFilters ? activeBadgeLabel : availableBadgeLabel}
       color={isDisabled || !hasActiveFilters ? 'subdued' : 'accent'}
     >

diff --git a/src/components/filter_group/filter_group.test.tsx b/src/components/filter_group/filter_group.test.tsx
@@ -25,5 +25,11 @@ describe('EuiFilterGroup', () => {
 
       expect(component).toMatchSnapshot();
     });
+
+    test('compressed is rendered', () => {
+      const component = render(<EuiFilterGroup compressed />);
+
+      expect(component).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/filter_group/filter_group.tsx b/src/components/filter_group/filter_group.tsx
@@ -17,18 +17,24 @@ export type EuiFilterGroupProps = HTMLAttributes<HTMLDivElement> &
      * Expand the whole bar to fill its parent's width
      */
     fullWidth?: boolean;
+    /**
+     *  When `true`, creates a shorter height filter group matching that of `compressed` form controls
+     */
+    compressed?: boolean;
   };
 
 export const EuiFilterGroup: FunctionComponent<EuiFilterGroupProps> = ({
   children,
   className,
   fullWidth = false,
+  compressed,
   ...rest
 }) => {
   const classes = classNames(
     'euiFilterGroup',
     {
       'euiFilterGroup--fullWidth': fullWidth,
+      'euiFilterGroup--compressed': compressed,
     },
     className
   );

diff --git a/src/themes/amsterdam/overrides/_filter_group.scss b/src/themes/amsterdam/overrides/_filter_group.scss
@@ -5,6 +5,14 @@
   box-shadow: inset 0 0 0 1px $euiFormBorderColor;
 }
 
+.euiFilterGroup--compressed {
+  border-radius: $euiFormControlCompressedBorderRadius;
+
+  & .euiFilterButton {
+    height: $euiFormControlCompressedHeight;
+  }
+}
+
 .euiFilterButton {
   border-radius: 0;
   border: none;