mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 01:20:23 +03:00
fix(progress): squash linearprogress and circular progress into progress
This changes the following imports from: ```js import '@material/web/circularprogress/circular-progress.js'; import '@material/web/linearprogress/linear-progress.js'; ``` to ```js import '@material/web/progress/circular-progress.js'; import '@material/web/progress/linear-progress.js'; ``` PiperOrigin-RevId: 547860610
This commit is contained in:
parent
4a41539dcb
commit
15df1d5f1a
@ -15,7 +15,7 @@ import '@material/web/menu/menu.js';
|
|||||||
import '@material/web/checkbox/checkbox.js';
|
import '@material/web/checkbox/checkbox.js';
|
||||||
import '@material/web/list/list.js';
|
import '@material/web/list/list.js';
|
||||||
import '@material/web/list/list-item-link.js';
|
import '@material/web/list/list-item-link.js';
|
||||||
import '@material/web/circularprogress/circular-progress.js';
|
import '@material/web/progress/circular-progress.js';
|
||||||
import '@material/web/tabs/tabs.js';
|
import '@material/web/tabs/tabs.js';
|
||||||
import '@material/web/tabs/tab.js';
|
import '@material/web/tabs/tab.js';
|
||||||
import '@material/web/iconbutton/standard-icon-button.js';
|
import '@material/web/iconbutton/standard-icon-button.js';
|
||||||
@ -27,4 +27,4 @@ import '@material/web/button/filled-button.js';
|
|||||||
import '@material/web/button/tonal-button.js';
|
import '@material/web/button/tonal-button.js';
|
||||||
import '@material/web/button/outlined-button.js';
|
import '@material/web/button/outlined-button.js';
|
||||||
import '@material/web/button/text-button.js';
|
import '@material/web/button/text-button.js';
|
||||||
import '@material/web/linearprogress/linear-progress.js';
|
import '@material/web/progress/linear-progress.js';
|
||||||
|
@ -4,28 +4,9 @@
|
|||||||
* SPDX-License-Identifier: Apache-2.0
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {customElement} from 'lit/decorators.js';
|
|
||||||
|
|
||||||
import {CircularProgress} from './lib/circular-progress.js';
|
|
||||||
import {styles} from './lib/circular-progress-styles.css.js';
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface HTMLElementTagNameMap {
|
|
||||||
'md-circular-progress': MdCircularProgress;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @summary Circular progress indicators display progress by animating along an
|
* TODO(b/291100596): Stub left behind for migration. Prefer
|
||||||
* invisible circular track in a clockwise direction. They can be applied
|
* `import @material/web/progress/circular-progress.js`
|
||||||
* directly to a surface, such as a button or card.
|
|
||||||
*
|
|
||||||
* @description
|
|
||||||
* Progress indicators inform users about the status of ongoing processes.
|
|
||||||
* - Determinate indicators display how long a process will take.
|
|
||||||
* - Indeterminate indicators express an unspecified amount of wait time.
|
|
||||||
*/
|
*/
|
||||||
@customElement('md-circular-progress')
|
|
||||||
export class MdCircularProgress extends CircularProgress {
|
export * from '@material/web/progress/circular-progress.js';
|
||||||
static override styles = [styles];
|
|
||||||
}
|
|
@ -1,42 +0,0 @@
|
|||||||
/**
|
|
||||||
* @license
|
|
||||||
* Copyright 2023 Google LLC
|
|
||||||
* SPDX-License-Identifier: Apache-2.0
|
|
||||||
*/
|
|
||||||
|
|
||||||
import './index.js';
|
|
||||||
import './material-collection.js';
|
|
||||||
|
|
||||||
import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
|
|
||||||
import {boolInput, Knob, numberInput} from './index.js';
|
|
||||||
|
|
||||||
import {stories, StoryKnobs} from './stories.js';
|
|
||||||
|
|
||||||
function cssWire<T = string>(prop: string, unit = '') {
|
|
||||||
return (knob: Knob<T>) => {
|
|
||||||
const value =
|
|
||||||
knob.latestValue === undefined ? knob.defaultValue : knob.latestValue;
|
|
||||||
document.body.style.setProperty(prop, `${value}${unit}`);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
|
|
||||||
'Progress indicators (circular)', [
|
|
||||||
new Knob('progress', {ui: numberInput({step: 0.1}), defaultValue: 0.5}),
|
|
||||||
new Knob('indeterminate', {ui: boolInput(), defaultValue: false}),
|
|
||||||
new Knob('fourColor', {ui: boolInput(), defaultValue: false}),
|
|
||||||
new Knob('size', {
|
|
||||||
ui: numberInput(),
|
|
||||||
defaultValue: 48,
|
|
||||||
wiring: cssWire<number>('--md-circular-progress-size', 'px')
|
|
||||||
}),
|
|
||||||
new Knob('trackWidth', {
|
|
||||||
ui: numberInput(),
|
|
||||||
defaultValue: 8.33,
|
|
||||||
wiring: cssWire<number>('--md-circular-progress-active-indicator-width')
|
|
||||||
}),
|
|
||||||
]);
|
|
||||||
|
|
||||||
collection.addStories(...materialInitsToStoryInits(stories));
|
|
||||||
|
|
||||||
setUpDemo(collection, {icons: 'material-symbols'});
|
|
@ -1,19 +0,0 @@
|
|||||||
/**
|
|
||||||
* @license
|
|
||||||
* Copyright 2023 Google LLC
|
|
||||||
* SPDX-License-Identifier: Apache-2.0
|
|
||||||
*/
|
|
||||||
|
|
||||||
import {Harness} from '../testing/harness.js';
|
|
||||||
|
|
||||||
import {CircularProgress} from './lib/circular-progress.js';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Test harness for circular-progress.
|
|
||||||
*/
|
|
||||||
export class CircularProgressHarness extends Harness<CircularProgress> {
|
|
||||||
override async getInteractiveElement() {
|
|
||||||
await this.element.updateComplete;
|
|
||||||
return this.element.querySelector<HTMLElement>('.circularProgresss')!;
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,9 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "/material-web/assets/stories/base.json",
|
|
||||||
"files": {
|
|
||||||
"demo.ts": {
|
|
||||||
"hidden": true
|
|
||||||
},
|
|
||||||
"stories.ts": {}
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,57 +0,0 @@
|
|||||||
/**
|
|
||||||
* @license
|
|
||||||
* Copyright 2023 Google LLC
|
|
||||||
* SPDX-License-Identifier: Apache-2.0
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
import '@material/web/linearprogress/linear-progress.js';
|
|
||||||
|
|
||||||
import {MaterialStoryInit} from './material-collection.js';
|
|
||||||
import {css, html} from 'lit';
|
|
||||||
import {classMap} from 'lit/directives/class-map.js';
|
|
||||||
|
|
||||||
/** Knob types for linear progress stories. */
|
|
||||||
export interface StoryKnobs {
|
|
||||||
progress: number;
|
|
||||||
buffer: number;
|
|
||||||
indeterminate: boolean;
|
|
||||||
fourColor: boolean;
|
|
||||||
'track color': string;
|
|
||||||
'track height': number;
|
|
||||||
'indicator height': number;
|
|
||||||
'custom theme': boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const standard: MaterialStoryInit<StoryKnobs> = {
|
|
||||||
name: 'Linear progress',
|
|
||||||
styles: css`
|
|
||||||
md-linear-progress {
|
|
||||||
inline-size: 50vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom {
|
|
||||||
--md-linear-progress-active-indicator-color: linear-gradient(steelblue, lightblue);
|
|
||||||
--md-linear-progress-track-color: gainsboro;
|
|
||||||
--md-linear-progress-active-indicator-height: 20px;
|
|
||||||
--md-linear-progress-track-height: 20px;
|
|
||||||
--md-linear-progress-track-shape: 9999px;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
render(knobs) {
|
|
||||||
const {progress, buffer, indeterminate, fourColor} = knobs;
|
|
||||||
const classes = {'custom': knobs['custom theme']};
|
|
||||||
|
|
||||||
return html`
|
|
||||||
<md-linear-progress
|
|
||||||
class=${classMap(classes)}
|
|
||||||
.progress=${progress}
|
|
||||||
.buffer=${buffer}
|
|
||||||
.indeterminate=${indeterminate}
|
|
||||||
.fourColor=${fourColor}
|
|
||||||
></md-linear-progress>`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Linear Progress stories. */
|
|
||||||
export const stories = [standard];
|
|
@ -4,27 +4,9 @@
|
|||||||
* SPDX-License-Identifier: Apache-2.0
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {customElement} from 'lit/decorators.js';
|
|
||||||
|
|
||||||
import {LinearProgress} from './lib/linear-progress.js';
|
|
||||||
import {styles} from './lib/linear-progress-styles.css.js';
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface HTMLElementTagNameMap {
|
|
||||||
'md-linear-progress': MdLinearProgress;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @summary Linear progress indicators display progress by animating along the
|
* TODO(b/291100596): Stub left behind for migration. Prefer
|
||||||
* length of a fixed, visible track.
|
* `import @material/web/progress/linear-progress.js`
|
||||||
*
|
|
||||||
* @description
|
|
||||||
* Progress indicators inform users about the status of ongoing processes.
|
|
||||||
* - Determinate indicators display how long a process will take.
|
|
||||||
* - Indeterminate indicators express an unspecified amount of wait time.
|
|
||||||
*/
|
*/
|
||||||
@customElement('md-linear-progress')
|
|
||||||
export class MdLinearProgress extends LinearProgress {
|
export * from '@material/web/progress/linear-progress.js';
|
||||||
static override styles = [styles];
|
|
||||||
}
|
|
31
progress/circular-progress.ts
Normal file
31
progress/circular-progress.ts
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright 2023 Google LLC
|
||||||
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {customElement} from 'lit/decorators.js';
|
||||||
|
|
||||||
|
import {CircularProgress} from './lib/circular-progress.js';
|
||||||
|
import {styles} from './lib/circular-progress-styles.css.js';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'md-circular-progress': MdCircularProgress;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @summary Circular progress indicators display progress by animating along an
|
||||||
|
* invisible circular track in a clockwise direction. They can be applied
|
||||||
|
* directly to a surface, such as a button or card.
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* Progress indicators inform users about the status of ongoing processes.
|
||||||
|
* - Determinate indicators display how long a process will take.
|
||||||
|
* - Indeterminate indicators express an unspecified amount of wait time.
|
||||||
|
*/
|
||||||
|
@customElement('md-circular-progress')
|
||||||
|
export class MdCircularProgress extends CircularProgress {
|
||||||
|
static override styles = [styles];
|
||||||
|
}
|
@ -21,28 +21,39 @@ function cssWire<T = string>(prop: string, unit = '') {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
|
const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
|
||||||
'Progress indicators (linear)', [
|
'Progress indicators', [
|
||||||
new Knob('progress', {ui: numberInput({step: 0.1}), defaultValue: 0.5}),
|
new Knob('progress', {ui: numberInput({step: 0.1}), defaultValue: 0.5}),
|
||||||
new Knob('buffer', {ui: numberInput({step: 0.1}), defaultValue: 0.8}),
|
|
||||||
new Knob('indeterminate', {ui: boolInput(), defaultValue: false}),
|
new Knob('indeterminate', {ui: boolInput(), defaultValue: false}),
|
||||||
new Knob('fourColor', {ui: boolInput(), defaultValue: false}),
|
new Knob('fourColor', {ui: boolInput(), defaultValue: false}),
|
||||||
new Knob('track color', {
|
new Knob(
|
||||||
|
'buffer (linear)', {ui: numberInput({step: 0.1}), defaultValue: 0.8}),
|
||||||
|
new Knob('track color (linear)', {
|
||||||
ui: colorPicker(),
|
ui: colorPicker(),
|
||||||
defaultValue: '',
|
defaultValue: '',
|
||||||
wiring: cssWire('--md-linear-progress-track-color')
|
wiring: cssWire('--md-linear-progress-track-color')
|
||||||
}),
|
}),
|
||||||
new Knob('track height', {
|
new Knob('track height (linear)', {
|
||||||
ui: numberInput(),
|
ui: numberInput(),
|
||||||
defaultValue: 4,
|
defaultValue: 4,
|
||||||
wiring: cssWire<number>('--md-linear-progress-track-height', 'px')
|
wiring: cssWire<number>('--md-linear-progress-track-height', 'px')
|
||||||
}),
|
}),
|
||||||
new Knob('indicator height', {
|
new Knob('indicator height (linear)', {
|
||||||
ui: numberInput(),
|
ui: numberInput(),
|
||||||
defaultValue: 4,
|
defaultValue: 4,
|
||||||
wiring: cssWire<number>(
|
wiring: cssWire<number>(
|
||||||
'--md-linear-progress-active-indicator-height', 'px')
|
'--md-linear-progress-active-indicator-height', 'px')
|
||||||
}),
|
}),
|
||||||
new Knob('custom theme', {ui: boolInput()}),
|
new Knob('custom theme (linear)', {ui: boolInput()}),
|
||||||
|
new Knob('size (circular)', {
|
||||||
|
ui: numberInput(),
|
||||||
|
defaultValue: 48,
|
||||||
|
wiring: cssWire<number>('--md-circular-progress-size', 'px')
|
||||||
|
}),
|
||||||
|
new Knob('trackWidth (circular)', {
|
||||||
|
ui: numberInput(),
|
||||||
|
defaultValue: 8.33,
|
||||||
|
wiring: cssWire<number>('--md-circular-progress-active-indicator-width')
|
||||||
|
}),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
collection.addStories(...materialInitsToStoryInits(stories));
|
collection.addStories(...materialInitsToStoryInits(stories));
|
@ -4,27 +4,66 @@
|
|||||||
* SPDX-License-Identifier: Apache-2.0
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
import '@material/web/progress/linear-progress.js';
|
||||||
import '@material/web/button/tonal-button.js';
|
import '@material/web/button/tonal-button.js';
|
||||||
import '@material/web/icon/icon.js';
|
import '@material/web/icon/icon.js';
|
||||||
import '@material/web/iconbutton/standard-icon-button.js';
|
import '@material/web/iconbutton/standard-icon-button.js';
|
||||||
import '@material/web/circularprogress/circular-progress.js';
|
import '@material/web/progress/circular-progress.js';
|
||||||
|
|
||||||
import {MdTonalButton} from '@material/web/button/tonal-button.js';
|
import {MdTonalButton} from '@material/web/button/tonal-button.js';
|
||||||
import {MdCircularProgress} from '@material/web/circularprogress/circular-progress.js';
|
|
||||||
import {MaterialStoryInit} from './material-collection.js';
|
import {MaterialStoryInit} from './material-collection.js';
|
||||||
|
import {MdCircularProgress} from '@material/web/progress/circular-progress.js';
|
||||||
import {css, html} from 'lit';
|
import {css, html} from 'lit';
|
||||||
|
import {classMap} from 'lit/directives/class-map.js';
|
||||||
|
|
||||||
|
/** Knob types for linear progress stories. */
|
||||||
/** Knob types for circular-progress stories. */
|
|
||||||
export interface StoryKnobs {
|
export interface StoryKnobs {
|
||||||
progress: number;
|
progress: number;
|
||||||
|
'buffer (linear)': number;
|
||||||
indeterminate: boolean;
|
indeterminate: boolean;
|
||||||
fourColor: boolean;
|
fourColor: boolean;
|
||||||
size: number;
|
'track color (linear)': string;
|
||||||
trackWidth: number;
|
'track height (linear)': number;
|
||||||
|
'indicator height (linear)': number;
|
||||||
|
'custom theme (linear)': boolean;
|
||||||
|
'size (circular)': number;
|
||||||
|
'trackWidth (circular)': number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const standard: MaterialStoryInit<StoryKnobs> = {
|
const standard: MaterialStoryInit<StoryKnobs> = {
|
||||||
|
name: 'Linear progress',
|
||||||
|
styles: css`
|
||||||
|
md-linear-progress {
|
||||||
|
inline-size: 50vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom {
|
||||||
|
--md-linear-progress-active-indicator-color: linear-gradient(steelblue, lightblue);
|
||||||
|
--md-linear-progress-track-color: gainsboro;
|
||||||
|
--md-linear-progress-active-indicator-height: 20px;
|
||||||
|
--md-linear-progress-track-height: 20px;
|
||||||
|
--md-linear-progress-track-shape: 9999px;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
render(knobs) {
|
||||||
|
const {progress, indeterminate, fourColor} = knobs;
|
||||||
|
const buffer = knobs['buffer (linear)'];
|
||||||
|
const classes = {'custom': knobs['custom theme (linear)']};
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<md-linear-progress
|
||||||
|
class=${classMap(classes)}
|
||||||
|
.progress=${progress}
|
||||||
|
.buffer=${buffer}
|
||||||
|
.indeterminate=${indeterminate}
|
||||||
|
.fourColor=${fourColor}
|
||||||
|
></md-linear-progress>`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const standardCircular: MaterialStoryInit<StoryKnobs> = {
|
||||||
name: 'Circular progress',
|
name: 'Circular progress',
|
||||||
render({progress, indeterminate, fourColor}) {
|
render({progress, indeterminate, fourColor}) {
|
||||||
return html`
|
return html`
|
||||||
@ -100,5 +139,5 @@ const insideButton: MaterialStoryInit<StoryKnobs> = {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/** Circular Progress stories. */
|
/** Linear Progress stories. */
|
||||||
export const stories = [standard, iconButton, insideButton];
|
export const stories = [standard, standardCircular, iconButton, insideButton];
|
@ -6,6 +6,7 @@
|
|||||||
|
|
||||||
import {Harness} from '../testing/harness.js';
|
import {Harness} from '../testing/harness.js';
|
||||||
|
|
||||||
|
import {CircularProgress} from './lib/circular-progress.js';
|
||||||
import {LinearProgress} from './lib/linear-progress.js';
|
import {LinearProgress} from './lib/linear-progress.js';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -19,3 +20,13 @@ export class LinearProgressHarness extends Harness<LinearProgress> {
|
|||||||
return this.element['rootEl'];
|
return this.element['rootEl'];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Test harness for circular-progress.
|
||||||
|
*/
|
||||||
|
export class CircularProgressHarness extends Harness<CircularProgress> {
|
||||||
|
override async getInteractiveElement() {
|
||||||
|
await this.element.updateComplete;
|
||||||
|
return this.element.querySelector<HTMLElement>('.circularProgresss')!;
|
||||||
|
}
|
||||||
|
}
|
30
progress/linear-progress.ts
Normal file
30
progress/linear-progress.ts
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright 2023 Google LLC
|
||||||
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {customElement} from 'lit/decorators.js';
|
||||||
|
|
||||||
|
import {LinearProgress} from './lib/linear-progress.js';
|
||||||
|
import {styles} from './lib/linear-progress-styles.css.js';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'md-linear-progress': MdLinearProgress;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @summary Linear progress indicators display progress by animating along the
|
||||||
|
* length of a fixed, visible track.
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* Progress indicators inform users about the status of ongoing processes.
|
||||||
|
* - Determinate indicators display how long a process will take.
|
||||||
|
* - Indeterminate indicators express an unspecified amount of wait time.
|
||||||
|
*/
|
||||||
|
@customElement('md-linear-progress')
|
||||||
|
export class MdLinearProgress extends LinearProgress {
|
||||||
|
static override styles = [styles];
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user