@fluentui/react-progress - npm Package Compare versions

Comparing version 0.0.0-nightly-20221012-0423.1 to 0.0.0-nightly-20221013-0426.1

CHANGELOG.json

@@ -5,5 +5,5 @@ {
     {
-      "date": "Wed, 12 Oct 2022 04:30:02 GMT",
-      "tag": "@fluentui/react-progress_v0.0.0-nightly-20221012-0423.1",
-      "version": "0.0.0-nightly-20221012-0423.1",
+      "date": "Thu, 13 Oct 2022 04:32:45 GMT",
+      "tag": "@fluentui/react-progress_v0.0.0-nightly-20221013-0426.1",
+      "version": "0.0.0-nightly-20221013-0426.1",
       "comments": {
@@ -20,4 +20,4 @@ "prerelease": [
             "package": "@fluentui/react-progress",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221012-0423.1",
-            "commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221013-0426.1",
+            "commit": "b8c447f4822ef29f70f42a94dbbaeeab164fd343"
           },
@@ -27,4 +27,4 @@ {
             "package": "@fluentui/react-progress",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221012-0423.1",
-            "commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221013-0426.1",
+            "commit": "b8c447f4822ef29f70f42a94dbbaeeab164fd343"
           },
@@ -34,4 +34,4 @@ {
             "package": "@fluentui/react-progress",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221012-0423.1",
-            "commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221013-0426.1",
+            "commit": "b8c447f4822ef29f70f42a94dbbaeeab164fd343"
           },
@@ -41,4 +41,4 @@ {
             "package": "@fluentui/react-progress",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221012-0423.1",
-            "commit": "182980ff8126c109ac937f37354c28cfec7bab0b"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221013-0426.1",
+            "commit": "b8c447f4822ef29f70f42a94dbbaeeab164fd343"
           }
@@ -45,0 +45,0 @@ ]

CHANGELOG.md

 # Change Log - @fluentui/react-progress
 
-This log was last generated on Wed, 12 Oct 2022 04:30:02 GMT and should not be manually modified.
+This log was last generated on Thu, 13 Oct 2022 04:32:45 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20221012-0423.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v0.0.0-nightly-20221012-0423.1)
+## [0.0.0-nightly-20221013-0426.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v0.0.0-nightly-20221013-0426.1)
 
-Wed, 12 Oct 2022 04:30:02 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.0..@fluentui/react-progress_v0.0.0-nightly-20221012-0423.1)
+Thu, 13 Oct 2022 04:32:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.0..@fluentui/react-progress_v0.0.0-nightly-20221013-0426.1)
 
@@ -15,6 +15,6 @@ ### Changes
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by [e-mail])
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221012-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/182980ff8126c109ac937f37354c28cfec7bab0b) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221013-0426.1 ([commit](https://github.com/microsoft/fluentui/commit/b8c447f4822ef29f70f42a94dbbaeeab164fd343) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20221013-0426.1 ([commit](https://github.com/microsoft/fluentui/commit/b8c447f4822ef29f70f42a94dbbaeeab164fd343) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20221013-0426.1 ([commit](https://github.com/microsoft/fluentui/commit/b8c447f4822ef29f70f42a94dbbaeeab164fd343) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221013-0426.1 ([commit](https://github.com/microsoft/fluentui/commit/b8c447f4822ef29f70f42a94dbbaeeab164fd343) by beachball)
 
@@ -21,0 +21,0 @@ ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.0)

lib-commonjs/components/Progress/useProgress.js

@@ -30,11 +30,9 @@ "use strict";
     role: 'progressbar',
+    'aria-valuemin': value !== undefined ? 0 : undefined,
+    'aria-valuemax': value !== undefined ? max : undefined,
+    'aria-valuenow': value,
     ...props
   });
   const bar = react_utilities_1.resolveShorthand(props.bar, {
-    required: true,
-    defaultProps: {
-      'aria-valuemin': value ? 0 : undefined,
-      'aria-valuemax': value ? max : undefined,
-      'aria-valuenow': value
-    }
+    required: true
   });
@@ -41,0 +39,0 @@ const state = {

lib-commonjs/components/Progress/useProgressStyles.js

@@ -33,2 +33,10 @@ "use strict";
 };
