diff --git a/tabs/demo/stories.ts b/tabs/demo/stories.ts index 9b5dee09a1..3ae0fea3d7 100644 --- a/tabs/demo/stories.ts +++ b/tabs/demo/stories.ts @@ -49,7 +49,12 @@ const styles = css` md-tabs[variant~="vertical"].scrolling { block-size: 50vh; - }`; + } + + .controls { + height: 48px; + } + `; const primary: MaterialStoryInit = { name: 'Primary Tabs', @@ -379,7 +384,7 @@ const dynamic: MaterialStoryInit = { } return html` -
+
add html` - ${useIcon ? html`${icon}` : nothing} - ${useLabel ? html`${label}` : nothing}`; + return (icon: string, label: string) => { + const iconTemplate = + html``; + return html` + ${useIcon ? iconTemplate : nothing} + ${useLabel ? html`${label}` : nothing} + `; + }; } /** Tabs stories. */ diff --git a/tabs/lib/_tab.scss b/tabs/lib/_tab.scss index 11442600f3..e7cedb620c 100644 --- a/tabs/lib/_tab.scss +++ b/tabs/lib/_tab.scss @@ -54,8 +54,10 @@ @include focus-ring.theme( ( - shape: 8px, - offset: -7px, + // desired border-radius is 8px and it's internally calc'd as sum + // of shape + offset (-7 + 15) + shape: 15px, + offset: -7px ) ); } @@ -114,7 +116,9 @@ $_content-padding: 8px; // tabs are naturally sized up to their max height. max-height: calc(var(--_container-height) + 2 * $_content-padding); - padding: $_content-padding; + // min-height of touch target + min-height: 48px; + padding: $_content-padding calc(2 * $_content-padding); gap: 4px; } diff --git a/tabs/lib/tab.ts b/tabs/lib/tab.ts index d80cd5d86e..d0a5fd86fb 100644 --- a/tabs/lib/tab.ts +++ b/tabs/lib/tab.ts @@ -21,7 +21,7 @@ import {MdRipple} from '../../ripple/ripple.js'; /** * An element that can select items. */ -export interface SelectionGroupElement extends HTMLElement { +export interface Tabs extends HTMLElement { selected?: number; selectedItem?: Tab; previousSelectedItem?: Tab; @@ -55,15 +55,20 @@ export class Tab extends LitElement { @property({reflect: true}) variant: Variant = 'primary'; /** - * Whether or not the item is `disabled`. + * Whether or not the tab is `disabled`. */ @property({type: Boolean, reflect: true}) disabled = false; /** - * Whether or not the item is `selected`. + * Whether or not the tab is `selected`. **/ @property({type: Boolean, reflect: true}) selected = false; + /** + * Whether or not the tab is `focusable`. + */ + @property({type: Boolean}) focusable = false; + /** * Whether or not the icon renders inline with label or stacked vertically. */ @@ -102,7 +107,10 @@ export class Tab extends LitElement { }; return html`