@react-md/progress - npm Package Compare versions

Comparing version 2.0.0-alpha.14 to 2.0.0-alpha.15

CHANGELOG.md

@@ -1,1 +0,94 @@
-# v2.0.0-alpha.0
+# v2.0.0
+
+The progress package probably went through the least amount of changes for the
+v2 release. The main changes involved were switching to `<span>`s instead of
+`<div>`s so they can be rendered within buttons and a few API changes to
+hopefully be easier to work with.
+
+## New Features / Behavior
+
+- new theme variables and mixins to dynamically change the color and size of the
+  progress bars
+- introduced a new util `getProgressA11y` that can be used to link a progress
+  bar to another element that is loading
+- the `LinearProgress` bar can now also be rendered vertically instead of
+  horizontal only
+- the `CircularProgress`'s size is now configurable with CSS instead of a
+  `scale` prop
+
+## Breaking Changes
+
+- dropped support for the `progressStyle` function but might be added back later
+- dropped support for updating the `CircularProgress`'s size with component
+  props since it's easier to style in CSS now
+
+### New SCSS Variables, Functions, and Mixins
+
+- `$rmd-progress-color: $rmd-theme-primary !default` - A new variable to
+  configure the progress color
+- `$rmd-progress-background-color: rmd-theme-get-swatch($rmd-theme-primary, 300, false, rgba($rmd-theme-primary, 0.4)) !default` -
+  The background color to use for the incomplete progress part of the linear
+  progress bar
+- `$rmd-linear-progress-styles` - A Map that gets converted into the linear
+  progress animation
+- `$rmd-linear-progress-short-styles` - A Map that gets converted into the
+  linear progress shorter animation
+- `$rmd-linear-progress-reverse-styles` - A Map that gets converted into the
+  reversed linear progress animation
+- `$rmd-linear-progress-reverse-short-styles` - A Map that gets converted into
+  the reversed linear progress shorter animation
+- `$rmd-linear-progress-vertical-styles` - A Map that gets converted into the
+  vertical linear progress animation
+- `$rmd-linear-progress-vertical-short-styles` - A Map that gets converted into
+  the vertical linear progress shorter animation
+- `$rmd-linear-progress-vertical-reverse-styles` - A Map that gets converted
+  into the vertical reversed linear progress animation
+- `$rmd-linear-progress-vertical-reverse-short-styles` - A Map that gets
+  converted into the vertical reversed linear progress shorter animation
+- `$rmd-circular-progress-size: 3rem !default` - The default size for the
+  circular progress. **This is doubled the default size in v1.**
+- `$rmd-circular-progress-stroke-width: 6 !default` - The stroke width for the
+  circular progress SVG that used to be a prop
+- `$rmd-circular-progress-start-offset: $rmd-circular-progress-dasharray !default` -
+  The starting dashoffset for the circular progress animation
+- `$rmd-circular-progress-end-offset: $rmd-circular-progress-dasharray / 4 !default` -
+  The ending dashoffset for the circular progress animation
+- `$rmd-circular-progress-rotate-styles` - A Map that gets converted into the
+  circular progress rotation animation
+- `$rmd-cicular-progress-dash-styles` - A Map that gets converted into the
+  circular progress stroke-dashoffset animation while rotating
+- `@function rmd-progress-theme` - gets one of the theme values and validates
+  that the theme name is valid
+- `@function rmd-progress-theme-var` - gets one of the theme values as a css
+  variable with a fallback value and validates that the theme name is valid
+- `@mixin rmd-progress-theme` - applies one of the theme values to a css
+  property as a css variable
+- `@mixin rmd-progress-theme-update-var` - updates one of the theme values as a
+  css variable
+
+### Renamed SCSS Variables, Functions, and Mixins
+
+- renamed `$md-progress-include-linear` to `$rmd-progress-include-linear`
+- renamed `$md-progress-include-circular` to `$rmd-progress-include-circular`
+- renamed `$md-linear-progress-height` to `$rmd-linear-progress-size` and
+  changed the default value from `3px` to `0.25rem`
+- renamed `$md-progress-duration` to `$rmd-linear-progress-transition-duration`
+  and `$rmd-circular-progress-transition-duration` to allow the transitions to
+  be separate times if desired. Kept the same default value of `2.4s`
+- renamed `$md-linear-progress-delay` to
+  `$rmd-linear-progress-short-animation-delay` and changed the default value
+  from `1.15s` to `0.75s`
+- renamed `$md-circular-progress-stroke-dasharray` to
+  `$rmd-cirular-progress-dasharray` and changed the default value from `187px`
+  to `187`
+
+### Removed SCSS Variables and Mixins
+
+- removed `$md-linear-progress-swatch` and `$md-linear-progress-fallback-color`
+  since they are no longer used and already has sensible defaults with the new
+  `rmd-theme-get-swatch` function
+- removed `$md-progress-margin` since margin is no longer automatically applied
+  to the progress components
+- removed the `@mixin react-md-theme-progress-circular`,
+  `@mixin react-md-theme-progress-linear`, and `@mixin react-md-theme-progress`
+  since there is a new theming API

