[EuiCollapsibleNavGroup] Fix titleSize prop types and added `iconPr…

…ops` prop (#3365) * [EuiCollapsibleNavGroup] Fix `titleSize` prop types and added `iconProps` prop * Adding section to Consuming about customzing * Remove `aria-hidden` from icon as its already added in EuiIcon`
elastic · Apr 23, 2020 · 0966553 · 0966553
1 parent 9ba25c0
commit 0966553
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,13 +3,15 @@
 - Applied `max-width: 100%` to `EuiPageBody` so inner flex-based items don't overflow their containers  ([#3375](https://github.com/elastic/eui/pull/3375))
 - Added `titleSize` prop to `EuiStep` and `EuiSteps` ([#3340](https://github.com/elastic/eui/pull/3340))
 - Handled `ref` passed to `EuiHeaderSectionItemButton` ([#3378](https://github.com/elastic/eui/pull/3378))
+- Added `iconProps` prop to `EuiCollapsibleNavGroup` to extend the props passed to the rendered `EuiIcon` ([#3365](https://github.com/elastic/eui/pull/3365))
 
 **Bug Fixes**
 
 - Fixed z-index issue in `EuiDatePicker` where it's popover would sit beneath other DOM siblings that had z-index applied ([#3376](https://github.com/elastic/eui/pull/3376))
 - Added `download` glyph to `EuiIcon` ([#3364](https://github.com/elastic/eui/pull/3364))
 - Applies `max-width: 100%` to `EuiPageBody` so inner flex-based items don't overflow their containers  ([#3375](https://github.com/elastic/eui/pull/3375))
 - Added `ReactElement` to `EuiCard` `image` prop type to allow custom component ([#3370](https://github.com/elastic/eui/pull/3370))
+- Fixed `EuiCollapsibleNavGroup` `titleSize` prop type to properly exclude `l` and `m` sizes ([#3365](https://github.com/elastic/eui/pull/3365))
 
 ## [`23.1.0`](https://github.com/elastic/eui/tree/v23.1.0)
 

diff --git a/...s/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/...s/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -46,6 +46,43 @@ exports[`EuiCollapsibleNavGroup props background none is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiCollapsibleNavGroup props iconProps renders data-test-subj 1`] = `
+<div
+  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+  id="id"
+>
+  <div
+    class="euiCollapsibleNavGroup__heading"
+  >
+    <div
+      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+    >
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <div
+          data-euiicon-type="bolt"
+          data-test-subj="DTS"
+        />
+      </div>
+      <div
+        class="euiFlexItem"
+      >
+        <h3
+          class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+          id="id__title"
+        >
+          Title
+        </h3>
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiCollapsibleNavGroup__children"
+  />
+</div>
+`;
+
 exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `
 <div
   class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
@@ -61,7 +98,6 @@ exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <div
-          aria-hidden="true"
           data-euiicon-type="bolt"
         />
       </div>
@@ -98,7 +134,6 @@ exports[`EuiCollapsibleNavGroup props iconType is rendered 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <div
-          aria-hidden="true"
           data-euiicon-type="bolt"
         />
       </div>

diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.test.tsx b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.test.tsx
@@ -62,6 +62,21 @@ describe('EuiCollapsibleNavGroup', () => {
       expect(component).toMatchSnapshot();
     });
 
+    test('iconProps renders data-test-subj', () => {
+      const component = render(
+        <EuiCollapsibleNavGroup
+          title="Title"
+          iconProps={{
+            'data-test-subj': 'DTS',
+          }}
+          iconType="bolt"
+          id="id"
+        />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
     describe('background', () => {
       BACKGROUNDS.forEach(color => {
         test(`${color} is rendered`, () => {

diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
@@ -28,7 +28,7 @@ import { CommonProps, ExclusiveUnion } from '../../common';
 import { htmlIdGenerator } from '../../../services';
 
 import { EuiAccordion, EuiAccordionProps } from '../../accordion';
-import { EuiIcon, IconType, IconSize } from '../../icon';
+import { EuiIcon, IconType, IconSize, EuiIconProps } from '../../icon';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiTitle, EuiTitleProps, EuiTitleSize } from '../../title';
 
@@ -52,6 +52,10 @@ export interface EuiCollapsibleNavGroupInterface extends CommonProps {
    * Change the size of the icon in the `title`
    */
   iconSize?: IconSize;
+  /**
+   * Further extend the props applied to EuiIcon
+   */
+  iconProps?: Omit<EuiIconProps, 'type' | 'size'>;
   /**
    * Optionally provide an id, otherwise one will be created
    */
@@ -68,7 +72,7 @@ export interface EuiCollapsibleNavGroupInterface extends CommonProps {
   /**
    * Title sizing equivelant to EuiTitle, but only `s` and smaller
    */
-  titleSize?: Omit<EuiTitleProps['size'], 'l' | 'm'>;
+  titleSize?: Exclude<EuiTitleProps['size'], 'l' | 'm'>;
 }
 
 type GroupAsAccordion = EuiCollapsibleNavGroupInterface &
@@ -119,6 +123,7 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
   isCollapsible = false,
   titleElement = 'h3',
   titleSize = 'xxs',
+  iconProps,
   ...rest
 }) => {
   const [groupID] = useState(id || htmlIdGenerator()());
@@ -151,7 +156,7 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
     <EuiFlexGroup gutterSize="m" alignItems="center" responsive={false}>
       {iconType && (
         <EuiFlexItem grow={false}>
-          <EuiIcon type={iconType} size={iconSize} aria-hidden="true" />
+          <EuiIcon {...iconProps} type={iconType} size={iconSize} />
         </EuiFlexItem>
       )}
 

diff --git a/wiki/consuming.md b/wiki/consuming.md
@@ -100,6 +100,18 @@ ReactDOM.render(
 
 If you get an error when importing a React component, you might need to configure Webpack's `resolve.mainFields` to `['webpack', 'browser', 'main']` to import the components from `lib` instead of `src`. See the [Webpack docs](https://webpack.js.org/configuration/resolve/#resolve-mainfields) for more info.
 
+## Customizing with `className`
+
+We do not recommend customizing EUI components by applying styles directly to EUI classes, eg. `.euiButton`. All components allow you to pass a custom `className` prop directly to the component which will then append this to the class list. Utilizing the cascade feature of CSS, you can then customize by overriding styles so long as your styles are imported **after** the EUI import.
+
+```html
+<EuiButton className="myCustomClass__button" />
+
+// Renders as:
+
+<button class="euiButton myCustomClass__button" />
+```
+
 ## Using the `test-env` build
 
 EUI provides a separate babel-transformed and partially mocked commonjs build for testing environments in consuming projects. The output is identical to that of `lib/`, but has transformed async functions and dynamic import statements, and also applies some useful mocks. This build mainly targets Kibana's Jest environment, but may be helpful for testing environments in other projects.