Skip to content

Commit

Permalink
refactor(grid): remove narrow mode from CSS Grid implementation (#10621)
Browse files Browse the repository at this point in the history
* refactor(grid): remove narrow mode from react components and storybook

* refactor(grid): remove narrow mode from grid elements package & example

* Update packages/react/src/components/Grid/next/Grid.mdx

Co-authored-by: Abbey Hart <[email protected]>

Co-authored-by: Abbey Hart <[email protected]>
Co-authored-by: Josefina Mancilla <[email protected]>
  • Loading branch information
3 people authored Feb 11, 2022
1 parent 7558fe0 commit 8a07838
Show file tree
Hide file tree
Showing 10 changed files with 22 additions and 148 deletions.
18 changes: 4 additions & 14 deletions packages/grid/examples/css-grid/src/pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,6 @@ export default function IndexPage() {
</div>
</section>

<section>
<h2>Narrow</h2>
<div class="bx--css-grid bx--css-grid--narrow">
<div class="bx--sm:col-span-4"></div>
<div class="bx--sm:col-span-4"></div>
<div class="bx--sm:col-span-4"></div>
<div class="bx--sm:col-span-4"></div>
</div>
</section>

<section>
<h2>Condensed</h2>
<div class="bx--css-grid bx--css-grid--condensed">
Expand Down Expand Up @@ -119,9 +109,9 @@ export default function IndexPage() {
<h2>Mixed Grid Modes</h2>
<div class="bx--css-grid">
<div class="bx--sm:col-span-1 bx--md:col-span-2 bx--lg:col-span-4">
<div class="bx--css-grid--narrow bx--subgrid">
<div class="bx--css-grid bx--subgrid">
<div class="bx--sm:col-span-1 bx--md:col-span-2 bx--lg:col-span-4">
<p>narrow</p>
<p>wide</p>
</div>
</div>
</div>
Expand All @@ -140,9 +130,9 @@ export default function IndexPage() {
</div>
</div>
<div class="bx--sm:col-span-3 bx--md:col-span-6 bx--lg:col-span-12">
<div class="bx--css-grid--narrow bx--subgrid">
<div class="bx--css-grid bx--subgrid">
<div class="bx--sm:col-span-3 bx--md:col-span-6 bx--lg:col-span-12">
<p>narrow</p>
<p>wide</p>
</div>
</div>
</div>
Expand Down
9 changes: 0 additions & 9 deletions packages/grid/examples/css-grid/src/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,6 @@
outline: 1px dashed $blue-40;
}

.bx--css-grid.bx--css-grid--narrow {
background-color: $teal-20;
outline: 1px dashed $teal-40;
}

.bx--css-grid.bx--css-grid--condensed {
background-color: $purple-20;
outline: 1px dashed $purple-40;
Expand All @@ -49,10 +44,6 @@
outline: 1px dashed $green-30;
}

.bx--css-grid.bx--css-grid--narrow > [class*='col'] {
background: $teal-10;
}

.bx--css-grid.bx--css-grid--condensed > [class*='col'] {
background: $purple-10;
}
35 changes: 1 addition & 34 deletions packages/grid/scss/modules/_css-grid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -77,38 +77,6 @@
display: grid;
}

// -----------------------------------------------------------------------------
// Narrow
// -----------------------------------------------------------------------------
.#{$prefix}--css-grid--narrow {
--cds-grid-margin: 1rem;

padding-right: var(--cds-grid-margin);
padding-left: var(--cds-grid-margin);

@include breakpoint(md) {
padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
}
}

.#{$prefix}--css-grid--narrow > [class*='col'] {
margin-left: calc(var(--cds-grid-gutter) / 2 * -1);
}

// Narrow subgrid inside wide
.#{$prefix}--css-grid:not(.#{$prefix}--css-grid--condensed)
.#{$prefix}--subgrid.#{$prefix}--css-grid--narrow {
padding: 0;
}

// Narrow subgrid column inside wide
.#{$prefix}--css-grid
.#{$prefix}--subgrid.#{$prefix}--css-grid--narrow
> [class*='col'] {
margin-left: calc(var(--cds-grid-gutter) / 2 * -1);
}

// -----------------------------------------------------------------------------
// Condensed
// -----------------------------------------------------------------------------
Expand All @@ -120,8 +88,7 @@
}

