UI: Update the toolbar button styles

[MichaelArestad]

What I did

I updated the toolbar's icon button styles to match the designs @dom and I worked on recently. The new styles differentiate themselves from the tab interface and add clarity as to what state an icon button is in.

Here is a quick demo video:

IconButton-demo.mp4

Some details:

• The horizontal space between icon buttons is 5px.
• The icons have been downsized from 15px to 14px.
• The spacers have had a margin of 8px added to match the distance between the top/bottom of an icon button and the edge of the toolbar.
• The icons' containers have had 5px of padding to the left and right sides.
• The hover state background color is grey, but will update to a blue to match the designs once UI: Update sidebar hover color to be a refreshing transparent blue #16408 is merged.
• I did write a nice transition for hover states, but commented it out as I think it just feels snappier without the transition. Feel free to try it out.

How to test

1. Open the Official Storybook using the link below.
2. Try out various buttons in different locations including the canvas toolbar and the addon panel controls.
3. Try keyboard navigation of the buttons. Is it clear which button the keyboard is focused on?

Before

After

---

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit a396d5d. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[nx-cloud]

Nx Cloud Report

We didn't find any information for the current pull request with the commit 22e244f.
You might need to set the 'NX_BRANCH' environment variable in your CI pipeline.

Check the Nx Cloud Github Integration documentation for more information.

---

Sent with 💌 from NxCloud.

[MichaelArestad]

I updated the colors, added stories, design files, and updated the screenshots. I think this is ready for review.

[yannbf]

@MichaelArestad could you please test an example where a custom theme is used in manager.js? Thank you!

[MichaelArestad]

Alrighty! I have good news. It looks like a theme customization as seen on the PX Blue storybook will be compatible. In fact, it would look even better.

Here is a quick demo of what my test looks like:

theme-color-demo.mp4

The eagle-eyed among you may have noticed how bad the selected item in the sidebar looks with this theme, where in PX Blue, the sidebar highlight looks good. That's because they wrote a style override targeting that element:

In other words, this change will not cause a regression.

To test:

1. Update the import on line 3:

import { create, styled } from '@storybook/theming';

2. Add some theme overrides just below PrefixIcon:

const theme = create({
  base: 'light',

  // Base colors
  colorSecondary: 'white',

  // Toolbar default and active colors
  barTextColor: '#b3d7ec',
  barSelectedColor: 'white',
  barBg: '#037ac0',
});

3. Set the theme with the new theme constant:

addons.setConfig({
  theme: theme, // { base: 'dark', brandTitle: 'Storybook!' },
  previewTabs: {
    canvas: null,
...

@domyen If you get a chance, could you take another look and review this?

[yannbf]

Alrighty! I have good news. It looks like a theme customization as seen on the PX Blue storybook will be compatible. In fact, it would look even better.

Here is a quick demo of what my test looks like:

theme-color-demo.mp4

The eagle-eyed among you may have noticed how bad the selected item in the sidebar looks with this theme, where in PX Blue, the sidebar highlight looks good. That's because they wrote a style override targeting that element:

In other words, this change will not cause a regression.

To test:

1. Update the import on line 3:

import { create, styled } from '@storybook/theming';

1. Add some theme overrides just below PrefixIcon:

const theme = create({
  base: 'light',

  // Base colors
  colorSecondary: 'white',

  // Toolbar default and active colors
  barTextColor: '#b3d7ec',
  barSelectedColor: 'white',
  barBg: '#037ac0',
});

1. Set the theme with the new theme constant:

addons.setConfig({
  theme: theme, // { base: 'dark', brandTitle: 'Storybook!' },
  previewTabs: {
    canvas: null,
...

@domyen If you get a chance, could you take another look and review this?

Awesome stuff!! I quite like how that looks by the way!

[MichaelArestad]

I updated the focus and hover styles:

updated-focus-styles.mp4

Now, it should be a little clearer when a user enables or disables a button via keyboard actions. Note: the outline only shows on Mac in some browsers when that setting is enabled in Mac's General settings.

[MichaelArestad]

Just pushed an update to the Notification component so it will play nicely with the new IconButton styles. It should also be a little more resilient to changes now.