| 1 | ### HTML
|
| 2 |
|
| 3 | We have introduced following new features:
|
| 4 |
|
| 5 | - "Optional" label
|
| 6 | - Tooltip for overflowed content
|
| 7 |
|
| 8 | Those new features require the corresponding markup, and some markup structure changes:
|
| 9 |
|
| 10 | **Old structure**:
|
| 11 |
|
| 12 | ```
|
| 13 | progress indicator
|
| 14 | └── progress step
|
| 15 | ├── svg
|
| 16 | ├── progress label
|
| 17 | └── progress line
|
| 18 | ```
|
| 19 |
|
| 20 | **New structure**:
|
| 21 |
|
| 22 | ```
|
| 23 | progress indicator
|
| 24 | └── progress step
|
| 25 | ├── svg
|
| 26 | ├── progress label
|
| 27 | ├── tooltip container
|
| 28 | ├── optional label
|
| 29 | └── progress line
|
| 30 | ```
|
| 31 |
|
| 32 | Also icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used. Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/progress-indicator/code) site. React and other framework variants should reflect the change automatically.
|
| 33 |
|
| 34 | ### SCSS
|
| 35 |
|
| 36 | | Class | Note | Remarks |
|
| 37 | | ----------------------- | ---- | ---------------------------------------------------------------------------------------------------- |
|
| 38 | | `bx--progress-optional` | New | Differentiates styles between a single line tooltip or multi line tooltip for progress step overflow |
|
| 39 | | `bx--tooltip_multi` | New | Used as an addition to regular tooltip class |
|