+const indeterminateProgressRTL = {
+  '100%': {
+    right: '-100%'
+  },
+  '0%': {
+    right: '100%'
+  }
+};
 /**
@@ -95,10 +103,10 @@ * Styles for the root slot
   "rtl": {
-    "Bxajw12": "f8zwtth"
+    "Bv12yb3": ["fw97ye2", "fqbve9y"]
   }
 }, {
-  "d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fhjp9mj{background-image:linear-gradient(\n      to right,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorCompoundBrandBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".ffmeyi5{background-image:linear-gradient(\n      to left,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorCompoundBrandBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".f1wk4z0g{-webkit-animation-name:fgj6rna;animation-name:fgj6rna;}", ".f1f62nrt{-webkit-animation-name:fknt0w3;animation-name:fknt0w3;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f8zwtth{-webkit-animation-direction:reverse;animation-direction:reverse;}"],
+  "d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fhjp9mj{background-image:linear-gradient(\n      to right,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorCompoundBrandBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".ffmeyi5{background-image:linear-gradient(\n      to left,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorCompoundBrandBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".f1wk4z0g{-webkit-animation-name:fgj6rna;animation-name:fgj6rna;}", ".f1f62nrt{-webkit-animation-name:fknt0w3;animation-name:fknt0w3;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fw97ye2{-webkit-animation-name:f869nhd;animation-name:f869nhd;}", ".fqbve9y{-webkit-animation-name:f1gy5aix;animation-name:f1gy5aix;}"],
   "m": [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
     "m": "screen and (forced-colors: active)"
   }]],
-  "k": ["@-webkit-keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}"]
+  "k": ["@-webkit-keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@-webkit-keyframes f869nhd{100%{right:-100%;}0%{right:100%;}}", "@-webkit-keyframes f1gy5aix{100%{left:-100%;}0%{left:100%;}}", "@keyframes f869nhd{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1gy5aix{100%{left:-100%;}0%{left:100%;}}"]
 });
@@ -105,0 +113,0 @@ /**

lib/components/Progress/useProgress.js

@@ -22,11 +22,9 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
     role: 'progressbar',
+    'aria-valuemin': value !== undefined ? 0 : undefined,
+    'aria-valuemax': value !== undefined ? max : undefined,
+    'aria-valuenow': value,
     ...props
   });
   const bar = resolveShorthand(props.bar, {
-    required: true,
-    defaultProps: {
-      'aria-valuemin': value ? 0 : undefined,
-      'aria-valuemax': value ? max : undefined,
-      'aria-valuenow': value
-    }
+    required: true
   });
@@ -33,0 +31,0 @@ const state = {

lib/components/Progress/useProgressStyles.js

@@ -23,2 +23,10 @@ import { __styles, mergeClasses, shorthands } from '@griffel/react';
 };
+const indeterminateProgressRTL = {
+  '100%': {
+    right: '-100%'
+  },
+  '0%': {
+    right: '100%'
+  }
+};
 /**
@@ -85,10 +93,10 @@ * Styles for the root slot
   "rtl": {
-    "Bxajw12": "f8zwtth"
+    "Bv12yb3": ["fw97ye2", "fqbve9y"]
   }
 }, {
-  "d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fhjp9mj{background-image:linear-gradient(\n      to right,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorCompoundBrandBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".ffmeyi5{background-image:linear-gradient(\n      to left,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorCompoundBrandBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".f1wk4z0g{-webkit-animation-name:fgj6rna;animation-name:fgj6rna;}", ".f1f62nrt{-webkit-animation-name:fknt0w3;animation-name:fknt0w3;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f8zwtth{-webkit-animation-direction:reverse;animation-direction:reverse;}"],
+  "d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fhjp9mj{background-image:linear-gradient(\n      to right,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorCompoundBrandBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".ffmeyi5{background-image:linear-gradient(\n      to left,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorCompoundBrandBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".f1wk4z0g{-webkit-animation-name:fgj6rna;animation-name:fgj6rna;}", ".f1f62nrt{-webkit-animation-name:fknt0w3;animation-name:fknt0w3;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fw97ye2{-webkit-animation-name:f869nhd;animation-name:f869nhd;}", ".fqbve9y{-webkit-animation-name:f1gy5aix;animation-name:f1gy5aix;}"],
   "m": [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
     "m": "screen and (forced-colors: active)"
   }]],
-  "k": ["@-webkit-keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}"]
+  "k": ["@-webkit-keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@-webkit-keyframes f869nhd{100%{right:-100%;}0%{right:100%;}}", "@-webkit-keyframes f1gy5aix{100%{left:-100%;}0%{left:100%;}}", "@keyframes f869nhd{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1gy5aix{100%{left:-100%;}0%{left:100%;}}"]
 });
@@ -95,0 +103,0 @@ /**

package.json

 {
   "name": "@fluentui/react-progress",
-  "version": "0.0.0-nightly-20221012-0423.1",
+  "version": "0.0.0-nightly-20221013-0426.1",
   "description": "Progress component for FluentUI v9",
@@ -31,9 +31,9 @@ "main": "lib-commonjs/index.js",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20221012-0423.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20221013-0426.1",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20221012-0423.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20221012-0423.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20221012-0423.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20221013-0426.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20221013-0426.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20221013-0426.1",
     "@griffel/react": "^1.4.0",
@@ -40,0 +40,0 @@ "tslib": "^2.1.0"

README.md

@@ -6,1 +6,46 @@ # @fluentui/react-progress
 These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+
+## Usage
+
+To import `Progress`:
+
+```js
+import { Progress } from '@fluentui/react-progress';
+```
+
+Once the Progress component graduates to a production release, the component will be available at:
+
+```js
+import { Progress } from '@fluentui/react-components';
+```
+
+### Examples
+
+```jsx
+const ProgressExample = () => {
+  return <Progress thickness="large" value={0.5} />;
+};
+```
+
+#### Using ProgressField
+
+The `ProgressField` component is a wrapper around the `Progress` component that allows the user to add a `label`, `hint`, `validationMessage`, and `validationState` to the `Progress` component. You can pass these props, as well as the regular `Progress` props to a `ProgressField` component.
+
+To import `ProgressField`:
+
+```js
+import { ProgressField } from '@fluentui/react-field';
+```
+
+```jsx
+const ProgressFieldExample = () => {
+  return (
+    <ProgressField
+      label="Determinate Progress"
+      hint="This is a determinate Progress with description"
+      value={0.5}
+      validationState="warning"
+    />
+  );
+};
+```

Spec.md

@@ -5,3 +5,3 @@ # @fluentui/react-progress Spec
 
-The `Progress` component is used to display the current progress of an operation flow.
+The `Progress` component is used to display the current progress of an operation flow, or show that an operation is currently being executed.
 
@@ -38,3 +38,3 @@ ## Prior Art
 function App() {
-  return <Progress thickness="large" label="Loading" />;
+  return <Progress thickness="large" />;
 }
@@ -50,2 +50,24 @@ ```
 
+#### Adding Label and Description with ProgressField
+
+There is a `ProgressField` component that adds a `label`, validation state(`success`, `warning`, `error`), and hint text to the `Progress`.
+You can use it like so:
+
+```jsx
+import * as React from 'react';
+import type { ProgressFieldProps } from '@fluentui/react-field';
+import { ProgressField } from '@fluentui/react-field';
+
+export const Default = (props: ProgressFieldProps) => (
+  <ProgressField
+    label="Example Progress field"
+    value={0.75}
+    validationState="success"
+    validationMessage="This is a success message"
+    hint="This is a hint message"
+    {...props}
+  />
+);
+```
+
 ### Shape
@@ -59,11 +81,8 @@
 
-- `root` - The root element of the Progress. The html element is a `div`
+- `root` - The root element of the Progress, which also serves as the track for the Progress bar. The html element is a `div`
 - `bar` - The div element that gets animated into a Progress bar. The html element is `div`
-- `track` - The div element that functions as the track for the Progress bar. The html element is `div`
-- `label` - The text shown above the Progress. The html element is a `span`
-- `description` - The text shown below the Progress. The html element is a `span`
 
 ### Props
 
-See API at [Progress.types.tsx](./src/components/Progress/Progress.types.ts).
+See API at [Progress.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-progress/src/components/Progress/Progress.types.ts).
 
@@ -74,10 +93,4 @@ ## Structure
 <div class="fui-Progress">
-  <!-- Label for Progress -->
-  <span className="fui-Progress__label">Loading...</span>
-  <!-- Track for Progress -->
-  <div class="fui-Progress__track" />
   <!-- Bar for Progress -->
   <div class="fui-Progess__bar" />
-  <!-- Label for Progress description -->
-  <span className="fui-Progress__description">Loading Text</span>
 </div>
@@ -96,3 +109,3 @@ ```
 
-  - Specifying the `percentComplete` from `0` to `1` will alter the Progress from indeterminate to determinate.
+  - Specifying the `value` prop will alter the Progress from `indeterminate` to `determinate`.
   - The component also has `rtl` support and will animate the progress bar from right to left if set.
@@ -112,1 +125,3 @@
 ## Accessibility
+
+- The `determinate` Progress has the proper `aria` attributes assigned to the element that will allow screen readers to get the `max` and current `value` of the `Progress`.

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

Total package byte prevSize

61010

increased by7.2%

Number of package files

40

increased by2.56%

Lines of code

647

increased by2.54%

Number of lines in readme file

51

increased by750%

Dependency changes

• + Added@fluentui/keyboard-keys@0.0.0-nightly-20221013-0426.1(transitive)

• + Added@fluentui/react-shared-contexts@0.0.0-nightly-20221013-0426.1(transitive)

• + Added@fluentui/react-theme@0.0.0-nightly-20221013-0426.1(transitive)

• + Added@fluentui/react-utilities@0.0.0-nightly-20221013-0426.1(transitive)

• - Removed@fluentui/keyboard-keys@0.0.0-nightly-20221012-0423.1(transitive)

• - Removed@fluentui/react-shared-contexts@0.0.0-nightly-20221012-0423.1(transitive)

• - Removed@fluentui/react-theme@0.0.0-nightly-20221012-0423.1(transitive)

• - Removed@fluentui/react-utilities@0.0.0-nightly-20221012-0423.1(transitive)

• Updated@fluentui/react-shared-contexts@0.0.0-nightly-20221013-0426.1

• Updated@fluentui/react-theme@0.0.0-nightly-20221013-0426.1

• Updated@fluentui/react-utilities@0.0.0-nightly-20221013-0426.1