mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 17:40:40 +03:00
fix(tabs)!: secondary tabs always have inline icons
PiperOrigin-RevId: 561157766
This commit is contained in:
parent
2f9cc208df
commit
6b2955bffe
@ -82,23 +82,22 @@ const secondary: MaterialStoryInit<StoryKnobs> = {
|
||||
styles,
|
||||
render(knobs) {
|
||||
const tabContent = getTabContentGenerator(knobs);
|
||||
const inlineIcon = knobs.inlineIcon;
|
||||
|
||||
return html`
|
||||
<md-tabs
|
||||
.selected=${knobs.selected}
|
||||
.selectOnFocus=${knobs.selectOnFocus}
|
||||
>
|
||||
<md-secondary-tab .inlineIcon=${inlineIcon}>
|
||||
<md-secondary-tab>
|
||||
${tabContent('flight', 'Travel')}
|
||||
</md-secondary-tab>
|
||||
<md-secondary-tab .inlineIcon=${inlineIcon}>
|
||||
<md-secondary-tab>
|
||||
${tabContent('hotel', 'Hotel')}
|
||||
</md-secondary-tab>
|
||||
<md-secondary-tab .inlineIcon=${inlineIcon}>
|
||||
<md-secondary-tab>
|
||||
${tabContent('hiking', 'Activities')}
|
||||
</md-secondary-tab>
|
||||
<md-secondary-tab .inlineIcon=${inlineIcon}>
|
||||
<md-secondary-tab>
|
||||
${tabContent('restaurant', 'Food')}
|
||||
</md-secondary-tab>
|
||||
</md-tabs>`;
|
||||
|
@ -58,4 +58,13 @@
|
||||
var(--_container-shape)
|
||||
);
|
||||
}
|
||||
|
||||
.content.stacked {
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.content.stacked.has-icon.has-label {
|
||||
height: var(--_with-icon-and-label-text-container-height);
|
||||
}
|
||||
}
|
||||
|
@ -57,8 +57,5 @@
|
||||
--md-secondary-tab-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
|
||||
// TODO(b/293503309): remove once secondary tabs only use inline icons
|
||||
--_with-icon-and-label-text-container-height: 64px;
|
||||
}
|
||||
}
|
||||
|
@ -89,19 +89,10 @@
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--_container-height);
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.content.has-icon.has-label:not(.inline-icon) {
|
||||
height: var(--_with-icon-and-label-text-container-height);
|
||||
}
|
||||
|
||||
.content.inline-icon {
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
|
@ -4,9 +4,23 @@
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import {property} from 'lit/decorators.js';
|
||||
|
||||
import {Tab} from './tab.js';
|
||||
|
||||
/**
|
||||
* A primary tab component.
|
||||
*/
|
||||
export class PrimaryTab extends Tab {}
|
||||
export class PrimaryTab extends Tab {
|
||||
/**
|
||||
* Whether or not the icon renders inline with label or stacked vertically.
|
||||
*/
|
||||
@property({type: Boolean, attribute: 'inline-icon'}) inlineIcon = false;
|
||||
|
||||
protected override getContentClasses() {
|
||||
return {
|
||||
...super.getContentClasses(),
|
||||
'stacked': !this.inlineIcon,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
@ -51,11 +51,6 @@ export class Tab extends LitElement {
|
||||
*/
|
||||
@property({type: Boolean}) focusable = false;
|
||||
|
||||
/**
|
||||
* Whether or not the icon renders inline with label or stacked vertically.
|
||||
*/
|
||||
@property({type: Boolean, attribute: 'inline-icon'}) inlineIcon = false;
|
||||
|
||||
/**
|
||||
* In SSR, set this to true when an icon is present.
|
||||
*/
|
||||
@ -93,12 +88,6 @@ export class Tab extends LitElement {
|
||||
}
|
||||
|
||||
protected override render() {
|
||||
const contentClasses = {
|
||||
'inline-icon': this.inlineIcon,
|
||||
'has-icon': this.hasIcon,
|
||||
'has-label': !this.iconOnly,
|
||||
};
|
||||
|
||||
const indicator = html`<div class="indicator"></div>`;
|
||||
// Needed for closure conformance
|
||||
const {ariaLabel} = this as ARIAMixinStrict;
|
||||
@ -113,7 +102,7 @@ export class Tab extends LitElement {
|
||||
<md-focus-ring part="focus-ring" inward></md-focus-ring>
|
||||
<md-elevation></md-elevation>
|
||||
<md-ripple></md-ripple>
|
||||
<div class="content ${classMap(contentClasses)}">
|
||||
<div class="content ${classMap(this.getContentClasses())}">
|
||||
<slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
|
||||
<slot @slotchange=${this.handleSlotChange}></slot>
|
||||
${this.fullWidthIndicator ? nothing : indicator}
|
||||
@ -122,6 +111,13 @@ export class Tab extends LitElement {
|
||||
</button>`;
|
||||
}
|
||||
|
||||
protected getContentClasses() {
|
||||
return {
|
||||
'has-icon': this.hasIcon,
|
||||
'has-label': !this.iconOnly,
|
||||
};
|
||||
}
|
||||
|
||||
protected override updated(changed: PropertyValues) {
|
||||
if (changed.has('selected')) {
|
||||
this.animateSelected();
|
||||
|
Loading…
Reference in New Issue
Block a user