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/list/list.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/tab.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/outlined-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
|
||||
*/
|
||||
|
||||
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.
|
||||
* TODO(b/291100596): Stub left behind for migration. Prefer
|
||||
* `import @material/web/progress/circular-progress.js`
|
||||
*/
|
||||
@customElement('md-circular-progress')
|
||||
export class MdCircularProgress extends CircularProgress {
|
||||
static override styles = [styles];
|
||||
}
|
||||
|
||||
export * from '@material/web/progress/circular-progress.js';
|
@ -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
|
||||
*/
|
||||
|
||||
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.
|
||||
* TODO(b/291100596): Stub left behind for migration. Prefer
|
||||
* `import @material/web/progress/linear-progress.js`
|
||||
*/
|
||||
@customElement('md-linear-progress')
|
||||
export class MdLinearProgress extends LinearProgress {
|
||||
static override styles = [styles];
|
||||
}
|
||||
|
||||
export * from '@material/web/progress/linear-progress.js';
|
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>>(
|
||||
'Progress indicators (linear)', [
|
||||
'Progress indicators', [
|
||||
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('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(),
|
||||
defaultValue: '',
|
||||
wiring: cssWire('--md-linear-progress-track-color')
|
||||
}),
|
||||
new Knob('track height', {
|
||||
new Knob('track height (linear)', {
|
||||
ui: numberInput(),
|
||||
defaultValue: 4,
|
||||
wiring: cssWire<number>('--md-linear-progress-track-height', 'px')
|
||||
}),
|
||||
new Knob('indicator height', {
|
||||
new Knob('indicator height (linear)', {
|
||||
ui: numberInput(),
|
||||
defaultValue: 4,
|
||||
wiring: cssWire<number>(
|
||||
'--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));
|
@ -4,27 +4,66 @@
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
|
||||
import '@material/web/progress/linear-progress.js';
|
||||
import '@material/web/button/tonal-button.js';
|
||||
import '@material/web/icon/icon.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 {MdCircularProgress} from '@material/web/circularprogress/circular-progress.js';
|
||||
import {MaterialStoryInit} from './material-collection.js';
|
||||
import {MdCircularProgress} from '@material/web/progress/circular-progress.js';
|
||||
import {css, html} from 'lit';
|
||||
import {classMap} from 'lit/directives/class-map.js';
|
||||
|
||||
|
||||
/** Knob types for circular-progress stories. */
|
||||
/** Knob types for linear progress stories. */
|
||||
export interface StoryKnobs {
|
||||
progress: number;
|
||||
'buffer (linear)': number;
|
||||
indeterminate: boolean;
|
||||
fourColor: boolean;
|
||||
size: number;
|
||||
trackWidth: number;
|
||||
'track color (linear)': string;
|
||||
'track height (linear)': number;
|
||||
'indicator height (linear)': number;
|
||||
'custom theme (linear)': boolean;
|
||||
'size (circular)': number;
|
||||
'trackWidth (circular)': number;
|
||||
}
|
||||
|
||||
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',
|
||||
render({progress, indeterminate, fourColor}) {
|
||||
return html`
|
||||
@ -100,5 +139,5 @@ const insideButton: MaterialStoryInit<StoryKnobs> = {
|
||||
}
|
||||
};
|
||||
|
||||
/** Circular Progress stories. */
|
||||
export const stories = [standard, iconButton, insideButton];
|
||||
/** Linear Progress stories. */
|
||||
export const stories = [standard, standardCircular, iconButton, insideButton];
|
@ -6,6 +6,7 @@
|
||||
|
||||
import {Harness} from '../testing/harness.js';
|
||||
|
||||
import {CircularProgress} from './lib/circular-progress.js';
|
||||
import {LinearProgress} from './lib/linear-progress.js';
|
||||
|
||||
/**
|
||||
@ -19,3 +20,13 @@ export class LinearProgressHarness extends Harness<LinearProgress> {
|
||||
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