carbon-addons-iot-react 5.12.0 → 5.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/css/carbon-addons-iot-react.css +24 -0
  2. package/css/carbon-addons-iot-react.css.map +1 -1
  3. package/es/components/Card/CardToolbar.js +4 -4
  4. package/es/components/PageWizard/PageWizard.js +8 -3
  5. package/es/components/ProgressIndicator/ProgressIndicator.js +44 -16
  6. package/lib/components/Card/CardToolbar.js +4 -4
  7. package/lib/components/PageWizard/PageWizard.js +8 -3
  8. package/lib/components/ProgressIndicator/ProgressIndicator.js +63 -16
  9. package/lib/css/carbon-addons-iot-react.css +24 -0
  10. package/lib/css/carbon-addons-iot-react.css.map +1 -1
  11. package/lib/scss/components/ProgressIndicator/_progress-indicator.scss +30 -1
  12. package/package.json +1 -1
  13. package/scss/components/ProgressIndicator/_progress-indicator.scss +30 -1
  14. package/umd/carbon-addons-iot-react.js +16913 -1694
package/lib/scss/components/ProgressIndicator/_progress-indicator.scss CHANGED
@@ -12,7 +12,11 @@
12
12
 
13
13
  .#{$iot-prefix}--progress-step {
14
14
  width: 8rem;
15
- height: convert.to-rem(68px);
15
+ height: 4.25rem;
16
+ // increase height as pictogram will be above text
17
+ &.#{$iot-prefix}--progress-step--pictogram {
18
+ height: 7.25rem;
19
+ }
16
20
  &-line {
17
21
  position: absolute;
18
22
  width: calc(100% - #{$spacing-06});
@@ -258,6 +262,20 @@
258
262
  display: unset;
259
263
 
260
264
  .#{$iot-prefix}--progress-step {
265
+ // align vertically
266
+ display: flex;
267
+ gap: $spacing-03;
268
+ .#{$iot-prefix}--progress-step--pictogram-item {
269
+ margin-top: -6px;
270
+ margin-bottom: 0;
271
+ }
272
+
273
+ // increase width as pictogram will be beside text
274
+ &.#{$iot-prefix}--progress-step--pictogram {
275
+ width: 11rem;
276
+ height: 4.25rem;
277
+ }
278
+
261
279
  &-button {
262
280
  .#{$iot-prefix}--progress-text {
263
281
  left: $spacing-07;
@@ -330,4 +348,15 @@
330
348
  flex: unset;
331
349
  }
332
350
  }
351
+
352
+ // reserve permanent space so all steps align
353
+ .#{$iot-prefix}--progress-step--pictogram-item {
354
+ width: $spacing-09;
355
+ height: $spacing-09;
356
+ margin-bottom: $spacing-03;
357
+ svg {
358
+ width: 100%;
359
+ height: 100%;
360
+ }
361
+ }
333
362
  }
package/package.json CHANGED
@@ -353,7 +353,7 @@
353
353
  "whatwg-fetch": "^3.0.0"
354
354
  },
355
355
  "sideEffects": false,
356
- "version": "5.12.0",
356
+ "version": "5.13.0",
357
357
  "resolutions": {
358
358
  "chokidar": "3.3.1",
359
359
  "react-grid-layout": "1.2.2",
package/scss/components/ProgressIndicator/_progress-indicator.scss CHANGED
@@ -12,7 +12,11 @@
12
12
 
13
13
  .#{$iot-prefix}--progress-step {
14
14
  width: 8rem;
15
- height: convert.to-rem(68px);
15
+ height: 4.25rem;
16
+ // increase height as pictogram will be above text
17
+ &.#{$iot-prefix}--progress-step--pictogram {
18
+ height: 7.25rem;
19
+ }
16
20
  &-line {
17
21
  position: absolute;
18
22
  width: calc(100% - #{$spacing-06});
@@ -258,6 +262,20 @@
258
262
  display: unset;
259
263
 
260
264
  .#{$iot-prefix}--progress-step {
265
+ // align vertically
266
+ display: flex;
267
+ gap: $spacing-03;
268
+ .#{$iot-prefix}--progress-step--pictogram-item {
269
+ margin-top: -6px;
270
+ margin-bottom: 0;
271
+ }
272
+
273
+ // increase width as pictogram will be beside text
274
+ &.#{$iot-prefix}--progress-step--pictogram {
275
+ width: 11rem;
276
+ height: 4.25rem;
277
+ }
278
+
261
279
  &-button {
262
280
  .#{$iot-prefix}--progress-text {
263
281
  left: $spacing-07;
@@ -330,4 +348,15 @@
330
348
  flex: unset;
331
349
  }
332
350
  }
351
+
352
+ // reserve permanent space so all steps align
353
+ .#{$iot-prefix}--progress-step--pictogram-item {
354
+ width: $spacing-09;
355
+ height: $spacing-09;
356
+ margin-bottom: $spacing-03;
357
+ svg {
358
+ width: 100%;
359
+ height: 100%;
360
+ }
361
+ }
333
362
  }