[BUG] ButtonColor, OuiButtonIconColor typedef conflict

[pjfitzgibbons]

Describe the bug
ButtonColor, OuiButtonIconColor have nearly overlapping definitions :

ButtonColor == Omit<OuiButtonIconColor, 'subdued'>
OuiButtonIconColor == Omit<ButtonColor, 'success'>

This mismatch though causes typedef conflict and failure of tsc --noEmit when a single color var is used to style sibling OuiButton and OuiButtonIcon.
See (#1193, split_button_control.tsx:113)

Expected behavior

A single unified color type that can be used between Button and ButtonIcon

Screenshots

Typescript language server in VSCode produces :

Type 'ButtonColor' is not assignable to type '"accent" | "danger" | "ghost" | "primary" | "subdued" | "success" | "text" | "warning" | undefined'.
  Type '"secondary"' is not assignable to type '"accent" | "danger" | "ghost" | "primary" | "subdued" | "success" | "text" | "warning" | undefined'.ts(2322)
button_icon.tsx(81, 3): The expected type comes from property 'color' which is declared here on type 'IntrinsicAttributes & PropsWithChildren<(DisambiguateSet<OuiButtonIconPropsForAnchor, OuiButtonIconPropsForButton> & ... 4 more ... & { ...; }) | (DisambiguateSet<...> & ... 4 more ... & { ...; })>'
(property) color: "accent" | "danger" | "ghost" | "primary" | "success" | "text" | "warning"

Host/Environment (please complete the following information):

• OUI Version: [e.g. 1.0]
• OSD Version (if applicable): [e.g. 2.7.0]
• OS: [e.g. iOS]
• Browser and version [e.g. Chrome 90]

Additional context

Add any other context about the problem here.

[joshuali925]

it's because of

oui/src/components/button/button.tsx

Line 105 in 59edc96

color?: ButtonColor;

You have

oui/src/components/split_button/split_button_control.tsx

Line 123 in 59edc96

{...propsForDropdownButton}

the type is

oui/src/components/split_button/split_button_control.tsx

Line 75 in 59edc96

propsForDropdownButton?: OuiButtonProps;

which can contain color?: ButtonColor

oui/src/components/button/button.tsx

Lines 95 to 105 in 59edc96

	export interface OuiButtonProps extends OuiButtonContentProps, CommonProps {
	children?: ReactNode;
	/**
	* Make button a solid color for prominence
	*/
	fill?: boolean;
	/**
	* Any of our named colors.
	* **`secondary` color is DEPRECATED, use `success` instead**
	*/
	color?: ButtonColor;

it can't be used for color in OuiButtonIcon because that component expects OuiButtonIconColor.

oui/src/components/button/button_icon/button_icon.tsx

Lines 75 to 81 in 59edc96

	export interface OuiButtonIconProps extends CommonProps {
	iconType: IconType;
	/**
	* Any of the named color palette options.
	* **`subdued` set to be DEPRECATED, use `text` instead**
	*/
	color?: OuiButtonIconColor;

You can move color={color} after the property spread, or (better) define type for propsForDropdownButton as something like propsForDropdownButton?: Omit<OuiButtonProps, 'color'>;

Edit: add more details

[dblock]

@joshuali925 @pjfitzgibbons Want to PR a fix?

Catch All Triage - 1 2 3 4 5