js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

rename percentage => value

Browse Source
This commit is contained in:
Cory LaViska
2021-09-30 09:02:28 -04:00
parent 7188425ac0
commit 4ad0480039
5 changed files with 31 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/components/progress-bar.md
View File

@@ -5,7 +5,7 @@
Progress bars are used to show the status of an ongoing operation.
```html preview
<sl-progress-bar percentage="50"></sl-progress-bar>
<sl-progress-bar value="50"></sl-progress-bar>
```
## Examples
@@ -15,7 +15,7 @@ Progress bars are used to show the status of an ongoing operation.
Use the `--height` custom property to set the progress bar's height.
```html preview
<sl-progress-bar percentage="50" style="--height: 6px;"></sl-progress-bar>
<sl-progress-bar value="50" style="--height: 6px;"></sl-progress-bar>
```
### Labels
@@ -23,7 +23,7 @@ Use the `--height` custom property to set the progress bar's height.
Use the default slot to show a label.
```html preview
<sl-progress-bar percentage="50" class="progress-bar-labels">50%</sl-progress-bar>
<sl-progress-bar value="50" class="progress-bar-labels">50%</sl-progress-bar>
<br>
@@ -36,22 +36,22 @@ Use the default slot to show a label.
const addButton = subtractButton.nextElementSibling;
addButton.addEventListener('click', () => {
const percentage = Math.min(100, progressBar.percentage + 10);
progressBar.percentage = percentage;
progressBar.textContent = `${percentage}%`;
const value = Math.min(100, progressBar.value + 10);
progressBar.value = value;
progressBar.textContent = `${value}%`;
});
subtractButton.addEventListener('click', () => {
const percentage = Math.max(0, progressBar.percentage - 10)
progressBar.percentage = percentage;
progressBar.textContent = `${percentage}%`;
const value = Math.max(0, progressBar.value - 10)
progressBar.value = value;
progressBar.textContent = `${value}%`;
});
</script>
```
### Indeterminate
The `indeterminate` attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, `percentage` is ignored and the label, if present, will not be shown.
The `indeterminate` attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, `value` is ignored and the label, if present, will not be shown.
```html preview
<sl-progress-bar indeterminate></sl-progress-bar>

22
docs/components/progress-ring.md
View File

@@ -5,7 +5,7 @@
Progress rings are used to show the progress of a determinate operation in a circular fashion.
```html preview
<sl-progress-ring percentage="25"></sl-progress-ring>
<sl-progress-ring value="25"></sl-progress-ring>
```
## Examples
@@ -15,7 +15,7 @@ Progress rings are used to show the progress of a determinate operation in a cir
Use the `--size` custom property to set the diameter of the progress ring.
```html preview
<sl-progress-ring percentage="50" style="--size: 200px;"></sl-progress-ring>
<sl-progress-ring value="50" style="--size: 200px;"></sl-progress-ring>
```
### Track Width
@@ -23,7 +23,7 @@ Use the `--size` custom property to set the diameter of the progress ring.
Use the `track-width` attribute to set the width of the progress ring's track.
```html preview
<sl-progress-ring percentage="50" stroke-width="10"></sl-progress-ring>
<sl-progress-ring value="50" stroke-width="10"></sl-progress-ring>
```
### Colors
@@ -32,7 +32,7 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
```html preview
<sl-progress-ring
percentage="50"
value="50"
style="
--track-color: pink;
--indicator-color: deeppink;
@@ -45,7 +45,7 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
Use the default slot to show a label.
```html preview
<sl-progress-ring percentage="50" class="progress-ring-labels" style="margin-bottom: .5rem;">50%</sl-progress-ring>
<sl-progress-ring value="50" class="progress-ring-labels" style="margin-bottom: .5rem;">50%</sl-progress-ring>
<br>
@@ -58,15 +58,15 @@ Use the default slot to show a label.
const addButton = subtractButton.nextElementSibling;
addButton.addEventListener('click', () => {
const percentage = Math.min(100, progressRing.percentage + 10);
progressRing.percentage = percentage;
progressRing.textContent = `${percentage}%`;
const value = Math.min(100, progressRing.value + 10);
progressRing.value = value;
progressRing.textContent = `${value}%`;
});
subtractButton.addEventListener('click', () => {
const percentage = Math.max(0, progressRing.percentage - 10)
progressRing.percentage = percentage;
progressRing.textContent = `${percentage}%`;
const value = Math.max(0, progressRing.value - 10)
progressRing.value = value;
progressRing.textContent = `${value}%`;
});
</script>
```

1
docs/resources/changelog.md
View File

@@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
## Next
- 🚨 BREAKING: removed `<sl-menu-divider>` (use `<sl-divider>` instead)
- 🚨 BREAKING: removed `percentage` attribute from `<sl-progress-bar>` and `<sl-progress-ring>` (use `value`) instead
- Added the `<sl-divider>` component
- Added `--sl-surface-base` and `--sl-surface-base-alt` as early surface tokens to improve the appearance of alert, card, and panels in dark mode
- Added the `--sl-panel-border-width` design token

8
src/components/progress-bar/progress-bar.ts
View File

@@ -23,8 +23,8 @@ import styles from './progress-bar.styles';
export default class SlProgressBar extends LitElement {
static styles = styles;
/** The progress bar's percentage, 0 to 100. */
@property({ type: Number, reflect: true }) percentage = 0;
/** The current progress, 0 to 100. */
@property({ type: Number, reflect: true }) value = 0;
/** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
@property({ type: Boolean, reflect: true }) indeterminate = false;
@@ -40,9 +40,9 @@ export default class SlProgressBar extends LitElement {
role="progressbar"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="${this.indeterminate ? '' : this.percentage}"
aria-valuenow="${this.indeterminate ? '' : this.value}"
>
<div part="indicator" class="progress-bar__indicator" style=${styleMap({ width: this.percentage + '%' })}>
<div part="indicator" class="progress-bar__indicator" style=${styleMap({ width: this.value + '%' })}>
${!this.indeterminate
? html`
<span part="label" class="progress-bar__label">

10
src/components/progress-ring/progress-ring.ts
View File

@@ -24,8 +24,8 @@ export default class SlProgressRing extends LitElement {
@state() indicatorOffset: string;
/** The current progress percentage, 0 - 100. */
@property({ type: Number, reflect: true }) percentage: number;
/** The current progress, 0 to 100. */
@property({ type: Number, reflect: true }) value = 0;
updated(changedProps: Map<string, any>) {
super.updated(changedProps);
@@ -38,7 +38,7 @@ export default class SlProgressRing extends LitElement {
if (changedProps.has('percentage')) {
const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r'));
const circumference = 2 * Math.PI * radius;
const offset = circumference - (this.percentage / 100) * circumference;
const offset = circumference - (this.value / 100) * circumference;
this.indicatorOffset = String(offset) + 'px';
}
@@ -52,8 +52,8 @@ export default class SlProgressRing extends LitElement {
role="progressbar"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="${this.percentage}"
style="--percentage: ${this.percentage / 100}"
aria-valuenow="${this.value}"
style="--percentage: ${this.value / 100}"
>
<svg class="progress-ring__image">
<circle class="progress-ring__track"></circle>