diff --git a/packages/grid/scss/_css-grid.scss b/packages/grid/scss/_css-grid.scss index b2c266372629..6913cf61ffb5 100644 --- a/packages/grid/scss/_css-grid.scss +++ b/packages/grid/scss/_css-grid.scss @@ -150,6 +150,20 @@ )}; } + // ----------------------------------------------------------------------------- + // Alignment + // ----------------------------------------------------------------------------- + + // Start + .#{$prefix}--css-grid--start { + margin-inline-start: 0; + } + + // End + .#{$prefix}--css-grid--end { + margin-inline-end: 0; + } + // ----------------------------------------------------------------------------- // Subgrid // ----------------------------------------------------------------------------- diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 3c785a614e6f..8fb1f8cc9152 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -3977,6 +3977,16 @@ Map { }, "Grid" => Object { "propTypes": Object { + "align": Object { + "args": Array [ + Array [ + "start", + "center", + "end", + ], + ], + "type": "oneOf", + }, "as": Object { "args": Array [ Array [ diff --git a/packages/react/src/components/Grid/CSSGrid.tsx b/packages/react/src/components/Grid/CSSGrid.tsx index bca1a4438d6b..6470970f12d0 100644 --- a/packages/react/src/components/Grid/CSSGrid.tsx +++ b/packages/react/src/components/Grid/CSSGrid.tsx @@ -14,6 +14,7 @@ import { GridSettings, useGridSettings } from './GridContext'; import { GridComponent, GridProps } from './GridTypes'; function CSSGrid({ + align, as: BaseComponent = 'div' as T, children, className: customClassName, @@ -50,6 +51,8 @@ function CSSGrid({ [`${prefix}--css-grid--condensed`]: mode === 'condensed', [`${prefix}--css-grid--narrow`]: mode === 'narrow', [`${prefix}--css-grid--full-width`]: fullWidth, + [`${prefix}--css-grid--start`]: align === 'start', + [`${prefix}--css-grid--end`]: align === 'end', }); // cast as any to let TypeScript allow passing in attributes to base component @@ -64,6 +67,11 @@ function CSSGrid({ } CSSGrid.propTypes = { + /** + * Specify grid aligment. Default is center + */ + align: PropTypes.oneOf(['start', 'center', 'end']), + /** * Provide a custom element to render instead of the default
*/ diff --git a/packages/react/src/components/Grid/Grid.tsx b/packages/react/src/components/Grid/Grid.tsx index 472349c889e6..886b8c05f515 100644 --- a/packages/react/src/components/Grid/Grid.tsx +++ b/packages/react/src/components/Grid/Grid.tsx @@ -21,6 +21,11 @@ function Grid(props: GridProps) { } Grid.propTypes = { + /** + * Specify grid aligment. Default is center + */ + align: PropTypes.oneOf(['start', 'center', 'end']), + /** * Provide a custom element to render instead of the default
*/ diff --git a/packages/react/src/components/Grid/__tests__/Grid-test.js b/packages/react/src/components/Grid/__tests__/Grid-test.js index af076a31a09f..f06b2f6a1652 100644 --- a/packages/react/src/components/Grid/__tests__/Grid-test.js +++ b/packages/react/src/components/Grid/__tests__/Grid-test.js @@ -7,9 +7,71 @@ import { render } from '@testing-library/react'; import React from 'react'; -import { Grid } from '../'; +import { Grid, FlexGrid } from '../'; + +describe('FlexGrid', () => { + it('should support a custom element as the root node', () => { + const { container } = render(); + expect(container.firstChild.tagName).toBe('SECTION'); + }); + + it('should include a custom className', () => { + const { container } = render(); + expect(container.firstChild).toHaveClass('test'); + }); + + it('should pass un-used props to the top-level node that is rendered', () => { + const { container } = render(); + expect(container.firstChild).toHaveAttribute('id', 'test'); + }); + + it('should render `children` that are given', () => { + const { container } = render( + + Test + + ); + // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access + const testNode = container.querySelector('#test'); + expect(testNode).toBeInstanceOf(HTMLElement); + }); + + it('should support setting the condensed class through the `condensed` prop', () => { + const { container } = render(); + expect(container.firstChild.className).toEqual( + expect.stringContaining('grid--condensed') + ); + }); + + it('should support setting the full-width class through the `fullWidth` prop', () => { + const { container } = render(); + expect(container.firstChild.className).toEqual( + expect.stringContaining('grid--full-width') + ); + }); +}); describe('Grid', () => { + let Grid; + let cleanup; + let render; + let screen; + + beforeEach(() => { + jest.resetModules(); + const FeatureFlags = require('@carbon/feature-flags'); + FeatureFlags.enable('enable-css-grid'); + + cleanup = require('@testing-library/react/pure').cleanup; + render = require('@testing-library/react/pure').render; + screen = require('@testing-library/react/pure').screen; + Grid = require('../Grid').Grid; + }); + + afterEach(() => { + cleanup(); + }); + it('should support a custom element as the root node', () => { const { container } = render(); expect(container.firstChild.tagName).toBe('SECTION'); @@ -49,4 +111,18 @@ describe('Grid', () => { expect.stringContaining('grid--full-width') ); }); + + it('should support setting the align class through the `align` prop as start', () => { + const { container } = render(); + expect(container.firstChild.className).toEqual( + expect.stringContaining('grid--start') + ); + }); + + it('should support setting the align class through the `align` prop as end', () => { + const { container } = render(); + expect(container.firstChild.className).toEqual( + expect.stringContaining('grid--end') + ); + }); });