[CSS-in-JS] Convert classNameMaps to direct className keys.

[cchaos]

Conversion Idea

Instead of maintaining the manual maps of property value to class name maps, lets switch to applying the modifier piece of the class name directly as they key.

Example:

const sizeToClassNameMap = {
  s: 'euiAvatar--s',
  m: 'euiAvatar--m',
  l: 'euiAvatar--l',
  xl: 'euiAvatar--xl',
};

export const SIZES = keysOf(sizeToClassNameMap);
export type EuiAvatarSize = keyof typeof sizeToClassNameMap;

const classes = classNames(
  'euiAvatar',
  sizeToClassNameMap[size],
);

Becomes:

export const SIZES = ['s', 'm', 'l', 'xl'] as const;
export type EuiAvatarSize = typeof SIZES[number];

const classes = classNames(
  'euiAvatar',
  {
    [`euiAvatar--${size}`]: size,
  },
);

This removes the idea that we're somehow very specifically using class names by prop value, while still supporting the rendered class name. It also reduces lines of code.

The only time this won't work well is with something like margin = 'left' and class name is euiComponent--marginLeft. But I think we can at least reduce the classname maps to just signify the modifier instead of repeating the component name like:

export const MARGINS = ['none', 'xs', 's', 'm', 'l', 'xl', 'xxl'] as const;
export type EuiHorizontalRuleMargin = typeof MARGINS[number];

const marginToClassNameMap: {
  [value in EuiHorizontalRuleMargin]: string | null;
} = {
  none: null,
  xs: 'marginXSmall',
  s: 'marginSmall',
  m: 'marginMedium',
  l: 'marginLarge',
  xl: 'marginXLarge',
  xxl: 'marginXXLarge',
};

const classes = classNames(
  'euiHorizontalRule',
  {
    [`euiHorizontalRule--${marginToClassNameMap[margin]}`]: margin && margin !== 'none',
  },
);

Checklist

• [ ] Checked in both light and dark modes
• [ ] Checked in mobile
• [ ] Checked in Chrome, Safari, Edge, and Firefox
• [ ] Props have proper autodocs and playground toggles
• [ ] Added documentation
• [ ] Checked Code Sandbox works for any docs examples
• Added or updated jest and cypress tests
• [ ] Checked for breaking changes and labeled appropriately
• [ ] Checked for accessibility including keyboard-only and screenreader modes
• [ ] Updated the Figma library counterpart
• [ ] A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5889/

[cee-chen]

I'm good with this, but just to check, for modifier classes that we find 0 usages of in Kibana, can we prefer to delete the className maps instead of converting them?

[cee-chen]

Changes LGTM! Love the cleanup and QA'd all touched components - classNames output looks good!

[cchaos]

for modifier classes that we find 0 usages of in Kibana, can we prefer to delete the className maps instead of converting them?

Yes, yes of course 😄

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5889/

[thompsongl]

I like it!

[cchaos]

Sweet! Thanks! I'll merge this and update the Meta issue with guidance.