dist/scssVariables.d.ts

@@ -122,8 +122,8 @@ declare const _default: {
     "rmd-circular-progress-size": string;
-    "rmd-progress-circle-stroke-width": number;
-    "rmd-progress-circle-dasharray": number;
-    "rmd-progress-circle-transition-duration": string;
-    "rmd-progress-circle-start-offset": number;
-    "rmd-progress-circle-end-offset": number;
-    "rmd-progress-circle-rotate-styles": {
+    "rmd-circular-progress-stroke-width": number;
+    "rmd-circular-progress-dasharray": number;
+    "rmd-circular-progress-transition-duration": string;
+    "rmd-circular-progress-start-offset": number;
+    "rmd-circular-progress-end-offset": number;
+    "rmd-circular-progress-rotate-styles": {
         "0%": {
@@ -142,3 +142,3 @@ transform: string;
     };
-    "rmd-progress-circle-dash-styles": {
+    "rmd-circular-progress-dash-styles": {
         "0%": {
@@ -145,0 +145,0 @@ "stroke-dashoffset": number;

dist/scssVariables.js

@@ -9,3 +9,3 @@ "use strict";
     "rmd-progress-background-color": "#ba68c8",
-    "rmd-linear-progress-size": "4px",
+    "rmd-linear-progress-size": "0.25rem",
     "rmd-linear-progress-transition-duration": "2.4s",
@@ -54,8 +54,8 @@ "rmd-linear-progress-short-animation-delay": "0.75s",
     "rmd-circular-progress-size": "3rem",
-    "rmd-progress-circle-stroke-width": 6,
-    "rmd-progress-circle-dasharray": 187,
-    "rmd-progress-circle-transition-duration": "2.4s",
-    "rmd-progress-circle-start-offset": 187,
-    "rmd-progress-circle-end-offset": 46.75,
-    "rmd-progress-circle-rotate-styles": {
+    "rmd-circular-progress-stroke-width": 6,
+    "rmd-circular-progress-dasharray": 187,
+    "rmd-circular-progress-transition-duration": "2.4s",
+    "rmd-circular-progress-start-offset": 187,
+    "rmd-circular-progress-end-offset": 46.75,
+    "rmd-circular-progress-rotate-styles": {
         "0%": { transform: "rotate(0deg)" },
@@ -66,3 +66,3 @@ "50%": { transform: "rotate(135deg)" },
     },
-    "rmd-progress-circle-dash-styles": {
+    "rmd-circular-progress-dash-styles": {
         "0%": { "stroke-dashoffset": 187 },
@@ -75,3 +75,3 @@ "50%": { "stroke-dashoffset": 46.75 },
         "background-color": "#ba68c8",
-        "linear-size": "4px",
+        "linear-size": "0.25rem",
         "circular-size": "3rem",
@@ -78,0 +78,0 @@ "circular-width": 6,

package.json

 {
   "name": "@react-md/progress",
-  "version": "2.0.0-alpha.14",
+  "version": "2.0.0-alpha.15",
   "description": "Create horizontal, vertical, and circular progress indicators",
@@ -38,5 +38,5 @@ "scripts": {
   "dependencies": {
-    "@react-md/theme": "^2.0.0-alpha.14",
-    "@react-md/transition": "^2.0.0-alpha.14",
-    "@react-md/utils": "^2.0.0-alpha.14",
+    "@react-md/theme": "^2.0.0-alpha.15",
+    "@react-md/transition": "^2.0.0-alpha.15",
+    "@react-md/utils": "^2.0.0-alpha.15",
     "classnames": "^2.2.6"
@@ -53,3 +53,3 @@ },
   },
-  "gitHead": "2c22440705bce3fb3cfc5876011e7b3df8be1c03"
+  "gitHead": "c20671308497530c59f6563eafd1914b55122b8c"
 }

README.md

@@ -26,4 +26,5 @@ # @react-md/progress
 You should check out the
-[full documentation](https://react-md.dev/packages/progress) for live examples
-and more customization information, but an example usage is shown below.
+[full documentation](https://react-md.dev/packages/progress/demos) for live
+examples and more customization information, but an example usage is shown
+below.
 
@@ -40,3 +41,3 @@ <!-- DOCS_REMOVE_END -->
 ```tsx
-import React, { Fragment } from "react";
+import React from "react";
 import { render } from "react-dom";
@@ -68,3 +69,3 @@ import { CircularProgress, LinearProgress } from "@react-md/progress";
   return (
-    <Fragment>
+    <>
       <div
@@ -86,3 +87,3 @@ id="circle-content"
       </div>
-    </Fragment>
+    </>
   );
@@ -89,0 +90,0 @@ };

src/scssVariables.ts

@@ -7,3 +7,3 @@ /** this is an auto-generated file from @react-md/dev-utils */
   "rmd-progress-background-color": "#ba68c8",
-  "rmd-linear-progress-size": "4px",
+  "rmd-linear-progress-size": "0.25rem",
   "rmd-linear-progress-transition-duration": "2.4s",
@@ -52,8 +52,8 @@ "rmd-linear-progress-short-animation-delay": "0.75s",
   "rmd-circular-progress-size": "3rem",
-  "rmd-progress-circle-stroke-width": 6,
-  "rmd-progress-circle-dasharray": 187,
-  "rmd-progress-circle-transition-duration": "2.4s",
-  "rmd-progress-circle-start-offset": 187,
-  "rmd-progress-circle-end-offset": 46.75,
-  "rmd-progress-circle-rotate-styles": {
+  "rmd-circular-progress-stroke-width": 6,
+  "rmd-circular-progress-dasharray": 187,
+  "rmd-circular-progress-transition-duration": "2.4s",
+  "rmd-circular-progress-start-offset": 187,
+  "rmd-circular-progress-end-offset": 46.75,
+  "rmd-circular-progress-rotate-styles": {
     "0%": { transform: "rotate(0deg)" },
@@ -64,3 +64,3 @@ "50%": { transform: "rotate(135deg)" },
   },
-  "rmd-progress-circle-dash-styles": {
+  "rmd-circular-progress-dash-styles": {
     "0%": { "stroke-dashoffset": 187 },
@@ -73,3 +73,3 @@ "50%": { "stroke-dashoffset": 46.75 },
     "background-color": "#ba68c8",
-    "linear-size": "4px",
+    "linear-size": "0.25rem",
     "circular-size": "3rem",
@@ -76,0 +76,0 @@ "circular-width": 6,

types/LinearProgress.d.ts

@@ -16,4 +16,5 @@ import React, { CSSProperties, HTMLAttributes } from "react";
      * Boolean if the progress should be reversed. This will change the progress
-     * direction from `->` to `<-`. If the current language is a rtl language, the
-     * direction will still be `->`.
+     * direction from `left-to-right` to be `right-to-left`. If the current
+     * language is a rtl language and this prop is enabled, the direction will
+     * still be `left-to-right`.
      */
@@ -20,0 +21,0 @@ reverse?: boolean;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

68

increased by6.25%

Lines of code

1641

increased by11.25%

Number of lines in readme file

90

increased by1.12%

Worsened metrics

Total package byte prevSize

144604

decreased by-68.75%

Number of downloads

1132

decreased by-8.78%

Dependency changes

• Updated@react-md/theme@^2.0.0-alpha.15

• Updated@react-md/transition@^2.0.0-alpha.15

• Updated@react-md/utils@^2.0.0-alpha.15