Skip to content

Commit

Permalink
Merge branch 'master' into motion-fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@jnm2377
jnm2377 authored Apr 29, 2019
2 parents efb3b33 + c49819f commit 7d0b3e7
Show file tree
Hide file tree
Showing 23 changed files with 851 additions and 139 deletions.
91 changes: 75 additions & 16 deletions src/components/data-table/migrate-to-10.x.md
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,79 @@
## Data Table

### HTML

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 Data Table component. Please see the new structure below and reference the [data table page](https://next.carbondesignsystem.com/components/data-table/code) in our site to copy the specified new markup.

React and other framework variants should reflect the changes automatically.

**Things to note**:

- All `-v2`'s in selectors have been removed
- All SVG icons have changed to new icons.
- Structural changes and new selectors in the table title. See structure below and SCSS section for more details.
- Structural changes and new selectors in the table toolbar. See structure below and SCSS section for more details.
- Toolbar overflow menu now uses the overflow menu component `<ul>` markup instead of just `button.bx--batch-actions`
- `bx—search` container in toolbar no longer has the `bx--search—light` class
- Batch action buttons no longer have `bx--btn—ghost` class
- New markup/selector involving expandable features includes a `div.bx--child-row-inner-container` as a wrapper for content within the child row `td`.
- New markup/selectors involving sortable features include an additional icon `bx--table-sort__icon-unsorted` for non-sorted state, and a new class for sortable data table `bx--data-table—-sort`.
- New selectors `bx—table-column-checkbox` and `bx—table-column-menu` for checkbox and overflow menu `td`'s and `th`'s.
- New selector for `li` within a row overflow menu `bx--table-row--menu-option`. See SCSS section for more details.

**New Structure**:

```bash
bx--data-table-container
├── bx--data-table-header
│ ├── bx--data-table-header__title
│ └── bx--data-table-header__description
├── bx--table-toolbar
│ ├── bx--batch-actions
│ │ ├── bx--batch-action-list
│ │ └── bx--batch-summary
│ │ └── bx--batch-summary__para
│ └── bx--toolbar-content
│ ├── bx--toolbar-search-container-expandable (bx--toolbar-search-container-persistent)
│ ├── bx--overflow-menu bx--toolbar-action
│ └── bx--btn--primary
└── bx--data-table
├── thead
└── tbody
pagination
```

### Selectors

| Category | v9 | v10 |
| --------------- | ------------------------------- | ------------------------------------- |
| Table container | `.bx--data-table-v2-container` | `.bx--data-table-container` |
| Table header | `.bx--data-table-v2-header` | Now a container class |
| | | `.bx--data-table-header__title` |
| | | `.bx--data-table-header__description` |
| Data Table | | |
| | `.bx--data-table-v2` | `.bx--data-table` |
| | `.bx--data-table-v2--no-border` | `.bx--data-table--no-border` |
| | `.bx--data-table-v2--static` | `.bx--data-table--static` |
| | `.bx--data-table-v2--selected` | `.bx--data-table--selected` |
| | `.bx--data-table-v2--zebra` | `.bx--data-table--zebra` |
| Sizing | | |
| | `.bx--data-table-v2--compact` | `.bx--data-table--compact` |
| | `.bx--data-table-v2--short` | `.bx--data-table--short` |
| | `.bx--data-table-v2--tall` | `.bx--data-table--tall` |
| Category | v9 | v10 | Notes |
| --------------------------- | -------------------------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| **Table container** | `.bx--data-table-v2-container` | `.bx--data-table-container` | :eyes: Changed |
| **Table header** | `.bx--data-table-v2-header` | `.bx--data-table-header` | :eyes: Changed; Also, now a container class on a `div` instead of an `h4` |
| | - | `.bx--data-table-header__title` | :sparkles: New |
| | - | `.bx--data-table-header__description` | :sparkles: New |
| **Toolbar** | `bx--toolbar-search-container` | `bx--toolbar-search-container-expandable` | :sparkles: New; Default is expandable search |
| | - | `bx--toolbar-search-container-persistent` | :sparkles: New; Optional persistent search |
| **Data Table** | `.bx--data-table-v2--no-border` | - | :skull: Removed |
| | `.bx--data-table-v2--static` | `.bx--data-table--static` | :eyes: Changed |
| | `.bx--data-table-v2--selected` | `.bx--data-table--selected` | :eyes: Changed |
| | `.bx--data-table-v2--zebra` | `.bx--data-table--zebra` | :eyes: Changed |
| | - | `.bx--data-table—-sort` | :sparkles: New |
| | `.bx--data-table-v2—-small` | `.bx--data-table—-small` | :eyes: Changed |
| | `.bx--data-table-v2—-compact` | `.bx--data-table—-compact` | :eyes: Changed |
| | `.bx--data-table-v2—-tall` | `.bx--data-table—-tall` | :eyes: Changed |
| | `.bx--data-table-v2--compact` | `.bx--data-table--compact` | :eyes: Changed |
| | `.bx--data-table-v2--short` | `.bx--data-table--short` | :eyes: Changed |
| | `.bx--data-table-v2--tall` | `.bx--data-table--tall` | :eyes: Changed |
| **Table Rows** | `.bx--parent-row-v2` | `.bx--parent-row` | :eyes: Changed |
| | `.bx--expandable-row-v2` | `.bx--expandable-row` | :eyes: Changed |
| | `.bx--expandable-row--hidden-v2` | `.bx--expandable-row--hidden` | :eyes: Changed |
| | `.bx--expandable-row--hover-v2` | `.bx--expandable-row--hover` | :eyes: Changed |
| **Table Columns** | - | `.bx—table-column-checkbox` | :sparkles: New; Used in `th`'s and `td`'s with checkbox. |
| | - | `.bx—table-column-menu` | :sparkles: New; Used in `td`'s with overflow menu |
| | `.bx—table-expand-v2` | `.bx—table-expand` | :eyes: Changed |
| | - | `.bx--child-row-inner-container` | :sparkles: New; Container inside expand child row `td`, allows for motion animation |
| **Buttons, Icons and more** | `bx--table-sort-v2` | `bx--table-sort` | :eyes: Changed |
| | `bx--table-sort-v2__icon` | `bx--table-sort__icon` | :eyes: Changed |
| | - | `.bx--table-sort__icon-unsorted` | :sparkles: New |
| | `bx--table-expand-v2__button` | `bx--table-expand__button` | :eyes: Changed |
| | `bx--table-expand-v2__svg` | `bx--table-expand__svg` | :eyes: Changed |
| | - | `bx--table-row--menu-option` | :sparkles: New; Addional class added to `li.bx--overflow-menu-options__option` in table row overflow menus |
56 changes: 28 additions & 28 deletions src/components/dropdown/migrate-to-10.x.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,41 +11,41 @@ React and other framework variants should reflect the changes automatically.

**New Structure**:

```
```bash
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
│ ├── 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
```bash
bx--dropdown
├── bx--dropdown-text
│ └── bx--dropdown__arrow
└── <li>
└── dropdown list
├── bx--dropdown-item
│ └── bx--dropdown-link
├── bx--dropdown-item
│ └── bx--dropdown-link
└── bx--dropdown-item
└── bx--dropdown-link
```

### SCSS
Expand Down
15 changes: 11 additions & 4 deletions src/components/form/migrate-to-10.x.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,21 @@ Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https

**New Structure**:

```html
bx--form-item ├── bx--label ├── bx--form__helper-text (optional) ├── input └── bx--form-requirement (invalid use only)
```bash
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)
```bash
bx--form-item
├── input
├── bx--label
└── bx--form-requirement (invalid use only)
```

