feat(grid): add align start and align end prop (#17740)

* feat(grid): add align start and align end prop

* chore: revert changes

---------

Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com>

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
   // -----------------------------------------------------------------------------

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 [

packages/react/src/components/Grid/CSSGrid.tsx

@@ -14,6 +14,7 @@ import { GridSettings, useGridSettings } from './GridContext';
 import { GridComponent, GridProps } from './GridTypes';
 
 function CSSGrid<T extends React.ElementType>({
+  align,
   as: BaseComponent = 'div' as T,
   children,
   className: customClassName,
@@ -50,6 +51,8 @@ function CSSGrid<T extends React.ElementType>({
     [`${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<T extends React.ElementType>({
 }
 
 CSSGrid.propTypes = {
+  /**
+   * Specify grid aligment. Default is center
+   */
+  align: PropTypes.oneOf(['start', 'center', 'end']),
+
   /**
    * Provide a custom element to render instead of the default <div>
    */

packages/react/src/components/Grid/Grid.tsx

@@ -21,6 +21,11 @@ function Grid<T extends React.ElementType>(props: GridProps<T>) {
 }
 
 Grid.propTypes = {
+  /**
+   * Specify grid aligment. Default is center
+   */
+  align: PropTypes.oneOf(['start', 'center', 'end']),
+
   /**
    * Provide a custom element to render instead of the default <div>
    */

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(<FlexGrid as="section" />);
+    expect(container.firstChild.tagName).toBe('SECTION');
+  });
+
+  it('should include a custom className', () => {
+    const { container } = render(<FlexGrid className="test" />);
+    expect(container.firstChild).toHaveClass('test');
+  });
+
+  it('should pass un-used props to the top-level node that is rendered', () => {
+    const { container } = render(<FlexGrid id="test" />);
+    expect(container.firstChild).toHaveAttribute('id', 'test');
+  });
+
+  it('should render `children` that are given', () => {
+    const { container } = render(
+      <FlexGrid>
+        <span id="test">Test</span>
+      </FlexGrid>
+    );
+    // 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(<FlexGrid condensed />);
+    expect(container.firstChild.className).toEqual(
+      expect.stringContaining('grid--condensed')
+    );
+  });
+
+  it('should support setting the full-width class through the `fullWidth` prop', () => {
+    const { container } = render(<FlexGrid fullWidth />);
+    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(<Grid as="section" />);
     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(<Grid align="start" />);
+    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(<Grid align="end" />);
+    expect(container.firstChild.className).toEqual(
+      expect.stringContaining('grid--end')
+    );
+  });
 });