-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into add-tag-styles
- Loading branch information
Showing
47 changed files
with
795 additions
and
189 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 |
|---|---|---|
|
|
@@ -12,7 +12,7 @@ jobs: | |
| steps: | ||
| - uses: actions/checkout@v2 | ||
| - name: Use Node.js 14.x | ||
| uses: actions/setup-node@v2.2.0 | ||
| uses: actions/setup-node@v2.3.0 | ||
| with: | ||
| node-version: '14.x' | ||
| - name: Run yarn dedupe | ||
|
|
@@ -23,7 +23,7 @@ jobs: | |
| steps: | ||
| - uses: actions/checkout@v2 | ||
| - name: Use Node.js 14.x | ||
| uses: actions/setup-node@v2.2.0 | ||
| uses: actions/setup-node@v2.3.0 | ||
| with: | ||
| node-version: '14.x' | ||
| - name: Install dependencies | ||
|
|
@@ -36,7 +36,7 @@ jobs: | |
| steps: | ||
| - uses: actions/checkout@v2 | ||
| - name: Use Node.js 14.x | ||
| uses: actions/setup-node@v2.2.0 | ||
| uses: actions/setup-node@v2.3.0 | ||
| with: | ||
| node-version: '14.x' | ||
| - name: Install dependencies | ||
|
|
@@ -51,7 +51,7 @@ jobs: | |
| steps: | ||
| - uses: actions/checkout@v2 | ||
| - name: Use Node.js 14.x | ||
| uses: actions/setup-node@v2.2.0 | ||
| uses: actions/setup-node@v2.3.0 | ||
| with: | ||
| node-version: '14.x' | ||
| - uses: actions/[email protected] | ||
|
|
@@ -77,7 +77,7 @@ jobs: | |
| steps: | ||
| - uses: actions/checkout@v2 | ||
| - name: Use Node.js 14.x | ||
| uses: actions/setup-node@v2.2.0 | ||
| uses: actions/setup-node@v2.3.0 | ||
| with: | ||
| node-version: '14.x' | ||
| - uses: actions/[email protected] | ||
|
|
@@ -113,7 +113,7 @@ jobs: | |
| steps: | ||
| - uses: actions/checkout@v2 | ||
| - name: Use Node.js 14.x | ||
| uses: actions/setup-node@v2.2.0 | ||
| uses: actions/setup-node@v2.3.0 | ||
| with: | ||
| node-version: '14.x' | ||
| - uses: actions/[email protected] | ||
|
|
||
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
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
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,22 +1,178 @@ | ||
| # Grid | ||
|
|
||
| <!-- START doctoc generated TOC please keep comment here to allow auto update --> | ||
| <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> | ||
|
|
||
| ## Table of Contents | ||
|
|
||
| - [Overview](#overview) | ||
| - [Changes](#changes) | ||
| - [Configuration](#configuration) | ||
| - [Grid](#grid) | ||
| - [Row](#row) | ||
| - [Column](#column) | ||
| - [Breakpoints](#breakpoints) | ||
| - [Offset](#offset) | ||
|
|
||
| <!-- END doctoc generated TOC please keep comment here to allow auto update --> | ||
|
|
||
| **Note: everything in this file is a work-in-progress and will be changed.** | ||
|
|
||
| ## Overview | ||
|
|
||
| The `@carbon/grid` package has been modified to use a CSS Grid based | ||
| implementation, rather than the previous flexbox implementation. | ||
|
|
||
| The grid continues to be integrated into `carbon-components` as well as the new | ||
| `@carbon/styles` package. There is no need to install additional packages if you | ||
| are using `carbon-components` or `@carbon/styles` already. | ||
|
|
||
| ## Changes | ||
|
|
||
| | Filename | v10 | v11 | | ||
| | ------------------- | ------------------------ | ---------------------------------------- | | ||
| | `scss/12.scss` | | Removed | | ||
| | `scss/_mixins.scss` | | | | ||
| | `scss/_mixins.scss` | `$carbon--aspect-ratios` | Removed, use styles package instead | | ||
| | `scss/_mixins.scss` | `@mixin carbon--grid` | | | ||
| | `scss/_prefix.scss` | | Removed, use `scss/_config.scss` instead | | ||
| | `scss/grid.scss` | | | | ||
| | `scss/index.scss` | | | | ||
|
|
||
| Notes | ||
|
|
||
| - The grid now uses 16 columns by default, there is no longer a 12 column mode | ||
| - Configure Sass Modules is now done through a `_config.scss` file (for things | ||
| like `$prefix`) | ||
| - Breakpoints are now defined in `@carbon/grid` | ||
| | Filename | v10 | v11 | | ||
| | ------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| | `scss/12.scss` | | Removed | | ||
| | `scss/_mixins.scss` | | | | ||
| | `scss/_mixins.scss` | `$carbon--aspect-ratios` | Removed, use styles package instead | | ||
| | `scss/_mixins.scss` | `@mixin carbon--grid` | Removed, used mixin from `_css-grid.scss` instead | | ||
| | `scss/_prefix.scss` | | Removed, use `scss/_config.scss` instead | | ||
| | `scss/grid.scss` | | Renamed to `_css-grid.scss` | | ||
| | | | `mixin css-grid` | | ||
| | | | `mixin subgrid` | | ||
| | | `.#{$prefix}--grid` | `.#{$prefix}--css-grid` | | ||
| | | `.#{$prefix}--grid--narrow` | `.#{$prefix}--css-grid--narrow` | | ||
| | | `.#{$prefix}--grid--condensed` | `.#{$prefix}--css-grid--condensed` | | ||
| | | `.#{$prefix}--row` | Removed, columns should be direct children of grid containers | | ||
| | | `.#{$prefix}--col` | `.#{$prefix}--col-span-1` (1-16 available) | | ||
| | | `.#{$prefix}--col-#{$breakpoint}-#{$columns}` (e.g. `bx--col-sm-2`) | `.#{$prefix}--#{$breakpoint}:col-span#{$columns}` (e.g. `bx--sm:col-span-2`) | | ||
| | | `.#{$prefix}--no-gutter` | `.#{$prefix}--css-grid--no-gutter` | | ||
| | | `.#{$prefix}--grid--full-width` | `.#{$prefix}--css-grid--full-width` | | ||
| | | `.#{$prefix}--offset-#{$breakpoint}-#{$columns}` (e.g. `bx--offset-sm-3`) | `.#{$prefix}--#{$breakpoint}:col-(start/end)-#{$columns}` (e.g. `bx--sm:col-start-4 bx--sm:col-end-5` and `bx--sm:col-start-4 bx--sm:col-end-5`) | | ||
| | | | `.#{$prefix}--hang` | | ||
| | | | `.#{$prefix}--gutter` | | ||
| | | `.#{$prefix}--hang--left` | `.#{$prefix}--gutter-start` | | ||
| | | `.#{$prefix}--hang--right` | `.#{$prefix}--gutter-end` | | ||
| | | `.#{$prefix}--hang--start` | `.#{$prefix}--gutter-start` | | ||
| | | `.#{$prefix}--hang--end` | `.#{$prefix}--gutter-end` | | ||
| | | | `.#{$prefix}--justify-items-start` | | ||
| | | | `.#{$prefix}--justify-items-end` | | ||
| | | | `.#{$prefix}--justify-items-center` | | ||
| | | | `.#{$prefix}--align-items-start` | | ||
| | | | `.#{$prefix}--align-items-end` | | ||
| | | | `.#{$prefix}--align-items-center` | | ||
| | `scss/index.scss` | | | | ||
|
|
||
| ### Configuration | ||
|
|
||
| Configuring Sass Modules is now done through a `_config.scss` file (for things | ||
| like `$prefix`) | ||
|
|
||
| ### Grid | ||
|
|
||
| The base grid definition now includes 16 columns by default. The new | ||
| `.#{$prefix}--css-grid` class should be used. | ||
|
|
||
| ```diff | ||
| -<div class="bx--grid"> | ||
| +<div class="bx--css-grid"> | ||
| <div class="bx--row"> | ||
| <div class="bx--col"></div> | ||
| <div class="bx--col"></div> | ||
| <div class="bx--col"></div> | ||
| <div class="bx--col"></div> | ||
| </div> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### Row | ||
|
|
||
| Rows are no longer needed and have been removed. Columns can be placed as direct | ||
| children of a grid container. | ||
|
|
||
| ```diff | ||
| <div class="bx--css-grid"> | ||
| - <div class="bx--row"> | ||
| <div class="bx--col"></div> | ||
| <div class="bx--col"></div> | ||
| <div class="bx--col"></div> | ||
| <div class="bx--col"></div> | ||
| - </div> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### Column | ||
|
|
||
| The auto-column functionality has changed. In v10 columns would automatically | ||
| expand to fill the available space inside the grid container. A grid with only | ||
| two columns, each would span 50% width or 6 columns. | ||
|
|
||
| In v11, each column by default spans one single column as defined by the parent | ||
| grid's parameters. | ||
|
|
||
| The default track sizing functions of the grid columns are defined by the | ||
| inherited `grid-template-columns` css custom property. This declares that there | ||
| should be `--cds-grid-columns` number of columns, and each column should by | ||
| default span a `minmax()` of `0` columns minimum, or a maximum of | ||
| `--cds-grid-column-size` (`1fr`). | ||
|
|
||
| The values of these custom properties can be changed to modify the default | ||
| behavior of columns. | ||
|
|
||
| If you relied on this auto-column behavior, you will now instead need to | ||
| explicitly define your column sizing via the `.#{$prefix}--col-span-*` classes. | ||
| When migrating, remember the base grid definition now includes 16 columns by | ||
| default instead of 12. | ||
|
|
||
| ```diff | ||
| <div class="bx--css-grid"> | ||
| - <div class="bx--col"></div> | ||
| - <div class="bx--col"></div> | ||
| - <div class="bx--col"></div> | ||
| - <div class="bx--col"></div> | ||
| + <div class="bx--col-span-4"></div> | ||
| + <div class="bx--col-span-4"></div> | ||
| + <div class="bx--col-span-4"></div> | ||
| + <div class="bx--col-span-4"></div> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### Breakpoints | ||
|
|
||
| The ability to specify different column widths at different breakpoints is still | ||
| available. The class names have changed slightly. | ||
|
|
||
| ```diff | ||
| <div class="bx--css-grid"> | ||
| - <div class="bx--col-sm-2 bx--col-md-4 bx--col-lg-6"> | ||
| + <div class="bx--sm:col-span-2 bx--md:col-span-4 bx--lg:col-span-6"> | ||
| <p>Small: Span 2 of 4</p> | ||
| <p>Medium: Span 4 of 8</p> | ||
| <p>Large: Span 6 of 16</p> | ||
| </div> | ||
| </div> | ||
| ``` | ||
|
|
||
| > Note: Breakpoints are now defined in `@carbon/grid` | ||
| ### Offset | ||
|
|
||
| Offset columns are now explicitly defined via a starting and ending column, | ||
| instead of the column size and offset amount. These classes map directly to the | ||
| `grid-column-start` and `grid-column-end` properties and their values in regard | ||
| to the grid column definition/template. | ||
|
|
||
| ```diff | ||
| <div class="bx--css-grid"> | ||
| - <div class="bx--col-sm-1 bx--offset-sm-3"></div> | ||
| + <div class="bx--sm:col-start-4 bx--sm:col-end-5"></div> | ||
|
|
||
| - <div class="bx--col-sm-2 bx--offset-sm-2"></div> | ||
| + <div class="bx--sm:col-start-3 bx--sm:col-end-5"></div> | ||
|
|
||
| - <div class="bx--col-sm-3 bx--offset-sm-1"></div> | ||
| + <div class="bx--sm:col-start-2 bx--sm:col-end-5"></div> | ||
|
|
||
| - <div class="bx--col-sm-4 bx--offset-sm-0"></div> | ||
| + <div class="bx--sm:col-span-4"></div> | ||
| </div> | ||
| ``` |
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
16 changes: 16 additions & 0 deletions
16
packages/carbon-react/src/components/Theme/Theme-story.scss
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 |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| // | ||
| // Copyright IBM Corp. 2018, 2018 | ||
| // | ||
| // This source code is licensed under the Apache-2.0 license found in the | ||
| // LICENSE file in the root directory of this source tree. | ||
| // | ||
|
|
||
| @use '@carbon/styles/scss/themes'; | ||
| @use '@carbon/styles/scss/theme'; | ||
| @use '@carbon/styles/scss/zone'; | ||
|
|
||
| .theme-section { | ||
| padding: 1rem; | ||
| background: theme.$background; | ||
| color: theme.$text-primary; | ||
| } |
Oops, something went wrong.