Skip to content

Commit ae407b0

Browse files
asyncLizcopybara-github
asyncLiz
authored and
copybara-github
committed
feat: add component convenience bundles
PiperOrigin-RevId: 549723539
1 parent ec02fe4 commit ae407b0

File tree

12 files changed

+208
-30
lines changed

12 files changed

+208
-30
lines changed

‎all.ts

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/**
2+
* @license
3+
* Copyright 2023 Google LLC
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
7+
/**
8+
* @fileoverview A convenience bundle import that includes all components.
9+
*
10+
* WARNING: This import is intended for prototyping and development builds only.
11+
* Import only the individual components used for production.
12+
*/
13+
14+
// LINT.IfChange(imports)
15+
// go/keep-sorted start
16+
import './button/elevated-button.js';
17+
import './button/filled-button.js';
18+
import './button/outlined-button.js';
19+
import './button/text-button.js';
20+
import './button/tonal-button.js';
21+
import './checkbox/checkbox.js';
22+
import './chips/assist-chip.js';
23+
import './chips/filter-chip.js';
24+
import './chips/input-chip.js';
25+
import './chips/suggestion-chip.js';
26+
import './dialog/dialog.js';
27+
import './divider/divider.js';
28+
import './elevation/elevation.js';
29+
import './fab/branded-fab.js';
30+
import './fab/fab.js';
31+
import './field/filled-field.js';
32+
import './field/outlined-field.js';
33+
import './focus/focus-ring.js';
34+
import './icon/icon.js';
35+
import './iconbutton/filled-icon-button.js';
36+
import './iconbutton/filled-tonal-icon-button.js';
37+
import './iconbutton/outlined-icon-button.js';
38+
import './iconbutton/standard-icon-button.js';
39+
import './list/list.js';
40+
import './list/list-item.js';
41+
import './list/list-item-link.js';
42+
import './menu/menu.js';
43+
import './menu/menu-item.js';
44+
import './menu/menu-item-link.js';
45+
import './menu/sub-menu-item.js';
46+
import './progress/circular-progress.js';
47+
import './progress/linear-progress.js';
48+
import './radio/radio.js';
49+
import './ripple/ripple.js';
50+
import './select/filled-select.js';
51+
import './select/outlined-select.js';
52+
import './select/select-option.js';
53+
import './slider/slider.js';
54+
import './switch/switch.js';
55+
import './tabs/tab.js';
56+
import './tabs/tabs.js';
57+
import './textfield/filled-text-field.js';
58+
import './textfield/outlined-text-field.js';
59+
// go/keep-sorted end
60+
// LINT.ThenChange(:exports)
61+
62+
// LINT.IfChange(exports)
63+
// go/keep-sorted start
64+
export * from './button/elevated-button.js';
65+
export * from './button/filled-button.js';
66+
export * from './button/outlined-button.js';
67+
export * from './button/text-button.js';
68+
export * from './button/tonal-button.js';
69+
export * from './checkbox/checkbox.js';
70+
export * from './chips/assist-chip.js';
71+
export * from './chips/filter-chip.js';
72+
export * from './chips/input-chip.js';
73+
export * from './chips/suggestion-chip.js';
74+
export * from './dialog/dialog.js';
75+
export * from './divider/divider.js';
76+
export * from './elevation/elevation.js';
77+
export * from './fab/branded-fab.js';
78+
export * from './fab/fab.js';
79+
export * from './field/filled-field.js';
80+
export * from './field/outlined-field.js';
81+
export * from './focus/focus-ring.js';
82+
export * from './icon/icon.js';
83+
export * from './iconbutton/filled-icon-button.js';
84+
export * from './iconbutton/filled-tonal-icon-button.js';
85+
export * from './iconbutton/outlined-icon-button.js';
86+
export * from './iconbutton/standard-icon-button.js';
87+
export * from './list/list.js';
88+
export * from './list/list-item.js';
89+
export * from './list/list-item-link.js';
90+
export * from './menu/menu.js';
91+
export * from './menu/menu-item.js';
92+
export * from './menu/menu-item-link.js';
93+
export * from './menu/sub-menu-item.js';
94+
export * from './progress/circular-progress.js';
95+
export * from './progress/linear-progress.js';
96+
export * from './radio/radio.js';
97+
export * from './ripple/ripple.js';
98+
export * from './select/filled-select.js';
99+
export * from './select/outlined-select.js';
100+
export * from './select/select-option.js';
101+
export * from './slider/slider.js';
102+
export * from './switch/switch.js';
103+
export * from './tabs/tab.js';
104+
export * from './tabs/tabs.js';
105+
export * from './textfield/filled-text-field.js';
106+
export * from './textfield/outlined-text-field.js';
107+
// go/keep-sorted end
108+
// LINT.ThenChange(:imports)

