add EuiListGroup and EuiListGroupItem type definitions.

[walterra]

Summary

• Adds type definitions for EuiListGroup and EuiListGroupItem
• Changes the propTypes of EuiListGroup to reuse EuiListGroupItem.propTypes instead of redefining the shape.

Checklist

- [ ] This was checked in mobile
- [ ] This was checked in IE11
- [ ] This was checked in dark mode
- [ ] Any props added have proper autodocs
- [ ] Documentation examples were added

• A changelog entry exists and is marked appropriately

- [ ] This was checked for breaking changes and labeled appropriately
- [] Jest tests were updated or added to match the most common scenarios
- [ ] This was checked against keyboard-only and screenreader scenarios
- [ ] This required updates to Framer X components

[thompsongl]

Thanks for this. EuiListGroupItem is just a little tricky.
A couple things to change and a couple thing for us to follow up on.

[thompsongl]

Similar to EuiListGroupProps we need to account for prop ... spread onto HTML elements. This component is more complex, though, as its props can potentially be spread onto 3 different elements. So we need something like the following:

type EuiListGroupItemElement<Props> =
    | (Props & {
        onClick: MouseEventHandler<HTMLButtonElement>;
      } & ButtonHTMLAttributes<HTMLButtonElement>)
    | (Props & {
        href: string;
        onClick: MouseEventHandler<HTMLAnchorElement>;
      } & AnchorHTMLAttributes<HTMLAnchorElement>)
    | (Props & HTMLAttributes<HTMLSpanElement>);

Which can then be used like:

export const EuiListGroupItem: FunctionComponent<
    EuiListGroupItemElement<EuiListGroupItemProps>
  >;

@chandlerprall would be a helpful second set of eyes here.

[chandlerprall]

Instead of passing EuiListGroupItemProps through a generic type variable, cleaner to mix it directly into EuiListGroupItemElement -

type EuiListGroupItemElement =
    | (EuiListGroupItemProps & {
        onClick: MouseEventHandler<HTMLButtonElement>;
      } & ButtonHTMLAttributes<HTMLButtonElement>)
    | (EuiListGroupItemProps & {
        href: string;
        onClick: MouseEventHandler<HTMLAnchorElement>;
      } & AnchorHTMLAttributes<HTMLAnchorElement>)
    | (EuiListGroupItemProps & HTMLAttributes<HTMLSpanElement>);

@thompsongl did you test that union out to ensure it resolves correctly?

[thompsongl]

Hmm actually appears that it'll allow passing attributes from both HTMLButtonElement and HTMLAnchorElement. For instance, it's fine with both:

formAction="action"
rel="noreferrer"

Seems like EuiButtonPropsForButtonOrLink would have the same problem

[walterra]

In 64f9e6f I pushed:

  type EuiListGroupItemExtendedProps = EuiListGroupItemProps & CommonProps & (
    ({
      onClick: MouseEventHandler<HTMLButtonElement>;
    } & ButtonHTMLAttributes<HTMLButtonElement>) |
    ({
      href: string;
      onClick: MouseEventHandler<HTMLAnchorElement>;
    } & AnchorHTMLAttributes<HTMLAnchorElement>) |
    HTMLAttributes<HTMLSpanElement>
  );

  export const EuiListGroupItem: FunctionComponent<EuiListGroupItemExtendedProps>;

Let me know what you think about it. Another question about this: Now that onClick and href are part of the union type EuiListGroupItemExtendedProps, can those attributes be removed from the original EuiListGroupItemProps?

[chandlerprall]

Hmm actually appears that it'll allow passing attributes from both HTMLButtonElement and HTMLAnchorElement. For instance, it's fine with both:

Does it work with ExclusiveUnion<>?

[thompsongl]

This appears to work:

type EuiListGroupItemExtendedProps = EuiListGroupItemProps &
    CommonProps &
    ExclusiveUnion<
      ExclusiveUnion<
        ButtonHTMLAttributes<HTMLButtonElement>,
        AnchorHTMLAttributes<HTMLAnchorElement>
      >,
      HTMLAttributes<HTMLSpanElement>
    >;

Do we need a thing that accepts more than 2 types?

[walterra]

I added a version using ExclusiveUnion in 4a648e2.

[chandlerprall]

Do we need a thing that accepts more than 2 types?

As long as the autodocs parses this acceptably, I kinda like making it ugly to list multiple version here - it matches the overhead that it pushes down the consuming dev when considering how to use the component. Don't make sub-optimal component design easy :)

[thompsongl]

Don't make sub-optimal component design easy

💯

[cchaos]

Can you also just double-check that none of these changes affect the EuiNavDrawer and specifically the EuiNavDrawerGroup:

eui/src/components/nav_drawer/nav_drawer_group.js

Lines 51 to 58 in 90240a0

	EuiNavDrawerGroup.propTypes = {
	listItems: PropTypes.arrayOf(PropTypes.shape({
	...EuiListGroup.propTypes.listItems[0],
	flyoutMenu: PropTypes.shape({
	title: PropTypes.string.isRequired,
	listItems: EuiListGroup.propTypes.listItems.isRequired,
	}),
	})),

[walterra]

Thanks for pointing that out! I now tested it using yarn start-test-server and propTypes pass for the EuiListGroup and EuiNavDrawer examples - for testing I also temporarily added another required fake prop which then triggered an error for NavDrawer.

[joelgriffith]

Just a heads up that I'm running into build issues of this PR (due to missing EuiListGroupItem Types): elastic/kibana#32522

[thompsongl]

Almost ready

[thompsongl]

One last thing. Just got lost in the shuffle:
onClick?: MouseEventHandler<HTMLButtonElement>

[walterra]

Done in 3490cee.