Skip to content

Commit

Permalink
refactor(circular-progress): move all sizing params from CSS to markup
Browse files Browse the repository at this point in the history 
We're still providing three sizes. With the wrapping of this component in material-web-components later on, we'll be able to increase flexibility of sizing using density and dynamically adjust the sizing using component attributes.

BREAKING CHANGE: DOM Changed. See README for updated markup. `$default-size`, `$stroke-width`, and `$container-side-length` variables removed.

PiperOrigin-RevId: 321231651
  • Loading branch information
@allan-chen @copybara-github
allan-chen authored and copybara-github committed Jul 14, 2020
1 parent d548d7a commit 58ce529
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 136 deletions.
90 changes: 25 additions & 65 deletions packages/mdc-circular-progress/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,25 +31,25 @@ npm install @material/circular-progress
### HTML Structure

```html
<div class="mdc-circular-progress mdc-circular-progress--large" role="progressbar" aria-label="Example Progress Bar" aria-valuemin="0" aria-valuemax="1">
<div class="mdc-circular-progress" style="width:48px;height:48px;" role="progressbar" aria-label="Example Progress Bar" aria-valuemin="0" aria-valuemax="1">
<div class="mdc-circular-progress__determinate-container">
<svg class="mdc-circular-progress__determinate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<circle class="mdc-circular-progress__determinate-circle" cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="113.097"/>
<circle class="mdc-circular-progress__determinate-circle" cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="113.097" stroke-width="4"/>
</svg>
</div>
<div class="mdc-circular-progress__indeterminate-container">
<div class="mdc-circular-progress__spinner-layer">
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549"/>
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
</svg>
</div><div class="mdc-circular-progress__gap-patch">
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549"/>
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="3.2"/>
</svg>
</div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549"/>
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
</svg>
</div>
</div>
Expand Down Expand Up @@ -92,95 +92,58 @@ const circularProgress = new MDCCircularProgress(document.querySelector('.mdc-ci

To set the stroke-width and container size strictly to one of three sizes defined by guidelines, replace each SVG of the baseline element with the following and apply the appropriate `mdc-circular-progress--{size}` modifier class (see [CSS Classes](#CSS-Classes) section).

#### Large (default)
Add the `.mdc-circular-progress--large` class and use the following inner SVGs.
```html
<!--Determinate-->
<svg class="mdc-circular-progress__determinate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<circle class="mdc-circular-progress__determinate-circle" cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="113.097"/>
</svg>
<!--Indeterminate-->
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549"/>
</svg>
```

##### Full Example
#### Large (48px)
See [baseline template](#HTML-Structure) above.

#### Medium
Add the `.mdc-circular-progress--medium` class and replace SVG's from baseline template with the following.
```html
<!--Determinate-->
<svg class="mdc-circular-progress__determinate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<circle class="mdc-circular-progress__determinate-circle" cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="78.54"/>
</svg>
<!--Indeterminate-->
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27"/>
</svg>
```
##### Full Example
#### Medium (36px)
```html
<div class="mdc-circular-progress mdc-circular-progress--medium" role="progressbar" aria-label="Example Progress Bar" aria-valuemin="0" aria-valuemax="1">
<div class="mdc-circular-progress" style="width:36px;height:36px;" role="progressbar" aria-label="Example Progress Bar" aria-valuemin="0" aria-valuemax="1">
<div class="mdc-circular-progress__determinate-container">
<svg class="mdc-circular-progress__determinate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<circle class="mdc-circular-progress__determinate-circle" cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="78.54"/>
<circle class="mdc-circular-progress__determinate-circle" cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="78.54" stroke-width="3"/>
</svg>
</div>
<div class="mdc-circular-progress__indeterminate-container">
<div class="mdc-circular-progress__spinner-layer">
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27"/>
<circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27" stroke-width="3"/>
</svg>
</div><div class="mdc-circular-progress__gap-patch">
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27"/>
<circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27" stroke-width="2.4"/>
</svg>
</div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27"/>
<circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27" stroke-width="3"/>
</svg>
</div>
</div>
</div>
</div>
```

#### Small
Add the `.mdc-circular-progress--small` class and replace SVG's from baseline template with the following.
```html
<!--Determinate-->
<svg class="mdc-circular-progress__determinate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle class="mdc-circular-progress__determinate-circle" cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="54.978"/>
</svg>
<!--Indeterminate-->
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489"/>
</svg>
```
##### Full Example
#### Small (24px)
```html
<div class="mdc-circular-progress mdc-circular-progress--small" role="progressbar" aria-label="Example Progress Bar" aria-valuemin="0" aria-valuemax="1">
<div class="mdc-circular-progress" style="width:24px;height:24px;" role="progressbar" aria-label="Example Progress Bar" aria-valuemin="0" aria-valuemax="1">
<div class="mdc-circular-progress__determinate-container">
<svg class="mdc-circular-progress__determinate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle class="mdc-circular-progress__determinate-circle" cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="54.978"/>
<circle class="mdc-circular-progress__determinate-circle" cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="54.978" stroke-width="2.5"/>
</svg>
</div>
<div class="mdc-circular-progress__indeterminate-container">
<div class="mdc-circular-progress__spinner-layer">
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489"/>
<circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489" stroke-width="2.5"/>
</svg>
</div><div class="mdc-circular-progress__gap-patch">
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489"/>
<circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489" stroke-width="2"/>
</svg>
</div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489"/>
<circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489" stroke-width="2.5"/>
</svg>
</div>
</div>
Expand All @@ -193,25 +156,25 @@ You may choose to have the indicator in inderminate state animate through 4 colo
This is done instead of animating the color property to reduce browser repaints.

