-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'data-table-zebra' of github.com:jnm2377/carbon-componen…
…ts into data-table-zebra
- Loading branch information
Showing
10 changed files
with
280 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,35 @@ | ||
| ### HTML | ||
|
|
||
| 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/accordion/code) site. React and other framework variants should reflect the change automatically. | ||
| Updating HTML pertains only to SVG icon. 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/accordion/code) site. React and other framework variants should reflect the change automatically. | ||
|
|
||
| **New Markup**: | ||
|
|
||
| ```html | ||
| <svg | ||
| focusable="false" | ||
| preserveAspectRatio="xMidYMid meet" | ||
| style="will-change: transform;" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| class="bx--accordion__arrow" | ||
| width="16" | ||
| height="16" | ||
| viewBox="0 0 16 16" | ||
| aria-hidden="true" | ||
| > | ||
| <path d="M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z"></path> | ||
| </svg> | ||
| ``` | ||
|
|
||
| **Old Markup**: | ||
|
|
||
| ```html | ||
| <svg class="bx--accordion__arrow" width="7" height="12" viewBox="0 0 7 12"> | ||
| <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" /> | ||
| </svg> | ||
| ``` | ||
|
|
||
| ### SCSS | ||
|
|
||
| No selector changes. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,46 @@ | ||
| ### HTML | ||
|
|
||
| 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/button/code) site. React and other framework variants should reflect the change automatically. | ||
| Updating HTML pertains only to SVG icon. 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/button/code) site. React and other framework variants should reflect the change automatically. | ||
|
|
||
| **New Markup**: | ||
|
|
||
| ```html | ||
| <svg | ||
| focusable="false" | ||
| preserveAspectRatio="xMidYMid meet" | ||
| style="will-change: transform;" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| class="bx--btn__icon" | ||
| width="16" | ||
| height="16" | ||
| viewBox="0 0 16 16" | ||
| aria-hidden="true" | ||
| > | ||
| <path d="M8.5 7.5V3h-1v4.5H3v1h4.5V13h1V8.5H13v-1z"></path> | ||
| </svg> | ||
| ``` | ||
|
|
||
| **Old Markup**: | ||
|
|
||
| ```html | ||
| <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> | ||
| <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" /> | ||
| </svg> | ||
| ``` | ||
|
|
||
| ### SCSS | ||
|
|
||
| A new class has been added to target disabled buttons | ||
| No changes to _existing_ selectors, but now has _new selectors_. | ||
|
|
||
| | Old Class | New Class | Note | | ||
| | --------- | ----------------- | ---- | | ||
| | - | bx--btn--disabled | New | | ||
| | v9 | v10 | Note | | ||
| | --------------------- | ------------------ | -------------------------------------- | | ||
| | - | `bx--btn—disabled` | ✨New; Used to target disabled buttons | | ||
| | `.bx--btn` | No change | | | ||
| | `.bx--btn--primary` | No change | | | ||
| | `.bx--btn--secondary` | No change | | | ||
| | `.bx--btn--tertiary` | No change | | | ||
| | `.bx--btn--danger` | No change | | | ||
| | `.bx--btn--sm` | No change | | | ||
| | `.bx--btn—ghost` | No change | | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,63 @@ | ||
| ### HTML | ||
|
|
||
| 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/code-snippet/code) site. React and other framework variants should reflect the change automatically. | ||
| Updating HTML pertains only to SVG icons in the copy button and "Show more" button. 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/code-snippet/code) site. React and other framework variants should reflect the change automatically. | ||
|
|
||
| **New Markup**: | ||
|
|
||
| ```html | ||
| <!-- Copy icon --> | ||
| <svg | ||
| focusable="false" | ||
| preserveAspectRatio="xMidYMid meet" | ||
| style="will-change: transform;" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| class="bx--snippet__icon" | ||
| width="16" | ||
| height="16" | ||
| viewBox="0 0 16 16" | ||
| aria-hidden="true" | ||
| > | ||
| <path d="M14 5v9H5V5h9m0-1H5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z"></path> | ||
| <path d="M2 9H1V2a1 1 0 0 1 1-1h7v1H2z"></path> | ||
| </svg> | ||
|
|
||
| <!-- Show more icon --> | ||
| <svg | ||
| focusable="false" | ||
| preserveAspectRatio="xMidYMid meet" | ||
| style="will-change: transform;" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| aria-label="Show more icon" | ||
| class="bx--icon-chevron--down bx--snippet__icon" | ||
| width="16" | ||
| height="16" | ||
| viewBox="0 0 16 16" | ||
| role="img" | ||
| > | ||
| <path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path> | ||
| </svg> | ||
| ``` | ||
|
|
||
| **Old Markup**: | ||
|
|
||
| ```html | ||
| <!-- Copy icon --> | ||
| <svg class="bx--snippet__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> | ||
| <path d="M1 10H0V2C0 .9.9 0 2 0h8v1H2c-.6 0-1 .5-1 1v8z" /> | ||
| <path | ||
| d="M11 4.2V8h3.8L11 4.2zM15 9h-4c-.6 0-1-.4-1-1V4H4.5c-.3 0-.5.2-.5.5v10c0 .3.2.5.5.5h10c.3 0 .5-.2.5-.5V9zm-4-6c.1 0 .3.1.4.1l4.5 4.5c0 .1.1.3.1.4v6.5c0 .8-.7 1.5-1.5 1.5h-10c-.8 0-1.5-.7-1.5-1.5v-10C3 3.7 3.7 3 4.5 3H11z" | ||
| /> | ||
| </svg> | ||
|
|
||
| <!-- Show more icon --> | ||
| <svg class="bx--icon-chevron--down" width="12" height="7" viewBox="0 0 12 7" aria-label="Show more icon"> | ||
| <title>Show more icon</title> | ||
| <path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" /> | ||
| </svg> | ||
| ``` | ||
|
|
||
| ### SCSS | ||
|
|
||
| No selector changes. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,23 @@ | ||
| ### HTML | ||
|
|
||
| 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/content-switcher/code) site. React and other framework variants should reflect the change automatically. | ||
| Updating HTML pertains only to SVG icon. Content switcher with icon is no longer supported. | ||
|
|
||
| Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/content-switcher/code) site. React and other framework variants should reflect the change automatically. | ||
|
|
||
| **New Markup**: | ||
|
|
||
| ```html | ||
| No longer supporting content switcher with icon | ||
| ``` | ||
|
|
||
| **Old Markup**: | ||
|
|
||
| ```html | ||
| <svg class="bx--content-switcher__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" /> | ||
| </svg> | ||
| ``` | ||
|
|
||
| ### SCSS | ||
|
|
||
| No selector changes. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,7 @@ | ||
| ### HTML | ||
|
|
||
| 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/code-snippet/code) site. React and other framework variants should reflect the change automatically. | ||
| Updating HTML pertains only to SVG icon. 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/code-snippet/code) site. React and other framework variants should reflect the change automatically. | ||
|
|
||
| ### SCSS | ||
|
|
||
| No selector changes. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,61 @@ | ||
| ### HTML | ||
|
|
||
| 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/dropdown/code) site. React and other framework variants should reflect the change automatically. | ||
| Aside from using new icons from the [`carbon-elements`](https://github.com/IBM/carbon-elements) package, there are several structural changes and new selectors in the Dropdown component. Please see the new structure below and reference the [dropdown page](https://next.carbondesignsystem.com/components/dropdown/code) in our site to copy the specified new markup. | ||
|
|
||
| React and other framework variants should reflect the changes automatically. | ||
|
|
||
| **Things to note**: | ||
|
|
||
| - Essentially, the dropdown list container `<li><ul class="bx--dropdown-list"> … </ul><li>` and its children are the only things to remain structurally the same. | ||
| - Icons have new paths and svg attributes. | ||
|
|
||
| **New Structure**: | ||
|
|
||
| ``` | ||
| bx--form-item | ||
| └── bx--dropdown__wrapper | ||
| | ├── bx--label | ||
| | ├── bx--form__helper-text (optional) | ||
| | └── bx--dropdown | ||
| | ├── bx--dropdown__invalid-icon (invalid use only) | ||
| | ├── bx--dropdown-text | ||
| | ├── bx--dropdown__arrow-container | ||
| | | └── bx--dropdown__arrow | ||
| | └── <li> | ||
| | └── bx--dropdown-list | ||
| | ├── bx--dropdown-item | ||
| | | └── bx--dropdown-link | ||
| | ├── bx--dropdown-item | ||
| | | └── bx--dropdown-link | ||
| | └── bx--dropdown-item | ||
| | └── bx--dropdown-link | ||
| └── form requirement (invalid use only) | ||
| ``` | ||
|
|
||
| **Old Structure**: | ||
|
|
||
| ``` | ||
| └── bx--dropdown | ||
| ├── bx--dropdown-text | ||
| | └── bx--dropdown__arrow | ||
| └── <li> | ||
| └── dropdown list | ||
| ├── bx--dropdown-item | ||
| | └── bx--dropdown-link | ||
| ├── dropdown list item | ||
| | └── bx--dropdown-link | ||
| └── bx--dropdown-item | ||
| └── bx--dropdown-link | ||
| ``` | ||
|
|
||
| ### SCSS | ||
|
|
||
| The selector for the invalid state has changed to avoid selecting data attributes | ||
| There is _one_ change to an _existing_ selector, as well as _four new_ selectors. The remaining selectors have no change. | ||
|
|
||
| | Old Class | New Class | Note | | ||
| | -------------------------- | --------------------- | ------- | | ||
| | bx--dropdown[data-invalid] | bx--dropdown--invalid | Changed | | ||
| | v9 | v10 | Note | | ||
| | ---------------------------- | ------------------------------- | ----------------------------------------------- | | ||
| | `bx--dropdown[data-invalid]` | `bx--dropdown—invalid` | :eyes: Changed; Avoid selecting data attributes | | ||
| | - | `bx—dropdown__wrapper` | ✨New | | ||
| | - | `bx--dropdown__arrow-container` | ✨New | | ||
| | - | `bx--dropdown—disabled` | ✨New | | ||
| | - | `bx--dropdown__invalid-icon` | ✨New | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,23 @@ | ||
| ### HTML | ||
|
|
||
| Design change around the label UI involves markup change, utilizing a new CSS classe (below). Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/file-uploader/code) site. React and other framework variants should reflect the change automatically. | ||
| No structural changes, however, the label now has a new CSS class. | ||
|
|
||
| Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/file-uploader/code) site. React and other framework variants should reflect the change automatically. | ||
|
|
||
| **New Markup**: | ||
|
|
||
| ```html | ||
| <div class="bx--form-item"><strong class="bx--file--label">Account photo</strong> ...</div> | ||
| ``` | ||
|
|
||
| **Old Markup**: | ||
|
|
||
| ```html | ||
| <div class="bx--form-item"><strong class="bx--label">Account photo</strong> ...</div> | ||
| ``` | ||
|
|
||
| ### SCSS | ||
|
|
||
| | Class | Note | | ||
| | ----------------- | ---- | | ||
| | `bx--file--label` | New | | ||
| | v9 | v10 | Note | | ||
| | --- | ---------------- | ----- | | ||
| | - | `bx--file—label` | ✨New | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,35 @@ | ||
| ### HTML | ||
|
|
||
| Icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used. Also some internal changes involves re-ordering the markup. Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/form/code) site. React and other framework variants should reflect the change automatically. | ||
| Icons from [`carbon-elements`](https://github.com/IBM/carbon-elements) package are now used. Additionally, some internal changes involves re-ordering the markup. | ||
|
|
||
| Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/form/code) site. React and other framework variants should reflect the change automatically. | ||
|
|
||
| **Things to note**: | ||
|
|
||
| - Submit button structure remains the same. | ||
| - Label now goes above inputs. | ||
| - For specific form input changes, view the migration doc for said component (i.e. select, textarea, etc). | ||
|
|
||
| **New Structure**: | ||
|
|
||
| ```html | ||
| bx--form-item ├── bx--label ├── bx--form__helper-text (optional) ├── input └── bx--form-requirement (invalid use only) | ||
| ``` | ||
|
|
||
| **Old Structure**: | ||
|
|
||
| ```html | ||
| bx--form-item ├── input ├── bx--label └── bx--form-requirement (invalid use only) | ||
| ``` | ||
|
|
||
| ### SCSS | ||
|
|
||
| One new selector; no changes to existing classes. | ||
|
|
||
| | v9 | v10 | Note | | ||
| | ---------------------- | ----------------------- | ----- | | ||
| | - | `bx--form__helper-text` | ✨New | | ||
| | `bx--form-item` | No change | | | ||
| | `bx—label` | No change | | | ||
| | `bx--form-requirement` | No change | | | ||
| | `.bx--label—disabled` | No change | | |