mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
feat: add component convenience bundles
PiperOrigin-RevId: 549723539
This commit is contained in:
parent
ec02fe40fc
commit
ae407b0874
108
all.ts
Normal file
108
all.ts
Normal file
@ -0,0 +1,108 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2023 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* @fileoverview A convenience bundle import that includes all components.
|
||||
*
|
||||
* WARNING: This import is intended for prototyping and development builds only.
|
||||
* Import only the individual components used for production.
|
||||
*/
|
||||
|
||||
// LINT.IfChange(imports)
|
||||
// go/keep-sorted start
|
||||
import './button/elevated-button.js';
|
||||
import './button/filled-button.js';
|
||||
import './button/outlined-button.js';
|
||||
import './button/text-button.js';
|
||||
import './button/tonal-button.js';
|
||||
import './checkbox/checkbox.js';
|
||||
import './chips/assist-chip.js';
|
||||
import './chips/filter-chip.js';
|
||||
import './chips/input-chip.js';
|
||||
import './chips/suggestion-chip.js';
|
||||
import './dialog/dialog.js';
|
||||
import './divider/divider.js';
|
||||
import './elevation/elevation.js';
|
||||
import './fab/branded-fab.js';
|
||||
import './fab/fab.js';
|
||||
import './field/filled-field.js';
|
||||
import './field/outlined-field.js';
|
||||
import './focus/focus-ring.js';
|
||||
import './icon/icon.js';
|
||||
import './iconbutton/filled-icon-button.js';
|
||||
import './iconbutton/filled-tonal-icon-button.js';
|
||||
import './iconbutton/outlined-icon-button.js';
|
||||
import './iconbutton/standard-icon-button.js';
|
||||
import './list/list.js';
|
||||
import './list/list-item.js';
|
||||
import './list/list-item-link.js';
|
||||
import './menu/menu.js';
|
||||
import './menu/menu-item.js';
|
||||
import './menu/menu-item-link.js';
|
||||
import './menu/sub-menu-item.js';
|
||||
import './progress/circular-progress.js';
|
||||
import './progress/linear-progress.js';
|
||||
import './radio/radio.js';
|
||||
import './ripple/ripple.js';
|
||||
import './select/filled-select.js';
|
||||
import './select/outlined-select.js';
|
||||
import './select/select-option.js';
|
||||
import './slider/slider.js';
|
||||
import './switch/switch.js';
|
||||
import './tabs/tab.js';
|
||||
import './tabs/tabs.js';
|
||||
import './textfield/filled-text-field.js';
|
||||
import './textfield/outlined-text-field.js';
|
||||
// go/keep-sorted end
|
||||
// LINT.ThenChange(:exports)
|
||||
|
||||
// LINT.IfChange(exports)
|
||||
// go/keep-sorted start
|
||||
export * from './button/elevated-button.js';
|
||||
export * from './button/filled-button.js';
|
||||
export * from './button/outlined-button.js';
|
||||
export * from './button/text-button.js';
|
||||
export * from './button/tonal-button.js';
|
||||
export * from './checkbox/checkbox.js';
|
||||
export * from './chips/assist-chip.js';
|
||||
export * from './chips/filter-chip.js';
|
||||
export * from './chips/input-chip.js';
|
||||
export * from './chips/suggestion-chip.js';
|
||||
export * from './dialog/dialog.js';
|
||||
export * from './divider/divider.js';
|
||||
export * from './elevation/elevation.js';
|
||||
export * from './fab/branded-fab.js';
|
||||
export * from './fab/fab.js';
|
||||
export * from './field/filled-field.js';
|
||||
export * from './field/outlined-field.js';
|
||||
export * from './focus/focus-ring.js';
|
||||
export * from './icon/icon.js';
|
||||
export * from './iconbutton/filled-icon-button.js';
|
||||
export * from './iconbutton/filled-tonal-icon-button.js';
|
||||
export * from './iconbutton/outlined-icon-button.js';
|
||||
export * from './iconbutton/standard-icon-button.js';
|
||||
export * from './list/list.js';
|
||||
export * from './list/list-item.js';
|
||||
export * from './list/list-item-link.js';
|
||||
export * from './menu/menu.js';
|
||||
export * from './menu/menu-item.js';
|
||||
export * from './menu/menu-item-link.js';
|
||||
export * from './menu/sub-menu-item.js';
|
||||
export * from './progress/circular-progress.js';
|
||||
export * from './progress/linear-progress.js';
|
||||
export * from './radio/radio.js';
|
||||
export * from './ripple/ripple.js';
|
||||
export * from './select/filled-select.js';
|
||||
export * from './select/outlined-select.js';
|
||||
export * from './select/select-option.js';
|
||||
export * from './slider/slider.js';
|
||||
export * from './switch/switch.js';
|
||||
export * from './tabs/tab.js';
|
||||
export * from './tabs/tabs.js';
|
||||
export * from './textfield/filled-text-field.js';
|
||||
export * from './textfield/outlined-text-field.js';
|
||||
// go/keep-sorted end
|
||||
// LINT.ThenChange(:imports)
|
72
common.ts
Normal file
72
common.ts
Normal file
@ -0,0 +1,72 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2023 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* @fileoverview A convenience bundle import that includes common components.
|
||||
*
|
||||
* WARNING: This import is intended for prototyping and development builds only.
|
||||
* It is smaller than `@material/web/all.js` and includes the most common
|
||||
* components for starting a project. Import only the individual components used
|
||||
* for production.
|
||||
*/
|
||||
|
||||
// LINT.IfChange(imports)
|
||||
// go/keep-sorted start
|
||||
import './button/filled-button.js';
|
||||
import './button/outlined-button.js';
|
||||
import './button/text-button.js';
|
||||
import './checkbox/checkbox.js';
|
||||
import './chips/assist-chip.js';
|
||||
import './chips/filter-chip.js';
|
||||
import './dialog/dialog.js';
|
||||
import './icon/icon.js';
|
||||
import './iconbutton/standard-icon-button.js';
|
||||
import './list/list.js';
|
||||
import './list/list-item.js';
|
||||
import './list/list-item-link.js';
|
||||
import './menu/menu.js';
|
||||
import './menu/menu-item.js';
|
||||
import './menu/menu-item-link.js';
|
||||
import './menu/sub-menu-item.js';
|
||||
import './progress/circular-progress.js';
|
||||
import './progress/linear-progress.js';
|
||||
import './radio/radio.js';
|
||||
import './select/outlined-select.js';
|
||||
import './select/select-option.js';
|
||||
import './tabs/tab.js';
|
||||
import './tabs/tabs.js';
|
||||
import './textfield/outlined-text-field.js';
|
||||
// go/keep-sorted end
|
||||
// LINT.ThenChange(:exports)
|
||||
|
||||
// LINT.IfChange(exports)
|
||||
// go/keep-sorted start
|
||||
export * from './button/filled-button.js';
|
||||
export * from './button/outlined-button.js';
|
||||
export * from './button/text-button.js';
|
||||
export * from './checkbox/checkbox.js';
|
||||
export * from './chips/assist-chip.js';
|
||||
export * from './chips/filter-chip.js';
|
||||
export * from './dialog/dialog.js';
|
||||
export * from './icon/icon.js';
|
||||
export * from './iconbutton/standard-icon-button.js';
|
||||
export * from './list/list.js';
|
||||
export * from './list/list-item.js';
|
||||
export * from './list/list-item-link.js';
|
||||
export * from './menu/menu.js';
|
||||
export * from './menu/menu-item.js';
|
||||
export * from './menu/menu-item-link.js';
|
||||
export * from './menu/sub-menu-item.js';
|
||||
export * from './progress/circular-progress.js';
|
||||
export * from './progress/linear-progress.js';
|
||||
export * from './radio/radio.js';
|
||||
export * from './select/outlined-select.js';
|
||||
export * from './select/select-option.js';
|
||||
export * from './tabs/tab.js';
|
||||
export * from './tabs/tabs.js';
|
||||
export * from './textfield/outlined-text-field.js';
|
||||
// go/keep-sorted end
|
||||
// LINT.ThenChange(:imports)
|
@ -6,7 +6,7 @@
|
||||
|
||||
import {customElement} from 'lit/decorators.js';
|
||||
|
||||
import {Fab, Variant} from './lib/fab.js';
|
||||
import {Fab, FabVariant} from './lib/fab.js';
|
||||
import {styles} from './lib/fab-branded-styles.css.js';
|
||||
import {styles as forcedColors} from './lib/forced-colors-styles.css.js';
|
||||
import {styles as sharedStyles} from './lib/shared-styles.css.js';
|
||||
@ -52,7 +52,7 @@ export class MdBrandedFab extends Fab {
|
||||
/**
|
||||
* Branded FABs have no variants
|
||||
*/
|
||||
override variant!: Variant;
|
||||
override variant!: FabVariant;
|
||||
|
||||
override getRenderClasses() {
|
||||
return {
|
||||
@ -63,6 +63,5 @@ export class MdBrandedFab extends Fab {
|
||||
'small': false,
|
||||
};
|
||||
}
|
||||
static override styles =
|
||||
[sharedStyles, styles, forcedColors];
|
||||
static override styles = [sharedStyles, styles, forcedColors];
|
||||
}
|
||||
|
@ -7,7 +7,7 @@
|
||||
import './index.js';
|
||||
import './material-collection.js';
|
||||
|
||||
import {FabSize, Variant} from '@material/web/fab/fab.js';
|
||||
import {FabSize, FabVariant} from '@material/web/fab/fab.js';
|
||||
import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
|
||||
import {boolInput, Knob, selectDropdown, textInput} from './index.js';
|
||||
|
||||
@ -28,8 +28,8 @@ const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Fab', [
|
||||
})
|
||||
}),
|
||||
new Knob('variant', {
|
||||
defaultValue: 'surface' as Variant,
|
||||
ui: selectDropdown<Variant>({
|
||||
defaultValue: 'surface' as FabVariant,
|
||||
ui: selectDropdown<FabVariant>({
|
||||
options: [
|
||||
{label: 'surface', value: 'surface'},
|
||||
{label: 'primary', value: 'primary'},
|
||||
|
@ -8,7 +8,7 @@ import '@material/web/fab/fab.js';
|
||||
import '@material/web/icon/icon.js';
|
||||
import '@material/web/fab/branded-fab.js';
|
||||
|
||||
import {FabSize, Variant} from '@material/web/fab/fab.js';
|
||||
import {FabSize, FabVariant} from '@material/web/fab/fab.js';
|
||||
import {MaterialStoryInit} from './material-collection.js';
|
||||
import {css, html} from 'lit';
|
||||
|
||||
@ -18,7 +18,7 @@ export interface StoryKnobs {
|
||||
label: string;
|
||||
lowered: boolean;
|
||||
size: FabSize|undefined;
|
||||
variant: Variant|undefined;
|
||||
variant: FabVariant|undefined;
|
||||
reducedTouchTarget: boolean;
|
||||
hasIcon: boolean;
|
||||
}
|
||||
|
@ -11,7 +11,7 @@ import {styles} from './lib/fab-styles.css.js';
|
||||
import {styles as forcedColors} from './lib/forced-colors-styles.css.js';
|
||||
import {styles as sharedStyles} from './lib/shared-styles.css.js';
|
||||
|
||||
export {Variant} from './lib/fab.js';
|
||||
export {FabVariant} from './lib/fab.js';
|
||||
export {FabSize} from './lib/shared.js';
|
||||
|
||||
declare global {
|
||||
@ -49,6 +49,5 @@ declare global {
|
||||
*/
|
||||
@customElement('md-fab')
|
||||
export class MdFab extends Fab {
|
||||
static override styles =
|
||||
[sharedStyles, styles, forcedColors];
|
||||
static override styles = [sharedStyles, styles, forcedColors];
|
||||
}
|
||||
|
@ -11,14 +11,14 @@ import {SharedFab} from './shared.js';
|
||||
/**
|
||||
* The variants available to non-branded FABs.
|
||||
*/
|
||||
export type Variant = 'surface'|'primary'|'secondary'|'tertiary';
|
||||
export type FabVariant = 'surface'|'primary'|'secondary'|'tertiary';
|
||||
|
||||
// tslint:disable-next-line:enforce-comments-on-exported-symbols
|
||||
export class Fab extends SharedFab {
|
||||
/**
|
||||
* The FAB color variant to render.
|
||||
*/
|
||||
@property() variant: Variant = 'surface';
|
||||
@property() variant: FabVariant = 'surface';
|
||||
|
||||
override getRenderClasses() {
|
||||
return {
|
||||
@ -28,4 +28,4 @@ export class Fab extends SharedFab {
|
||||
'tertiary': this.variant === 'tertiary',
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -9,7 +9,7 @@ import '@material/web/iconbutton/standard-icon-button.js';
|
||||
import '@material/web/tabs/tabs.js';
|
||||
|
||||
import {MaterialStoryInit} from './material-collection.js';
|
||||
import {MdTabs, Variant} from '@material/web/tabs/tabs.js';
|
||||
import {MdTabs, TabVariant} from '@material/web/tabs/tabs.js';
|
||||
import {css, html, nothing} from 'lit';
|
||||
import {classMap} from 'lit/directives/class-map.js';
|
||||
|
||||
@ -63,7 +63,7 @@ const primary: MaterialStoryInit<StoryKnobs> = {
|
||||
const tabContent = getTabContentGenerator(knobs);
|
||||
const inlineIcon = knobs.inlineIcon;
|
||||
const vertical = knobs.vertical ? 'vertical' : '';
|
||||
const variant = `primary ${vertical}` as Variant;
|
||||
const variant = `primary ${vertical}` as TabVariant;
|
||||
const classes = {vertical};
|
||||
|
||||
return html`
|
||||
@ -100,7 +100,7 @@ const secondary: MaterialStoryInit<StoryKnobs> = {
|
||||
const tabContent = getTabContentGenerator(knobs);
|
||||
const inlineIcon = knobs.inlineIcon;
|
||||
const vertical = knobs.vertical ? 'vertical' : '';
|
||||
const variant = `secondary ${vertical}` as Variant;
|
||||
const variant = `secondary ${vertical}` as TabVariant;
|
||||
const classes = {vertical};
|
||||
|
||||
return html`
|
||||
@ -134,7 +134,7 @@ const scrolling: MaterialStoryInit<StoryKnobs> = {
|
||||
const tabContent = getTabContentGenerator(knobs);
|
||||
const inlineIcon = knobs.inlineIcon;
|
||||
const vertical = knobs.vertical ? 'vertical' : '';
|
||||
const variant = `primary ${vertical}` as Variant;
|
||||
const variant = `primary ${vertical}` as TabVariant;
|
||||
const classes = {vertical, scrolling: true};
|
||||
|
||||
return html`
|
||||
@ -197,7 +197,7 @@ const custom: MaterialStoryInit<StoryKnobs> = {
|
||||
const tabContent = getTabContentGenerator(knobs);
|
||||
const inlineIcon = knobs.inlineIcon;
|
||||
const vertical = knobs.vertical ? 'vertical' : '';
|
||||
const variant = `primary ${vertical}` as Variant;
|
||||
const variant = `primary ${vertical}` as TabVariant;
|
||||
const classes = {vertical, custom: true};
|
||||
|
||||
return html`
|
||||
@ -231,8 +231,8 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
|
||||
const tabContent = getTabContentGenerator(knobs);
|
||||
const inlineIcon = knobs.inlineIcon;
|
||||
const vertical = knobs.vertical ? 'vertical' : '';
|
||||
const variant = `primary ${vertical}` as Variant;
|
||||
const secondaryVariant = `secondary ${vertical}` as Variant;
|
||||
const variant = `primary ${vertical}` as TabVariant;
|
||||
const secondaryVariant = `secondary ${vertical}` as TabVariant;
|
||||
const classes = {vertical};
|
||||
|
||||
// show the selected secondary tabs
|
||||
@ -334,7 +334,7 @@ const dynamic: MaterialStoryInit<StoryKnobs> = {
|
||||
render(knobs) {
|
||||
const inlineIcon = knobs.inlineIcon;
|
||||
const vertical = knobs.vertical ? 'vertical' : '';
|
||||
const variant = `primary ${vertical}` as Variant;
|
||||
const variant = `primary ${vertical}` as TabVariant;
|
||||
const classes = {vertical, scrolling: true};
|
||||
|
||||
function getTabs(event: Event) {
|
||||
@ -430,4 +430,4 @@ function getTabContentGenerator(knobs: StoryKnobs) {
|
||||
|
||||
/** Tabs stories. */
|
||||
export const stories =
|
||||
[primary, secondary, scrolling, custom, primaryAndSecondary, dynamic];
|
||||
[primary, secondary, scrolling, custom, primaryAndSecondary, dynamic];
|
||||
|
@ -32,7 +32,7 @@ type Orientation = ''|'vertical';
|
||||
* Tab variant can be `primary` or `secondary and can include a space
|
||||
* separated `vertical`.
|
||||
*/
|
||||
export type Variant = Style|`${Style} ${Orientation}`|`${Orientation} ${Style}`;
|
||||
export type TabVariant = Style|`${Style} ${Orientation}`|`${Orientation} ${Style}`;
|
||||
|
||||
/**
|
||||
* Tab component.
|
||||
@ -51,7 +51,7 @@ export class Tab extends LitElement {
|
||||
* include `vertical`.
|
||||
* Defaults to `primary`.
|
||||
*/
|
||||
@property({reflect: true}) variant: Variant = 'primary';
|
||||
@property({reflect: true}) variant: TabVariant = 'primary';
|
||||
|
||||
/**
|
||||
* Whether or not the tab is `disabled`.
|
||||
|
@ -7,7 +7,7 @@
|
||||
import {html, isServer, LitElement, PropertyValues} from 'lit';
|
||||
import {property, queryAssignedElements, state} from 'lit/decorators.js';
|
||||
|
||||
import {Tab, Variant} from './tab.js';
|
||||
import {Tab, TabVariant} from './tab.js';
|
||||
|
||||
const NAVIGATION_KEYS = new Map([
|
||||
['default', new Set(['Home', 'End'])],
|
||||
@ -51,7 +51,7 @@ export class Tabs extends LitElement {
|
||||
* include `vertical`.
|
||||
* Defaults to `primary`.
|
||||
*/
|
||||
@property({reflect: true}) variant: Variant = 'primary';
|
||||
@property({reflect: true}) variant: TabVariant = 'primary';
|
||||
|
||||
/**
|
||||
* Whether or not the item is `disabled`.
|
||||
|
@ -9,7 +9,7 @@ import {customElement} from 'lit/decorators.js';
|
||||
import {Tab} from './lib/tab.js';
|
||||
import {styles} from './lib/tab-styles.css.js';
|
||||
|
||||
export {Variant} from './lib/tab.js';
|
||||
export {TabVariant} from './lib/tab.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
@ -11,7 +11,7 @@ import {customElement} from 'lit/decorators.js';
|
||||
import {Tabs} from './lib/tabs.js';
|
||||
import {styles} from './lib/tabs-styles.css.js';
|
||||
|
||||
export {Variant, MdTab} from './tab.js';
|
||||
export {MdTab, TabVariant} from './tab.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
Loading…
Reference in New Issue
Block a user