```html
<div class="mdc-circular-progress" role="progressbar" aria-label="Example Progress Bar" aria-valuemin="0" aria-valuemax="1">
<div class="mdc-circular-progress" style="width:48px;height:48px;" role="progressbar" aria-label="Example Progress Bar" aria-valuemin="0" aria-valuemax="1">
<div class="mdc-circular-progress__determinate-container">
<svg class="mdc-circular-progress__determinate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<circle class="mdc-circular-progress__determinate-circle" cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="113.097"/>
<circle class="mdc-circular-progress__determinate-circle" cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="113.097" stroke-width="4"/>
</svg>
</div>
<div class="mdc-circular-progress__indeterminate-container">
<div class="mdc-circular-progress__spinner-layer mdc-circular-progress__color-1">
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549"/>
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
</svg>
</div><div class="mdc-circular-progress__gap-patch">
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549"/>
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="3.8"/>
</svg>
</div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549"/>
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
</svg>
</div>
</div>
Expand All @@ -238,9 +201,6 @@ This is done instead of animating the color property to reduce browser repaints.
CSS Class | Description
--------- | -------------
`mdc-circular-progress` | Mandatory. The root element.
`mdc-circular-progress--large` | Optional. Sets the stroke and container sizes for the large variant. See note. |
`mdc-circular-progress--medium` | Optional. Sets the stroke and container sizes for the medium-sized variant. See note. |
`mdc-circular-progress--small` | Optional. Sets the stroke and container sizes for the small variant. See note. |
`mdc-circular-progress--indeterminate` | Optional. Puts the circular progress indicator in an indeterminate state. |
`mdc-circular-progress--closed` | Optional. Hides the circular progress indicator. |
`mdc-circular-progress__determinate-container` | Mandatory. Contains the determinate progress indicator.
Expand All @@ -255,7 +215,7 @@ CSS Class | Description
`mdc-circular-progress__gap-patch` | Mandatory. A tiny little sliver of an SVG circle used to patch a gap between the circle-left and the circle-right.


> _NOTE_: Each size modifier class **must** be used with a separate inner SVG template to ensure optimal ratio of the stroke width to container size as specified in Material Design guidelines.
> _NOTE_: Ensure the correct inner SVG templates for each size are used to ensure optimal ratio of the stroke width to container size as specified in Material Design guidelines.
### Sass Mixins

Expand All @@ -281,7 +241,7 @@ Method Signature | Description |

### `MDCCircularProgressAdapter`

Method Signature | Description
Method Signature | Description
---------------- | -----------
`addClass(className: string) => void` | Adds a class to the root element.
`getDeterminateCircleAttribute(attributeName: string) => void` | Gets the specified attribute from the determinate circle element.
Expand Down
44 changes: 0 additions & 44 deletions packages/mdc-circular-progress/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,6 @@
}

.mdc-circular-progress {
@include size_(variables.$default-size, $query);

@include feature-targeting-mixins.targets($feat-structure) {
display: inline-block;
position: relative;
Expand All @@ -59,18 +57,6 @@
}
}

.mdc-circular-progress--small {
@include size_(small, $query);
}

.mdc-circular-progress--medium {
@include size_(medium, $query);
}

.mdc-circular-progress--large {
@include size_(large, $query);
}

.mdc-circular-progress__determinate-container,
.mdc-circular-progress__indeterminate-circle-graphic,
.mdc-circular-progress__indeterminate-container,
Expand Down Expand Up @@ -222,36 +208,6 @@

// Private mixins

/// Sets the container size of the indicator and the stroke width appropriate
/// for the size according to Material Design guidelines. The dimensions are
/// predefined for one of three discrete sizes listed below only.
/// @param {String} $size - Choose from small, medium, or large.
/// @access private
@mixin size_($size, $query: feature-targeting-functions.all()) {
$feat-structure: feature-targeting-functions.create-target($query, structure);

$resolved-size: map-get(variables.$container-side-length, $size);

@include feature-targeting-mixins.targets($feat-structure) {
width: $resolved-size;
height: $resolved-size;
}

.mdc-circular-progress__determinate-circle-graphic,
.mdc-circular-progress__indeterminate-circle-graphic {
@include feature-targeting-mixins.targets($feat-structure) {
stroke-width: map-get(variables.$stroke-width, $size);
}
}

.mdc-circular-progress__gap-patch
.mdc-circular-progress__indeterminate-circle-graphic {
@include feature-targeting-mixins.targets($feat-structure) {
stroke-width: map-get(variables.$stroke-width, $size) * 0.8;
}
}
}

/// Sets the animations for the indicator in indeterminate mode.
/// @access private
@mixin indeterminate-active-animations_(
Expand Down
13 changes: 0 additions & 13 deletions packages/mdc-circular-progress/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,6 @@

$color: primary !default;

/// size parameters
$default-size: large !default;
$container-side-length: (
large: 48px,
medium: 36px,
small: 24px,
) !default;
$stroke-width: (
large: 4px,
medium: 3px,
small: 2.5px,
) !default;

/// The rotation position of the arcs that corresponds to their fully contracted state
$base-angle: 135deg !default;
/// Amount of circle the arc takes up
Expand Down
Loading

0 comments on commit 58ce529

Please sign in to comment.