Button & IconButton Alignment

[anicholls]

To simplify our button designs and APIs, we have been discussing removing the IconButton component and just utilizing a Primary, Secondary or Tertiary button with an icon and no label. This would drastically simplify our button taxonomy and code complexity.

Below are some of my thoughts as I think through how we would realize this in code. Still very WIP.

IconButton

The IconButton component will be removed and instead, users will just add an icon with no label to
a PrimaryButton, SecondaryButton, or TertiaryButton. It will use the existing styling, but
will need some tweaks to how we calculate spacing within the button.

Compound Component

Does a compound component structure add value here?

<SecondaryButton>Secondary</SecondaryButton>

<SecondaryButton>
  Hello there
  <SecondaryButton.Icon icon={plusIcon} />
</SecondaryButton>

<SecondaryButton>
  <SecondaryButton.Icon icon={plusIcon} />
  Hello there
  <SecondaryButton.DataLabel>1:23</SecondaryButton.DataLabel> {/* Do we still need to support this? */}
</SecondaryButton>

<SecondaryButton aria-label="plus">
  <SecondaryButton.Icon icon={plusIcon} />
</SecondaryButton>

{/* Should we have a shortcut for this ^ ? Something like: */}

<SecondaryButton icon={plusIcon} aria-label="plus"/>

Spacing Calculation

The way we currently calculate spacing within buttons is a bit confusing. It involves multiple paddings/margins added together and even some negative margins. We should clean this up as part of this effort.

Toggleability

Toggle prop is removed. We now have a component that flips between the type button style and the
Primary button style. In addition, we'll also fill the icon for the toggled on state.

export interface ToggleIconButtonProps extends Themeable {
  /**
   * The type of button in the toggled off state. Toggled on is the Primary type.
   * Note: ToggleIconButtons will always have type="button"
   * @default 'tertiary'
   */
  type?: 'secondary' | 'teriary';
  /**
   * The variant of the button type
   */
  variant?: 'inverse' | undefined;
  toggled?: boolean;
  icon?: CanvasSystemIcon;
  onToggleChange?: (toggled: boolean | undefined) => void;
}

ToolbarIconButton

Not sure exactly what to do about this yet. We could deprecate it and move it into the PT-PLAT repo, but there are more than a few use cases for it.

Also wondering if we should support the old circleFilled style through this as well. There are less
use cases for this.

[myvuuu]

Will no longer have square icon buttons, but users can use existing buttons and override the border radius. All variants not already included in primary/secondary/tertiary will be dropped. Will need to assess who/how many people are using icon buttons to help manage the conversion

[myvuuu]

Tooltip is not built in for icon buttons, but it was something we considered. Now that icon buttons will be merged, we need to revisit our approach.

[anicholls]

This is what I was thinking for a mapping from old buttons to new. The border adds a lot of visual weight/clutter, so I've been thinking the majority would map to TertiaryButton

Circle => TertiaryButton
CircleFilled => SecondaryButton
Inverse => TertiaryButton + Inverse variant
InverseFilled => SecondaryButton + Inverse Variant
Plain => TertiaryButton
Square => TertiaryButton
SquareFilled => SecondaryButton

[myvuuu]

From 1/6 v7 buttons sync:

Button Change History
V5 (COMPLETED)

• Secondary button color changes

V6 (COMPLETED)

• Padding updates to L secondary buttons
• New XS sizes for primary, secondary, and tertiary buttons
• Icon support for all XS-L primary, secondary, and tertiary buttons
• 18x18 icon size for XS
• 20x20 for S and M
• Tertiary button XS and S font size updates
• Underline in all states for tertiary buttons
• New inverse variant for primary buttons
• Disable states for primary, secondary, and tertiary buttons updated to 40% opacity

V7 (UPCOMING)

• Combine icon buttons with primary, secondary, and tertiary buttons
• Padding calculation clean up (no design impact)

Future Work

• Underline blue text in tertiary buttons for a11y purposes
• Update blue text in tertiary buttons to black text (TBD) for a11y purposes

V7 Icon Button Updates (CONT.)

• Merge icon buttons to create icon only variants for primary, secondary, and tertiary buttons to clean up and reduce the amount of button variants
• Alex's mapping proposal:
  • Circle => TertiaryButton
  • CircleFilled => SecondaryButton
  • Inverse => TertiaryButton + Inverse variant
  • InverseFilled => SecondaryButton + Inverse Variant
  • Plain => TertiaryButton
  • Square => TertiaryButton
  • SquareFilled => SecondaryButton
  • Toggled icon buttons: primary icon only button (toggled) --> tertiary icon only button (not toggled)
• The states of the buttons have to match up, can't combine two different states of the same button (ex: a hover state circle icon button cannot be replaced with an active state secondary button, even if they are visually similar)
• Segmented Control, Toolbar Icon Button, & Toolbar Dropdown Button
  • Will not be impacted by this change
  • Border Radius used in both will be overwritten within Canvas Kit so there is no need for a square icon
• Existing Components Using Icon Buttons:
  • Action Bar
  • Segmented Control
  • Breadcrumbs
  • Pagination
  • Side Panel
  • Search Form
  • Popup components
• Open Design Decisions:
  -Should icon only tertiary buttons be square shaped? Do we need to create a circle shaped icon only tertiary button variant?