‎common.ts

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/**
2+
* @license
3+
* Copyright 2023 Google LLC
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
7+
/**
8+
* @fileoverview A convenience bundle import that includes common components.
9+
*
10+
* WARNING: This import is intended for prototyping and development builds only.
11+
* It is smaller than `@material/web/all.js` and includes the most common
12+
* components for starting a project. Import only the individual components used
13+
* for production.
14+
*/
15+
16+
// LINT.IfChange(imports)
17+
// go/keep-sorted start
18+
import './button/filled-button.js';
19+
import './button/outlined-button.js';
20+
import './button/text-button.js';
21+
import './checkbox/checkbox.js';
22+
import './chips/assist-chip.js';
23+
import './chips/filter-chip.js';
24+
import './dialog/dialog.js';
25+
import './icon/icon.js';
26+
import './iconbutton/standard-icon-button.js';
27+
import './list/list.js';
28+
import './list/list-item.js';
29+
import './list/list-item-link.js';
30+
import './menu/menu.js';
31+
import './menu/menu-item.js';
32+
import './menu/menu-item-link.js';
33+
import './menu/sub-menu-item.js';
34+
import './progress/circular-progress.js';
35+
import './progress/linear-progress.js';
36+
import './radio/radio.js';
37+
import './select/outlined-select.js';
38+
import './select/select-option.js';
39+
import './tabs/tab.js';
40+
import './tabs/tabs.js';
41+
import './textfield/outlined-text-field.js';
42+
// go/keep-sorted end
43+
// LINT.ThenChange(:exports)
44+
45+
// LINT.IfChange(exports)
46+
// go/keep-sorted start
47+
export * from './button/filled-button.js';
48+
export * from './button/outlined-button.js';
49+
export * from './button/text-button.js';
50+
export * from './checkbox/checkbox.js';
51+
export * from './chips/assist-chip.js';
52+
export * from './chips/filter-chip.js';
53+
export * from './dialog/dialog.js';
54+
export * from './icon/icon.js';
55+
export * from './iconbutton/standard-icon-button.js';
56+
export * from './list/list.js';
57+
export * from './list/list-item.js';
58+
export * from './list/list-item-link.js';
59+
export * from './menu/menu.js';
60+
export * from './menu/menu-item.js';
61+
export * from './menu/menu-item-link.js';
62+
export * from './menu/sub-menu-item.js';
63+
export * from './progress/circular-progress.js';
64+
export * from './progress/linear-progress.js';
65+
export * from './radio/radio.js';
66+
export * from './select/outlined-select.js';
67+
export * from './select/select-option.js';
68+
export * from './tabs/tab.js';
69+
export * from './tabs/tabs.js';
70+
export * from './textfield/outlined-text-field.js';
71+
// go/keep-sorted end
72+
// LINT.ThenChange(:imports)

‎fab/branded-fab.ts

+3-4
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
import {customElement} from 'lit/decorators.js';
88

