Skip to content

feat(labs): polish toolbar UX layout and disabled states #6067

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
copybara-service wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(labs): polish toolbar UX layout and disabled states #6067

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions labs/gb/components/toolbar/_toolbar-tokens.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,22 @@
@mixin root {
// LINT.IfChange
--button-container-color: var(--md-sys-color-surface-container);
--button-shape: 9999px;
--container-color: var(--md-sys-color-surface-container);
--container-elevation: var(--md-sys-elevation-shadow-3);
--container-leading-space: var(--md-sys-space-100);
--container-shape: calc(var(--horizontal-container-height) / 2);
--container-spacing: var(--md-sys-space-50);
--container-spacing: var(--target-area-gap);
--container-trailing-space: var(--md-sys-space-100);
--docked-container-elevation: var(--md-sys-elevation-shadow-0);
--docked-container-height: 64px;
--docked-container-leading-space: var(--md-sys-space-200);
--docked-container-max-spacing: 32px;
--docked-container-min-spacing: 4px;
--docked-container-min-spacing: var(--target-area-gap);
--docked-container-shape: var(--md-sys-shape-corner-none);
--docked-container-trailing-space: var(--md-sys-space-200);
--horizontal-container-height: 64px;
--icon-button-shape: 50%;
--icon-color: var(--md-sys-color-on-surface-variant);
--label-text-color: var(--md-sys-color-on-surface-variant);
--min-button-size: 40px;
Expand All @@ -28,6 +30,8 @@
--selected-button-container-color: var(--md-sys-color-secondary-container);
--selected-icon-color: var(--md-sys-color-on-secondary-container);
--selected-label-text-color: var(--md-sys-color-on-secondary-container);
--target-area-gap: var(--md-sys-space-50);
--touch-target-size: 48px;
--vertical-container-width: 64px;
// LINT.ThenChange(toolbar-element.ts) keep in sync with `@cssprop` jsdoc tags
}
Expand All @@ -42,6 +46,22 @@
--selected-label-text-color: var(--md-sys-color-on-secondary-container);
}

@mixin disabled {
@include standard;
--button-container-color: hsl(
from var(--md-sys-color-on-surface) h s l / 12%
);
--selected-button-container-color: hsl(
from var(--md-sys-color-on-surface) h s l / 12%
);
--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
--selected-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
--selected-label-text-color: hsl(
from var(--md-sys-color-on-surface) h s l / 38%
);
}

@mixin vibrant {
--button-container-color: var(--md-sys-color-primary-container);
--container-color: var(--md-sys-color-primary-container);
Expand Down
4 changes: 4 additions & 0 deletions labs/gb/components/toolbar/demo/demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
}),
}),
new Knob('docked', {ui: boolInput()}),
new Knob('hideLabels', {ui: boolInput()}),
new Knob('disabledLeadingSlot', {ui: boolInput()}),
new Knob('disabledDefaultSlot', {ui: boolInput()}),
new Knob('disabledTrailingSlot', {ui: boolInput()}),
],
);

Expand Down
75 changes: 45 additions & 30 deletions labs/gb/components/toolbar/demo/stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,18 @@ import {
type ToolbarOrientation,
} from '@material/web/labs/gb/components/toolbar/toolbar.js';
import {adoptStyles} from '@material/web/labs/gb/styles/adopt-styles.js';
import {styles as m3Styles} from '@material/web/labs/gb/styles/m3.cssresult.js';
import {css, html} from 'lit';

import {styles as m3Styles} from '@material/web/labs/gb/styles/m3.css' with {type: 'css'}; // github-only
// import {styles as m3Styles} from '@material/web/labs/gb/styles/m3.cssresult.js'; // google3-only

/** Knob types for toolbar stories. */
export interface StoryKnobs {
color?: ToolbarColor;
orientation?: ToolbarOrientation;
docked: boolean;
hideLabels?: boolean;
disabledLeadingSlot?: boolean;
disabledDefaultSlot?: boolean;
disabledTrailingSlot?: boolean;
}