// condensed subgrid inside wide
.#{$prefix}--css-grid:not(.#{$prefix}--css-grid--narrow)
.bx--subgrid.#{$prefix}--css-grid--condensed {
.#{$prefix}--css-grid .bx--subgrid.#{$prefix}--css-grid--condensed {
margin-right: calc((var(--cds-grid-gutter-wide) / 2) * -1);
margin-left: calc((var(--cds-grid-gutter-wide) / 2) * -1);
}
Expand Down
8 changes: 0 additions & 8 deletions packages/react/src/components/Grid/CSSGrid.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { GridSettings, useGridSettings } from './GridContext';
function CSSGrid({
as: BaseComponent = 'div',
condensed = false,
narrow = false,
fullWidth = false,
columns = 16,
className: containerClassName,
Expand All @@ -27,7 +26,6 @@ function CSSGrid({
[`${prefix}--css-grid`]: !subgrid,
[`${prefix}--css-grid--${columns}`]: !subgrid && columns !== 16,
[`${prefix}--css-grid--condensed`]: condensed,
[`${prefix}--css-grid--narrow`]: narrow,
[`${prefix}--css-grid--full-width`]: fullWidth,
[`${prefix}--subgrid`]: subgrid,
[`${prefix}--col-span-${columns}`]:
Expand Down Expand Up @@ -74,12 +72,6 @@ CSSGrid.propTypes = {
* Remove the default max width that the grid has set
*/
fullWidth: PropTypes.bool,

/**
* Container hangs 16px into the gutter. Useful for
* typographic alignment with and without containers.
*/
narrow: PropTypes.bool,
};

export { CSSGrid };
16 changes: 0 additions & 16 deletions packages/react/src/components/Grid/Grid-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,22 +54,6 @@ export const ExperimentalCSSGrid = () => (
</Grid>
</Grid>

<Heading>Narrow</Heading>
<Grid narrow>
<Column sm={1} md={2} lg={4}>
Column
</Column>
<Column sm={1} md={2} lg={4}>
Column
</Column>
<Column sm={1} md={2} lg={4}>
Column
</Column>
<Column sm={1} md={2} lg={4}>
Column
</Column>
</Grid>

<Heading>Condensed</Heading>
<Grid condensed>
<Column sm={1} md={2} lg={4}>
Expand Down
17 changes: 5 additions & 12 deletions packages/react/src/components/Grid/__tests__/Grid-test.e2e.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,6 @@ describe('Grid', () => {
<Column sm={4} />
</Grid>

<Grid narrow>
<Column sm={4} />
<Column sm={4} />
<Column sm={4} />
<Column sm={4} />
</Grid>

<Grid condensed>
<Column sm={4} />
<Column sm={4} />
Expand Down Expand Up @@ -114,9 +107,9 @@ describe('Grid', () => {

<Grid>
<Column sm={1} md={2} lg={4}>
<Grid narrow>
<Grid>
<Column sm={1} md={2} lg={4}>
<p>narrow</p>
<p>wide</p>
</Column>
</Grid>
</Column>
Expand All @@ -135,9 +128,9 @@ describe('Grid', () => {
</Grid>
</Column>
<Column sm={3} md={6} lg={12}>
<Grid narrow>
<Grid>
<Column sm={3} md={6} lg={12}>
<p>narrow</p>
<p>wide</p>
</Column>
</Grid>
</Column>
Expand Down Expand Up @@ -177,7 +170,7 @@ describe('Grid', () => {

it('should render', () => {
cy.viewport(1400, 500);
cy.findAllByText(/narrow/).should('be.visible');
cy.findAllByText(/wide/).should('be.visible');

// snapshots should always be taken _after_ an assertion that
// a element/component should be visible. This is to ensure
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,6 @@ p:first-of-type:not(.bx--progress-label) {
margin-top: 0;
}

.bx--css-grid.bx--css-grid--narrow {
background-color: $teal-20;
outline: 1px dashed $teal-40;
}

.bx--css-grid.bx--css-grid--condensed {
background-color: $purple-20;
outline: 1px dashed $purple-40;
Expand All @@ -53,10 +48,6 @@ p:first-of-type:not(.bx--progress-label) {
outline: 1px dashed $green-30;
}

.bx--css-grid.bx--css-grid--narrow > [class*='col'] {
background: $teal-10;
}

.bx--css-grid.bx--css-grid--condensed > [class*='col'] {
background: $purple-10;
}
30 changes: 8 additions & 22 deletions packages/react/src/components/Grid/next/Grid.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
- [Debugging](#debugging)
- [Grid modes](#grid-modes)
- [Wide grid](#wide-grid)
- [Narrow grid](#narrow-grid)
- [Condensed grid](#condensed-grid)
- [Subgrid](#subgrid)
- [Mixed grid modes](#mixed-grid-modes)
Expand All @@ -34,8 +33,7 @@ import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
Carbon's grid components help developers use the
[2x Grid](https://www.carbondesignsystem.com/guidelines/2x-grid/overview). The
project provides `Grid` and `Column` components which can be used to build a
variety of layouts. You can import these components from
`@carbon/react`:
variety of layouts. You can import these components from `@carbon/react`:

```js
import { Grid, Column } from '@carbon/react';
Expand Down Expand Up @@ -111,21 +109,14 @@ There are several
[grid modes](https://www.carbondesignsystem.com/guidelines/2x-grid/implementation/#grid-modes)
that you can use depending on the layout effect you're looking to achieve. By
default, `Grid` uses the wide grid mode with a 32px gutter. However, you can use
the `narrow` or `condensed` props to enable the narrow and condensed grid modes,
respectively.
the `condensed` prop to enable the condensed grid mode.

### Wide grid

<Preview>
<Story id="components-grid--wide" />
</Preview>

### Narrow grid

<Preview>
<Story id="components-grid--narrow" />
</Preview>

### Condensed grid

<Preview>
Expand All @@ -148,15 +139,10 @@ in a `Column` enables you to define responsive parameters for the column (`sm`,

## Mixed grid modes

The same way that you can pass in `narrow` or `condensed` to a root `Grid`, you
can also pass in `narrow` or `condensed` to a nested `Grid` (subgrid) to enable
a certain grid mode for only that subgrid. This can be useful when you need to
mix-and-match certain grid modes to achieve a particular layout.

As an example, one common use case is to define a two column layout by mixing a
`narrow` grid in the left column with a `condensed` grid in the right column.
This results in reduced equal grid margin to the left of the narrow, between the
two, and to the right of the condensed.
The same way that you can pass in `condensed` to a root `Grid`, you can also
pass in `condensed` to a nested `Grid` (subgrid) to enable a certain grid mode
for only that subgrid. This can be useful when you need to mix-and-match certain
grid modes to achieve a particular layout.

<Preview>
<Story id="components-grid--mixed-grid-modes" />
Expand Down Expand Up @@ -212,8 +198,8 @@ By default, `Grid` and `Column` will render as a `div`. However, you can use the
your project.

In the example below, we use the `as` prop on `Column` to change it from a `div`
to a `section`. Similarly, we use the `as` prop on `Column` to change it from
a `div` to an `article`.
to a `section`. Similarly, we use the `as` prop on `Column` to change it from a
`div` to an `article`.

```jsx
import { Grid, Column } from '@carbon/react';
Expand Down
19 changes: 4 additions & 15 deletions packages/react/src/components/Grid/next/Grid.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,17 +39,6 @@ export const Wide = () => {
);
};

export const Narrow = () => {
return (
<Grid narrow>
<Column sm={4} />
<Column sm={4} />
<Column sm={4} />
<Column sm={4} />
</Grid>
);
};

export const Condensed = () => {
return (
<Grid condensed>
Expand Down Expand Up @@ -147,9 +136,9 @@ export const MixedGridModes = () => {
return (
<Grid>
<Column sm={1} md={2} lg={4}>
<Grid narrow>
<Grid>
<Column sm={1} md={2} lg={4}>
<p>narrow</p>
<p>wide</p>
</Column>
</Grid>
</Column>
Expand All @@ -168,9 +157,9 @@ export const MixedGridModes = () => {
</Grid>
</Column>
<Column sm={3} md={6} lg={12}>
<Grid narrow>
<Grid>
<Column sm={3} md={6} lg={12}>
<p>narrow</p>
<p>wide</p>
</Column>
</Grid>
</Column>
Expand Down
9 changes: 0 additions & 9 deletions packages/react/src/components/Grid/next/Grid.stories.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,6 @@
margin-top: 0;
}

.cds--css-grid.cds--css-grid--narrow {
background-color: $teal-20;
outline: 1px dashed $teal-40;
}

.cds--css-grid.cds--css-grid--condensed {
background-color: $purple-20;
outline: 1px dashed $purple-40;
Expand All @@ -46,10 +41,6 @@
outline: 1px dashed $green-30;
}

.cds--css-grid.cds--css-grid--narrow > [class*='col'] {
background: $teal-10;
}

.cds--css-grid.cds--css-grid--condensed > [class*='col'] {
background: $purple-10;
}

0 comments on commit 8a07838

Please sign in to comment.