9-
import {Fab, Variant} from './lib/fab.js';
9+
import {Fab, FabVariant} from './lib/fab.js';
1010
import {styles} from './lib/fab-branded-styles.css.js';
1111
import {styles as forcedColors} from './lib/forced-colors-styles.css.js';
1212
import {styles as sharedStyles} from './lib/shared-styles.css.js';
@@ -52,7 +52,7 @@ export class MdBrandedFab extends Fab {
5252
/**
5353
* Branded FABs have no variants
5454
*/
55-
override variant!: Variant;
55+
override variant!: FabVariant;
5656

5757
override getRenderClasses() {
5858
return {
@@ -63,6 +63,5 @@ export class MdBrandedFab extends Fab {
6363
'small': false,
6464
};
6565
}
66-
static override styles =
67-
[sharedStyles, styles, forcedColors];
66+
static override styles = [sharedStyles, styles, forcedColors];
6867
}

‎fab/demo/demo.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import './index.js';
88
import './material-collection.js';
99

10-
import {FabSize, Variant} from '@material/web/fab/fab.js';
10+
import {FabSize, FabVariant} from '@material/web/fab/fab.js';
1111
import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
1212
import {boolInput, Knob, selectDropdown, textInput} from './index.js';
1313

@@ -28,8 +28,8 @@ const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Fab', [
2828
})
2929
}),
3030
new Knob('variant', {
31-
defaultValue: 'surface' as Variant,
32-
ui: selectDropdown<Variant>({
31+
defaultValue: 'surface' as FabVariant,
32+
ui: selectDropdown<FabVariant>({
3333
options: [
3434
{label: 'surface', value: 'surface'},
3535
{label: 'primary', value: 'primary'},

‎fab/demo/stories.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import '@material/web/fab/fab.js';
88
import '@material/web/icon/icon.js';
99
import '@material/web/fab/branded-fab.js';
1010

11-
import {FabSize, Variant} from '@material/web/fab/fab.js';
11+
import {FabSize, FabVariant} from '@material/web/fab/fab.js';
1212
import {MaterialStoryInit} from './material-collection.js';
1313
import {css, html} from 'lit';
1414

@@ -18,7 +18,7 @@ export interface StoryKnobs {
1818
label: string;
1919
lowered: boolean;
2020
size: FabSize|undefined;
21-
variant: Variant|undefined;
21+
variant: FabVariant|undefined;
2222
reducedTouchTarget: boolean;
2323
hasIcon: boolean;
2424
}

‎fab/fab.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {styles} from './lib/fab-styles.css.js';
1111
import {styles as forcedColors} from './lib/forced-colors-styles.css.js';
1212
import {styles as sharedStyles} from './lib/shared-styles.css.js';
1313

14-
export {Variant} from './lib/fab.js';
14+
export {FabVariant} from './lib/fab.js';
1515
export {FabSize} from './lib/shared.js';
1616

1717
declare global {
@@ -49,6 +49,5 @@ declare global {
4949
*/
5050
@customElement('md-fab')
5151
export class MdFab extends Fab {
52-
static override styles =
53-
[sharedStyles, styles, forcedColors];
52+
static override styles = [sharedStyles, styles, forcedColors];
5453
}

‎fab/lib/fab.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ import {SharedFab} from './shared.js';
1111
/**
1212
* The variants available to non-branded FABs.
1313
*/
14-
export type Variant = 'surface'|'primary'|'secondary'|'tertiary';
14+
export type FabVariant = 'surface'|'primary'|'secondary'|'tertiary';
1515

1616
// tslint:disable-next-line:enforce-comments-on-exported-symbols
1717
export class Fab extends SharedFab {
1818
/**
1919
* The FAB color variant to render.
2020
*/
21-
@property() variant: Variant = 'surface';
21+
@property() variant: FabVariant = 'surface';
2222

2323
override getRenderClasses() {
2424
return {
@@ -28,4 +28,4 @@ export class Fab extends SharedFab {
2828
'tertiary': this.variant === 'tertiary',
2929
};
3030
}
31-
}
31+
}

‎tabs/demo/stories.ts

+9-9
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import '@material/web/iconbutton/standard-icon-button.js';
99
import '@material/web/tabs/tabs.js';
1010

1111
import {MaterialStoryInit} from './material-collection.js';
12-
import {MdTabs, Variant} from '@material/web/tabs/tabs.js';
12+
import {MdTabs, TabVariant} from '@material/web/tabs/tabs.js';
1313
import {css, html, nothing} from 'lit';
1414
import {classMap} from 'lit/directives/class-map.js';
1515

@@ -63,7 +63,7 @@ const primary: MaterialStoryInit<StoryKnobs> = {
6363
const tabContent = getTabContentGenerator(knobs);
6464
const inlineIcon = knobs.inlineIcon;
6565
const vertical = knobs.vertical ? 'vertical' : '';
66-
const variant = `primary ${vertical}` as Variant;
66+
const variant = `primary ${vertical}` as TabVariant;
6767
const classes = {vertical};
6868

6969
return html`
@@ -100,7 +100,7 @@ const secondary: MaterialStoryInit<StoryKnobs> = {
100100
const tabContent = getTabContentGenerator(knobs);
101101
const inlineIcon = knobs.inlineIcon;
102102
const vertical = knobs.vertical ? 'vertical' : '';
103-
const variant = `secondary ${vertical}` as Variant;
103+
const variant = `secondary ${vertical}` as TabVariant;
104104
const classes = {vertical};
105105

106106
return html`
@@ -134,7 +134,7 @@ const scrolling: MaterialStoryInit<StoryKnobs> = {
134134
const tabContent = getTabContentGenerator(knobs);
135135
const inlineIcon = knobs.inlineIcon;
136136
const vertical = knobs.vertical ? 'vertical' : '';
137-
const variant = `primary ${vertical}` as Variant;
137+
const variant = `primary ${vertical}` as TabVariant;
138138
const classes = {vertical, scrolling: true};
139139

140140
return html`
@@ -197,7 +197,7 @@ const custom: MaterialStoryInit<StoryKnobs> = {
197197
const tabContent = getTabContentGenerator(knobs);
198198
const inlineIcon = knobs.inlineIcon;
199199
const vertical = knobs.vertical ? 'vertical' : '';
200-
const variant = `primary ${vertical}` as Variant;
200+
const variant = `primary ${vertical}` as TabVariant;
201201
const classes = {vertical, custom: true};
202202

203203
return html`
@@ -231,8 +231,8 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
231231
const tabContent = getTabContentGenerator(knobs);
232232
const inlineIcon = knobs.inlineIcon;
233233
const vertical = knobs.vertical ? 'vertical' : '';
234-
const variant = `primary ${vertical}` as Variant;
235-
const secondaryVariant = `secondary ${vertical}` as Variant;
234+
const variant = `primary ${vertical}` as TabVariant;
235+
const secondaryVariant = `secondary ${vertical}` as TabVariant;
236236
const classes = {vertical};
237237

238238
// show the selected secondary tabs
@@ -334,7 +334,7 @@ const dynamic: MaterialStoryInit<StoryKnobs> = {
334334
render(knobs) {
335335
const inlineIcon = knobs.inlineIcon;
336336
const vertical = knobs.vertical ? 'vertical' : '';
337-
const variant = `primary ${vertical}` as Variant;
337+
const variant = `primary ${vertical}` as TabVariant;
338338
const classes = {vertical, scrolling: true};
339339

340340
function getTabs(event: Event) {
@@ -430,4 +430,4 @@ function getTabContentGenerator(knobs: StoryKnobs) {
430430

431431
/** Tabs stories. */
432432
export const stories =
433-
[primary, secondary, scrolling, custom, primaryAndSecondary, dynamic];
433+
[primary, secondary, scrolling, custom, primaryAndSecondary, dynamic];

‎tabs/lib/tab.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ type Orientation = ''|'vertical';
3232
* Tab variant can be `primary` or `secondary and can include a space
3333
* separated `vertical`.
3434
*/
35-
export type Variant = Style|`${Style} ${Orientation}`|`${Orientation} ${Style}`;
35+
export type TabVariant = Style|`${Style} ${Orientation}`|`${Orientation} ${Style}`;
3636

3737
/**
3838
* Tab component.
@@ -51,7 +51,7 @@ export class Tab extends LitElement {
5151
* include `vertical`.
5252
* Defaults to `primary`.
5353
*/
54-
@property({reflect: true}) variant: Variant = 'primary';
54+
@property({reflect: true}) variant: TabVariant = 'primary';
5555

5656
/**
5757
* Whether or not the tab is `disabled`.

‎tabs/lib/tabs.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import {html, isServer, LitElement, PropertyValues} from 'lit';
88
import {property, queryAssignedElements, state} from 'lit/decorators.js';
99

10-
import {Tab, Variant} from './tab.js';
10+
import {Tab, TabVariant} from './tab.js';
1111

1212
const NAVIGATION_KEYS = new Map([
1313
['default', new Set(['Home', 'End'])],
@@ -51,7 +51,7 @@ export class Tabs extends LitElement {
5151
* include `vertical`.
5252
* Defaults to `primary`.
5353
*/
54-
@property({reflect: true}) variant: Variant = 'primary';
54+
@property({reflect: true}) variant: TabVariant = 'primary';
5555

5656
/**
5757
* Whether or not the item is `disabled`.

0 commit comments

Comments
 (0)