adoptStyles(document, [
Expand Down Expand Up @@ -72,21 +74,28 @@ const playground: MaterialStoryInit<StoryKnobs> = {
color=${color}
orientation=${orientation}
?docked=${docked}
?hide-labels=${Boolean(knobs.hideLabels)}
aria-label="Formatting toolbar">
<md-gb-button square type="toggle" selected>
<md-gb-icon-button
slot="leading"
aria-label="Undo"
type="toggle"
?disabled=${Boolean(knobs.disabledLeadingSlot)}>
<md-gb-icon>undo</md-gb-icon>
</md-gb-icon-button>
<md-gb-button
type="toggle"
?disabled=${Boolean(knobs.disabledDefaultSlot)}>
<md-gb-icon>edit</md-gb-icon>
Edit
</md-gb-button>
<md-gb-button square type="toggle">
<md-gb-icon>palette</md-gb-icon>
Style
<md-gb-button
slot="trailing"
type="toggle"
?disabled=${Boolean(knobs.disabledTrailingSlot)}>
<md-gb-icon>more_vert</md-gb-icon>
Options
</md-gb-button>
<md-gb-icon-button square aria-label="Favorite" type="toggle">
<md-gb-icon>favorite</md-gb-icon>
</md-gb-icon-button>
<md-gb-icon-button square aria-label="Settings" type="toggle">
<md-gb-icon>settings</md-gb-icon>
</md-gb-icon-button>
</md-gb-toolbar>
</div>
`;
Expand All @@ -96,55 +105,61 @@ const playground: MaterialStoryInit<StoryKnobs> = {
const allVariants: MaterialStoryInit<StoryKnobs> = {
name: 'Expressive Variants',
styles,
render() {
render(knobs) {
return html`
<div class="demo-stack">
<div class="demo-container">
<md-gb-toolbar color="standard" aria-label="Standard floating">
<md-gb-button square type="toggle" selected>
<md-gb-toolbar
color="standard"
?hide-labels=${Boolean(knobs.hideLabels)}
aria-label="Standard floating">
<md-gb-button type="toggle" selected>
<md-gb-icon>star</md-gb-icon>
Starred
</md-gb-button>
<md-gb-button square type="toggle">
<md-gb-button type="toggle">
<md-gb-icon>visibility</md-gb-icon>
Preview
</md-gb-button>
<md-gb-icon-button square aria-label="Favorite" type="toggle">
<md-gb-icon-button aria-label="Favorite" type="toggle">
<md-gb-icon>favorite</md-gb-icon>
</md-gb-icon-button>
</md-gb-toolbar>
</div>

<div class="demo-container">
<md-gb-toolbar color="vibrant" aria-label="Vibrant floating">
<md-gb-button square type="toggle" selected>
<md-gb-toolbar
color="vibrant"
?hide-labels=${Boolean(knobs.hideLabels)}
aria-label="Vibrant floating">
<md-gb-button type="toggle" selected>
<md-gb-icon>auto_awesome</md-gb-icon>
Generate
</md-gb-button>
<md-gb-button square type="toggle">
<md-gb-button type="toggle">
<md-gb-icon>palette</md-gb-icon>
Theme
</md-gb-button>
<md-gb-icon-button
square
aria-label="Bookmark"
type="toggle"
selected>
<md-gb-icon-button aria-label="Bookmark" type="toggle" selected>
<md-gb-icon>bookmark</md-gb-icon>
</md-gb-icon-button>
</md-gb-toolbar>
</div>

<div class="demo-container">
<md-gb-toolbar color="standard" docked aria-label="Standard docked">
<md-gb-icon-button square aria-label="Home" type="toggle">
<md-gb-toolbar
color="standard"
docked
?hide-labels=${Boolean(knobs.hideLabels)}
aria-label="Standard docked">
<md-gb-icon-button aria-label="Home" type="toggle">
<md-gb-icon>home</md-gb-icon>
</md-gb-icon-button>
<md-gb-button square type="toggle" selected>
<md-gb-button type="toggle" selected>
<md-gb-icon>folder</md-gb-icon>
Files
</md-gb-button>
<md-gb-icon-button square aria-label="Image" type="toggle">
<md-gb-icon-button aria-label="Image" type="toggle">
<md-gb-icon>image</md-gb-icon>
</md-gb-icon-button>
</md-gb-toolbar>
Expand Down
Loading
Loading