[EuiCollapsibleNavGroup] Fix titleSize prop types and added iconProps prop

CHANGELOG.md

@@ -2,12 +2,14 @@
 
 - Added `showCloseButton` and `dockedBreakpoint` flexibility to `EuiCollapsibleNav` ([#3330](https://github.com/elastic/eui/pull/3330))
 - Added `panelStyle` prop to `EuiPopover` to distinguish style object configuration ([#3329](https://github.com/elastic/eui/pull/3329))
+- 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 `EuiInMemoryTable` `isClearable` property to initiate reset ([#3328](https://github.com/elastic/eui/pull/3328))
 - Fixed `EuiCollapsibleNav` docked states on mobile ([#3330](https://github.com/elastic/eui/pull/3330))
 - Fixed `EuiPopover` positioning from being overridden by `style` prop ([#3329](https://github.com/elastic/eui/pull/3329))
+- Fixed `EuiCollapsibleNavGroup` `titleSize` prop type to properly exclude `l` and `m` sizes ([#3365](https://github.com/elastic/eui/pull/3365))
 
 **Breaking changes**
 

src/components/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>

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`, () => {

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>
       )}
 

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.