material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-09-11 13:46:10 +03:00
Code Issues Projects Releases Wiki Activity

feat: add component convenience bundles

Browse Source 
PiperOrigin-RevId: 549723539
This commit is contained in:
Elizabeth Mitchell 2023-07-20 13:28:59 -07:00 committed by Copybara-Service
parent ec02fe40fc
commit ae407b0874
12 changed files with 208 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
all.ts Normal file
View 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
View 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)

7
fab/branded-fab.ts
View File

@ -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];
}

6
fab/demo/demo.ts
View File

@ -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'},

4
fab/demo/stories.ts
View File

@ -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;
}

5
fab/fab.ts
View File

@ -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];
}

6
fab/lib/fab.ts
View File

@ -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',
};
}
}
}

18
tabs/demo/stories.ts
View File

@ -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];

4
tabs/lib/tab.ts
View File

@ -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`.

4
tabs/lib/tabs.ts
View File

@ -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`.

2
tabs/tab.ts
View File

@ -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 {

2
tabs/tabs.ts
View File

@ -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 {