### SCSS
Expand Down
27 changes: 22 additions & 5 deletions src/components/inline-loading/migrate-to-10.x.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,27 @@
### HTML

Design change around the spinner UI involves markup change, utilizing new CSS classes (below). Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/inline-loading/code) site. React and other framework variants should reflect the change automatically.
Design change around the spinner UI involves markup change for the loading SVG's circle, utilizing new CSS classes (below). Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/inline-loading/code) site. React and other framework variants should reflect the change automatically.

**New Markup**:

```html
<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
<circle class="bx--loading__background" cx="0" cy="0" r="30" />
<circle class="bx--loading__stroke" cx="0" cy="0" r="30" />
</svg>
```

**Old Markup**:

```html
<svg class="bx--loading__svg" viewBox="-75 -75 150 150"><circle cx="0" cy="0" r="37.5" /></svg>
```

###

### SCSS

| Class | Note |
| ------------------------- | ---- |
| `bx--loading__background` | New |
| `bx--loading__stroke` | New |
| v9 | v10 | Note |
| --- | ------------------------- | ----- |
| - | `bx--loading__background` | ✨New |
| - | `bx--loading__stroke` | ✨New |
29 changes: 24 additions & 5 deletions src/components/loading/migrate-to-10.x.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,29 @@
### HTML

Design change around the spinner UI involves markup change, utilizing new CSS classes (below). Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/loading/code) site. React and other framework variants should reflect the change automatically.
Design change around the spinner UI involves markup change for the loading SVG's circle, utilizing new CSS classes (below). Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/loading/code) site. React and other framework variants should reflect the change automatically.

**New Markup**:

```html
<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
<title>Loading</title>
<circle class="bx--loading__stroke" cx="0" cy="0" r="37.5" />
</svg>
```

**Old Markup**:

```html
<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
<title>Loading</title>
<circle cx="0" cy="0" r="37.5" />
</svg>
```

###

### SCSS

| Class | Note |
| ------------------------- | ---- |
| `bx--loading__background` | New |
| `bx--loading__stroke` | New |
| v9 | v10 | Note |
| --- | --------------------- | ---- |
| - | `bx--loading__stroke` | New |
38 changes: 37 additions & 1 deletion src/components/modal/migrate-to-10.x.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,39 @@
### 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/modal/code) site. React and other framework variants should reflect the change automatically.
Updating HTML pertains only to the "close" button 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/modal/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--modal-close__icon"
width="16"
height="16"
viewBox="0 0 16 16"
aria-hidden="true"
>
<path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>
</svg>
```

**Old Markup**:

```html
<svg class="bx--modal-close__icon" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<title>Close Modal</title>
<path
d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
fill-rule="nonzero"
/>
</svg>
```

###

### SCSS

No new selectors.
44 changes: 43 additions & 1 deletion src/components/notification/migrate-to-10.x.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,45 @@
### 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/notification/code) site. React and other framework variants should reflect the change automatically.
Updating HTML pertains only to the "close" button 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/notification/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--inline-notification__close-icon"
width="16"
height="16"
viewBox="0 0 16 16"
aria-hidden="true"
>
<path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>
</svg>
```

**Old Markup**:

```html
<svg
aria-hidden="true"
class="bx--inline-notification__close-icon"
width="10"
height="10"
viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
fill-rule="nonzero"
/>
</svg>
```

###

### SCSS

No new selectors.
Loading

0 comments on commit 7d0b3e7

Please sign in to comment.