Skip to content

feat(Grid): add Grid component #1606

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 22 commits into
base: main
Choose a base branch
from
Open

feat(Grid): add Grid component #1606

wants to merge 22 commits into from

Conversation

JoannaSikora
Copy link
Contributor

@JoannaSikora JoannaSikora commented Feb 26, 2025

Resolves: #1587

Description

Grid Component Updates:

  • Implemented the Grid component that is a 16-column grid with a doubling behavior (scalable responsiveness).

Additional Updates:

  • Updated the GitHub Actions cache version from v2 to v4
  • Renamed the Column type to TableColumn in Table.spec.tsx (it clashed with Grid column)

Storybook

https://feature-1587--613a8e945a5665003a05113b.chromatic.com

Checklist

Obligatory:

  • Self review (use this as your final check for proposed changes before requesting the review)
  • Add correct label
  • Assign pull request with the correct issue

Summary by CodeRabbit

  • New Features
    • Introduced a responsive grid layout component featuring flexible column and alignment options, along with a visual grid overlay for design exploration.
    • Added a new ToggleSwitch component for toggling grid visibility.
    • Added new styles for responsive grid components and utility functions for handling breakpoints.
    • Introduced new GridVisualizer component for enhanced visual representation of grid layouts.
    • Added new CSS classes to enhance visibility control for arrow elements based on screen size.
  • Documentation
    • Expanded documentation for the Grid component, detailing new breakpoint properties and responsive behaviors.
  • Refactor
    • Standardized table component column definitions for improved consistency, renaming types for clarity.
  • Chores
    • Enhanced development infrastructure with updated caching processes for streamlined builds.

Copy link
Contributor

coderabbitai bot commented Feb 26, 2025

Walkthrough

This pull request updates GitHub workflow files by bumping the actions/cache version from v2 to v4. It introduces a comprehensive Grid system, including new documentation, SCSS styles, several React components (Grid, Column, GridVisualizer, ToggleSwitch), and Storybook stories. Additionally, it standardizes Table component types by renaming Column to TableColumn in tests, stories, and component files, and adds a new export for Grid in the package index.

Changes

File(s) Change Summary
.github/workflows/chromatic.yml, .github/workflows/release.yml, .github/workflows/tests.yml Updated actions/cache version from v2 to v4.
packages/react-components/src/components/Grid/... Added Grid documentation, SCSS styles, React components (Grid, Column, GridVisualizer, ToggleSwitch), and new Storybook stories.
packages/react-components/src/components/Table/... Renamed and updated type declarations from Column to TableColumn across tests, stories, and component files.
packages/react-components/src/index.ts Added export for Grid components.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ToggleSwitch as Toggle
    participant GridVisualizer as GridViz
    participant Window

    User->>Toggle: Click to toggle grid overlay
    Toggle->>GridViz: onChange(showGrid)
    GridViz->>GridViz: Compute column count (via getColumnCount)
    Note right of GridViz: Render grid overlay with grid info
    Window->>GridViz: Emit resize event
    GridViz->>GridViz: Update grid configuration
Loading

Suggested labels

documentation

Suggested reviewers

  • vladko-uxds
  • marcinsawicki

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@JoannaSikora JoannaSikora marked this pull request as ready for review March 7, 2025 08:28
@JoannaSikora JoannaSikora added the feature New feature or request label Mar 7, 2025
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (7)
packages/react-components/src/components/Grid/components/GridVisualizer/ToggleSwitch.tsx (1)

20-25: Consider documenting ignored parameter

The onChange handler uses (_, value) but it's not immediately clear what the first parameter represents.

-        onChange={(_, value) => onChange(value)}
+        // First parameter is the event, which we don't need
+        onChange={(_, value) => onChange(value)}
packages/react-components/src/components/Grid/components/column/Column.module.scss (1)

37-43: Consider simplifying the nested math functions.

The nested math functions make this line harder to read. Consider breaking it down into steps for better readability.

-  .columnSm#{$i} {
-    @include grid.column-styles(
-      math.percentage(math.div($i, map.get(grid.$grid-columns, 'sm')))
-    );
-  }
+  .columnSm#{$i} {
+    $columns: map.get(grid.$grid-columns, 'sm');
+    $width-fraction: math.div($i, $columns);
+    $percentage-width: math.percentage($width-fraction);
+    @include grid.column-styles($percentage-width);
+  }
packages/react-components/src/components/Grid/components/GridVisualizer/GridVisualizer.module.scss (1)

35-44: Use design system variables for colors.

Consider using CSS variables for the background color to maintain consistency with the design system.

-  background: rgb(0 0 0 / 80%);
+  background: var(--overlay-background-color, rgb(0 0 0 / 80%));

Also, the z-index value of 1000 is quite high - consider documenting why this specific value is needed.

packages/react-components/src/components/Grid/Grid.tsx (1)

34-55: Consider adding memoization.

Add React.memo to prevent unnecessary re-renders of this component.

-export const Grid: React.FC<GridProps> = ({
+export const Grid = React.memo<GridProps>(({
   className,
   children,
   align,
   justify,
   ...rest
-}) => {
+}) => {
   const gridClasses = cx(
     styles.grid,
     {
       [styles[`align-${align}`]]: align,
       [styles[`justify-${justify}`]]: justify,
     },
     className
   );

   return (
     <div className={gridClasses} {...rest}>
       {children}
     </div>
   );
-};
+});
+
+Grid.displayName = 'Grid';
packages/react-components/src/components/Grid/components/GridVisualizer/GridVisualizer.tsx (1)

10-16: Consider extracting breakpoint values to constants or config

The breakpoint values (672, 1024) are hardcoded in the getColumnCount function. For better maintainability, consider extracting these to named constants or importing from a central configuration file.

+const BREAKPOINTS = {
+  SM: 672,
+  MD: 1024
+};

const getColumnCount = (
  width: number
): { count: number; breakpoint: string } => {
-  if (width < 672) return { count: 4, breakpoint: 'sm' };
-  if (width < 1024) return { count: 8, breakpoint: 'md' };
+  if (width < BREAKPOINTS.SM) return { count: 4, breakpoint: 'sm' };
+  if (width < BREAKPOINTS.MD) return { count: 8, breakpoint: 'md' };
  return { count: 16, breakpoint: 'lg' };
};
packages/react-components/src/components/Grid/components/column/Column.tsx (1)

79-83: Type assertion could be improved

The type assertion for CSS custom properties could be more specific. Consider creating a custom type that extends React.CSSProperties with your custom properties.

+interface ColumnCSSProperties extends React.CSSProperties {
+  '--column-width'?: string;
+  '--column-min-width'?: string;
+  '--column-max-width'?: string;
+}

// Create CSS custom properties for dynamic values
const style = {
  ...(width && { '--column-width': width }),
  ...(minWidth && { '--column-min-width': minWidth }),
  ...(maxWidth && { '--column-max-width': maxWidth }),
-} as React.CSSProperties;
+} as ColumnCSSProperties;
packages/react-components/src/components/Grid/Grid.mdx (1)

201-202: Fix extra space before section header

Remove the extra space before the "#### Width Properties" heading for consistent formatting.

These properties accept any valid CSS width value (px, %, rem, etc.).

-#### Usage Guidelines
+#### Usage Guidelines
🧰 Tools
🪛 LanguageTool

[uncategorized] ~202-~202: Loose punctuation mark.
Context: ...aints. #### Width Properties - width: Sets a fixed width for the column (CSS ...

(UNLIKELY_OPENING_PUNCTUATION)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0e1fed0 and 56872be.

📒 Files selected for processing (26)
  • .github/workflows/chromatic.yml (1 hunks)
  • .github/workflows/release.yml (1 hunks)
  • .github/workflows/tests.yml (1 hunks)
  • packages/react-components/src/components/Grid/Grid.mdx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.module.scss (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.tsx (1 hunks)
  • packages/react-components/src/components/Grid/components/GridVisualizer/GridVisualizer.module.scss (1 hunks)
  • packages/react-components/src/components/Grid/components/GridVisualizer/GridVisualizer.tsx (1 hunks)
  • packages/react-components/src/components/Grid/components/GridVisualizer/ToggleSwitch.module.scss (1 hunks)
  • packages/react-components/src/components/Grid/components/GridVisualizer/ToggleSwitch.tsx (1 hunks)
  • packages/react-components/src/components/Grid/components/column/Column.module.scss (1 hunks)
  • packages/react-components/src/components/Grid/components/column/Column.tsx (1 hunks)
  • packages/react-components/src/components/Grid/index.ts (1 hunks)
  • packages/react-components/src/components/Table/Table.spec.tsx (2 hunks)
  • packages/react-components/src/components/Table/Table.stories.tsx (2 hunks)
  • packages/react-components/src/components/Table/TableBody.spec.tsx (2 hunks)
  • packages/react-components/src/components/Table/TableBody.tsx (1 hunks)
  • packages/react-components/src/components/Table/TableHeader.spec.tsx (3 hunks)
  • packages/react-components/src/components/Table/TableHeader.tsx (2 hunks)
  • packages/react-components/src/components/Table/TableRow.spec.tsx (2 hunks)
  • packages/react-components/src/components/Table/TableRow.tsx (1 hunks)
  • packages/react-components/src/components/Table/index.ts (1 hunks)
  • packages/react-components/src/components/Table/stories-constants.tsx (1 hunks)
  • packages/react-components/src/components/Table/types.ts (2 hunks)
  • packages/react-components/src/index.ts (1 hunks)
🧰 Additional context used
🪛 LanguageTool
packages/react-components/src/components/Grid/Grid.mdx

[uncategorized] ~202-~202: Loose punctuation mark.
Context: ...aints. #### Width Properties - width: Sets a fixed width for the column (CSS ...

(UNLIKELY_OPENING_PUNCTUATION)

🔇 Additional comments (42)
.github/workflows/chromatic.yml (1)

21-29: Cache action upgrade approved.
The update to actions/cache@v4 is concise and consistent.

.github/workflows/release.yml (1)

18-31: Consistent cache version use.
Upgrading to actions/cache@v4 here aligns with our workflow best practices.

.github/workflows/tests.yml (1)

9-22: Valid cache update.
Switching to actions/cache@v4 ensures consistency across workflows.

packages/react-components/src/components/Table/index.ts (1)

2-2: Clean type renaming

The rename from Column to TableColumn improves type clarity and prevents conflicts with the new Grid component.

packages/react-components/src/components/Table/TableRow.spec.tsx (2)

4-4: Consistent type import update

Type renaming properly reflected in the import statement.


13-13: Correctly updated type annotation

Type annotation correctly updated to use TableColumn<Data>[].

packages/react-components/src/components/Table/TableBody.tsx (2)

2-2: Consistent import renaming

Import statement properly updated to use the renamed type.


6-6: Type definition properly updated

Interface property type correctly updated to use TableColumn<T>[].

packages/react-components/src/components/Table/TableRow.tsx (2)

8-8: Consistent import update

Import correctly changed to use the renamed TableColumn type.


16-16: Interface property type properly updated

Type definition in TableRowProps correctly updated to TableColumn<T>[].

packages/react-components/src/components/Table/TableBody.spec.tsx (2)

4-4: Type import updated correctly

The import statement has been updated to use TableColumn instead of Column, aligning with the type renaming.


13-13: Type annotation updated correctly

The variable type has been changed from Column<Data>[] to TableColumn<Data>[] to match the renamed type.

packages/react-components/src/components/Table/TableHeader.spec.tsx (3)

6-6: Type import updated correctly

Import statement now properly uses TableColumn instead of Column, consistent with type renaming.


15-15: Type annotation updated correctly

The columns variable correctly uses TableColumn<Data>[] instead of the previous type.


81-81: Type annotation updated correctly

Local columns variable within the test case now properly uses TableColumn<Data>[].

packages/react-components/src/components/Table/types.ts (2)

9-9: Type renamed correctly

The type has been renamed from Column<T> to TableColumn<T> to avoid naming conflicts with the new Grid component.


35-35: Property type updated correctly

The columns property in BaseTableProps<T> now uses the renamed TableColumn<T> type.

packages/react-components/src/components/Table/Table.stories.tsx (2)

19-19: Type import updated correctly

Import statement now uses TableColumn instead of Column, consistent with type renaming elsewhere.


37-37: Type annotation updated correctly

The columns variable properly uses TableColumn<Data>[] instead of the previous type.

packages/react-components/src/components/Table/TableHeader.tsx (1)

15-15: Appropriate type renaming for Column to TableColumn

Clean type renaming to prevent conflicts with the new Grid component implementation.

Also applies to: 26-26

packages/react-components/src/components/Table/Table.spec.tsx (1)

4-4: Consistent type renaming in test file

Types updated correctly to match the component implementation changes.

Also applies to: 13-13

packages/react-components/src/components/Table/stories-constants.tsx (1)

3-3: Proper type renaming in story constants

Consistent type update maintains pattern across the codebase.

Also applies to: 5-5

packages/react-components/src/components/Grid/components/GridVisualizer/ToggleSwitch.module.scss (1)

1-6: Clean styling with proper design system variables

The styling follows best practices by using design system spacing variables and flexbox for alignment.

packages/react-components/src/index.ts (1)

32-32: Proper export of the new Grid component

The export follows the established pattern of other component exports in the file.

packages/react-components/src/components/Grid/index.ts (1)

1-2: Well-structured barrel file

This follows the standard pattern for re-exporting components, making imports cleaner for consumers.

packages/react-components/src/components/Grid/components/GridVisualizer/ToggleSwitch.tsx (2)

7-11: Well-typed props interface

The props interface provides good type safety with clear property definitions.


13-29: Component follows React best practices

Good implementation with proper prop handling and accessibility support via ariaLabel.

packages/react-components/src/components/Grid/components/column/Column.module.scss (2)

5-14: Well-structured utility functions.

Great implementation of the capitalize function and breakpoint mixin - these provide good reusable utilities for the grid system.


16-35: Effective use of CSS custom properties.

The column classes with CSS custom properties provide excellent flexibility for controlling widths.

packages/react-components/src/components/Grid/components/GridVisualizer/GridVisualizer.module.scss (1)

6-11: Effective overlay implementation.

Good use of inset: 0 and pointer-events: none for creating a non-interactive overlay.

packages/react-components/src/components/Grid/Grid.tsx (1)

7-13: Well-defined type aliases.

Clear and descriptive type definitions for alignment and justification options.

packages/react-components/src/components/Grid/components/GridVisualizer/GridVisualizer.tsx (2)

31-40: LGTM: Proper event cleanup in useEffect

The component correctly sets up and cleans up the resize event listener.


18-21: Good documentation

Clear JSDoc comment explaining component purpose and usage context.

packages/react-components/src/components/Grid/components/column/Column.tsx (2)

7-10: LGTM: Clean interface definition

Good definition of base props with proper typing.


12-22: Excellent type safety implementation

The mutually exclusive props pattern using discriminated union types prevents invalid combinations of props, ensuring type safety at development time.

Also applies to: 24-34, 36-46

packages/react-components/src/components/Grid/Grid.mdx (4)

50-61: LGTM: Clear documentation of breakpoints

The breakpoint documentation is clear and well-structured, making it easy for developers to understand the responsive behavior.


65-75: LGTM: Good explanation of column system

Clear documentation of the doubling columns system that helps users understand how the grid adapts at different breakpoints.


93-122: Excellent documentation of responsive behavior

The explanation of column behaviors across breakpoints is thorough and includes practical examples that will help developers implement responsive layouts effectively.


169-205: LGTM: Comprehensive sizing methods documentation

Well-documented column sizing options with clear examples for each method.

🧰 Tools
🪛 LanguageTool

[uncategorized] ~202-~202: Loose punctuation mark.
Context: ...aints. #### Width Properties - width: Sets a fixed width for the column (CSS ...

(UNLIKELY_OPENING_PUNCTUATION)

packages/react-components/src/components/Grid/Grid.stories.tsx (3)

22-42: LGTM: Well-designed Box helper component

The Box component provides consistent styling for examples while remaining simple and focused.


44-57: LGTM: Excellent visualization toggle implementation

The GridWithVisualizer component with toggle functionality enhances developer experience by allowing dynamic grid visualization.


59-81: Comprehensive story examples

The stories cover a wide range of use cases and configurations, providing excellent documentation of component capabilities.

Also applies to: 83-111, 113-146, 148-170, 172-204, 206-222, 224-292, 294-345, 347-380, 382-430

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
packages/react-components/src/components/Grid/_grid-utils.scss (1)

3-6: Utility Function: Capitalize
The function cleanly uppercases the first character and concatenates it with the remainder. Consider handling empty strings to avoid potential errors.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)

📥 Commits

Reviewing files that changed from the base of the PR and between 56872be and 68ab209.

📒 Files selected for processing (3)
  • packages/react-components/src/components/Grid/Grid.module.scss (1 hunks)
  • packages/react-components/src/components/Grid/_grid-utils.scss (1 hunks)
  • packages/react-components/src/components/Grid/components/column/Column.module.scss (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/react-components/src/components/Grid/Grid.module.scss
  • packages/react-components/src/components/Grid/components/column/Column.module.scss
⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: chromatic-deployment
  • GitHub Check: build
🔇 Additional comments (2)
packages/react-components/src/components/Grid/_grid-utils.scss (2)

1-2: Import Statement: Correct SCSS Module Usage
The @use 'sass:string'; import is properly implemented to leverage Sass's string functions.


8-13: Mixin: Breakpoint
The mixin uses interpolation in the media query correctly and includes a stylelint disable comment to bypass false positives.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 6

🧹 Nitpick comments (3)
packages/react-components/src/components/Grid/components/column/Column.tsx (1)

7-7: Consider adding documentation to the ColumnSpan type

Adding a JSDoc comment would improve type clarity and help developers understand valid values for column spans.

+/**
+ * Represents a column span value - either boolean for auto-width or number for specific column count
+ */
 type ColumnSpan = boolean | number;
packages/react-components/src/components/Grid/Grid.stories.tsx (2)

3-6: Component imports should be organized and grouped

Group related imports together and separate third-party from internal imports for better readability.

import * as React from 'react';

+// Design system components
import { Badge } from '../Badge';
import { Card } from '../Card';
import { Heading, Text } from '../Typography';
+
+// Grid components
import { GridVisualizer } from './components/GridVisualizer/GridVisualizer';
import { ToggleSwitch } from './components/GridVisualizer/ToggleSwitch';

533-544: Consider adding data-testid attributes for better testability

Adding data-testid attributes to Cards with metrics would make them easier to test.

<Card title="Chats agents efficiency" className={styles.card}>
  <div className={styles.cardContent}>
-   <Heading>80%</Heading>
+   <Heading data-testid="chats-efficiency-value">80%</Heading>
    <Badge>80</Badge>
  </div>
  <Text>vs 2790 for prev. period</Text>
</Card>
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)

📥 Commits

Reviewing files that changed from the base of the PR and between 68ab209 and 07e18eb.

📒 Files selected for processing (26)
  • packages/react-components/src/components/Grid/Grid.mdx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
  • packages/react-components/src/components/Grid/components/column/Column.tsx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
  • packages/react-components/src/components/Grid/components/column/Column.tsx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.mdx (3 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (7 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (2 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (2 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (3 hunks)
  • packages/react-components/src/components/Grid/Grid.mdx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
  • packages/react-components/src/components/Grid/components/column/Column.tsx (2 hunks)
  • packages/react-components/src/components/Grid/components/column/Column.tsx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.mdx (7 hunks)
  • packages/react-components/src/components/Grid/Grid.mdx (2 hunks)
  • packages/react-components/src/components/Grid/components/column/Column.tsx (0 hunks)
  • packages/react-components/src/components/Grid/Grid.mdx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (2 hunks)
  • packages/react-components/src/components/Grid/GridStylesStories.module.scss (1 hunks)
  • packages/react-components/src/components/Grid/components/column/Column.tsx (2 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
✅ Files skipped from review due to trivial changes (2)
  • packages/react-components/src/components/Grid/components/column/Column.tsx
  • packages/react-components/src/components/Grid/GridStylesStories.module.scss
🚧 Files skipped from review as they are similar to previous changes (11)
  • packages/react-components/src/components/Grid/components/column/Column.tsx
  • packages/react-components/src/components/Grid/Grid.stories.tsx
  • packages/react-components/src/components/Grid/Grid.stories.tsx
  • packages/react-components/src/components/Grid/components/column/Column.tsx
  • packages/react-components/src/components/Grid/Grid.mdx
  • packages/react-components/src/components/Grid/Grid.mdx
  • packages/react-components/src/components/Grid/Grid.stories.tsx
  • packages/react-components/src/components/Grid/Grid.stories.tsx
  • packages/react-components/src/components/Grid/Grid.mdx
  • packages/react-components/src/components/Grid/Grid.mdx
  • packages/react-components/src/components/Grid/Grid.mdx
⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: chromatic-deployment
🔇 Additional comments (2)
packages/react-components/src/components/Grid/components/column/Column.tsx (1)

55-59:

✅ Verification successful

Missing width property implementation

The code is incomplete compared to lines 61-95 that aren't annotated but appear in the file. The unannotated code includes support for direct width control through width, minWidth, and maxWidth properties that should be part of the component implementation.


🏁 Script executed:

#!/bin/bash
# Check if these properties are referenced in other files
rg -A 2 "width.*minWidth.*maxWidth" --type=tsx

Length of output: 76


Review Verification: Confirm Width Control Implementation
The props destructuring in lines 55–59 lists width (among others), yet the concrete handling for direct width control (including minWidth and maxWidth) seems to be buried in the unannotated portion (lines 61–95). Automated searches were inconclusive due to file type issues, so please manually verify that the implementation in lines 61–95 correctly applies the width controls. If confirmed, add or update inline documentation to clarify the relationship between the destructured props and their usage.


🏁 Script executed:

#!/bin/bash
echo "=== Searching for minWidth in Column.tsx ==="
rg -n "minWidth" packages/react-components/src/components/Grid/components/column/Column.tsx

echo "=== Searching for maxWidth in Column.tsx ==="
rg -n "maxWidth" packages/react-components/src/components/Grid/components/column/Column.tsx

echo "=== Searching for width (as a whole word) in Column.tsx ==="
rg -n "\bwidth\b" packages/react-components/src/components/Grid/components/column/Column.tsx

Length of output: 1610


Width Property Implementation Verified

The width, minWidth, and maxWidth properties are correctly destructured and applied in the component. The unannotated portion (lines 61–95) implements direct width control as intended using style mappings, so no further changes are needed.

packages/react-components/src/components/Grid/Grid.stories.tsx (1)

548-613: Approve code changes: Well-structured Grid examples

The examples are well-structured and nicely demonstrate different use cases of the Grid component. The nested Grid structures clearly illustrate the power of the component for creating complex layouts.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (6)
packages/react-components/src/components/Grid/Grid.stories.tsx (4)

6-6: Use consistent imports.

You import { Grid, Column } again at lines 15 and 6. Consider removing the duplicate import to reduce confusion.

- import { Grid, Column } from './index';

81-109: Consider examples for narrower breakpoints.

FixedColumnSizes focuses on half and full widths. Adding an example for very narrow screens (like xs) might help illustrate responsiveness.


150-164: Clarify 'Auto width' usage.

Auto-width columns can cause layout shifts if not carefully orchestrated. Recommend specifying minimal or maximum constraints for better predictability.


174-196: Nested Grids complexity.

Deeply nested grids can become tricky for maintainers. Suggest small notes or docs clarifying the nesting strategy.

packages/react-components/src/components/Grid/GridStylesStories.module.scss (2)

6-10: Use consistent naming for content wrappers.

The class .cardContent might conflict with similar naming in other modules or frameworks. A more specific name like .gridCardContent can reduce collisions.


12-16: Consider reusing .card styles.

.cardHeight duplicates margin and background-color from .card. You might unify them or extend .card to avoid duplication.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)

📥 Commits

Reviewing files that changed from the base of the PR and between 8ad023f and d952232.

📒 Files selected for processing (18)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (7 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (2 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (2 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (3 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (2 hunks)
  • packages/react-components/src/components/Grid/GridStylesStories.module.scss (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (1 hunks)
  • packages/react-components/src/components/Grid/GridStylesStories.module.scss (1 hunks)
  • packages/react-components/src/components/Grid/Grid.stories.tsx (2 hunks)
  • packages/react-components/src/components/Grid/GridStylesStories.module.scss (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (6)
  • packages/react-components/src/components/Grid/GridStylesStories.module.scss
  • packages/react-components/src/components/Grid/Grid.stories.tsx
  • packages/react-components/src/components/Grid/GridStylesStories.module.scss
  • packages/react-components/src/components/Grid/Grid.stories.tsx
  • packages/react-components/src/components/Grid/Grid.stories.tsx
  • packages/react-components/src/components/Grid/Grid.stories.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: chromatic-deployment
🔇 Additional comments (12)
packages/react-components/src/components/Grid/Grid.stories.tsx (5)

55-79: Ensure columns match design intent.

These columns are statically sized across multiple breakpoints. Verify with designers that sm=4, md=4, etc., is desired for both small & medium screens.


115-140: Breakpoints might need testing.

Here, both columns carry identical breakpoints. Consider a test or story verifying that each column resizes properly from small to large breakpoints.


208-216: Confirm alignment with design specs.

Using a fixed left and right column might not always scale well. Ensure designers approve for narrower breakpoints.


240-308: Re-check the inheritance approach.

BreakpointInheritance story is quite instructive. Ensure you test actual device breakpoints to confirm the final layout matches expectations.


687-732: Verify arrow layout at breakpoints.

Arrows switch direction in smaller screens. Confirm that gridVerticalGap still lines up the card columns properly after the arrow transitions.

packages/react-components/src/components/Grid/GridStylesStories.module.scss (7)

1-4: Standardize spacing variables.

Reusing spacing tokens is good. Confirm that var(--spacing-4) is the desired spacing at all breakpoints.


18-25: Confirm fallback for older browsers.

Gap property may not work in older browsers. Consider adding margin fallback if legacy support is needed.


27-31: Separate color token checks.

The color tokens are correct, but ensure --border-basic-contrast meets accessibility guidelines for all backgrounds.


33-37: Flexible layout well-implemented.

The .wrapper approach for column direction is a neat usage of spacing tokens.


39-45: Be cautious with accent color usage.

.backgroundCard sets a possibly strong accent color. Validate brand guidelines if this is intended.


47-51: Card min-width.

.cardAutomation sets min-width: 180px; ensure responsive breakpoints won’t be too cramped on smaller devices.


53-55: Max width limitation.

.gridWrapper is pinned at 720px. Evaluate if you need different wrappers for larger screen expansions.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (4)
packages/react-components/src/components/Grid/Grid.mdx (4)

187-188: Nitpick: Anchor Tag Formatting
The standalone closing </a> on line 187 suggests the anchor’s structure could be more consolidated. Consider writing the link inline for clarity.


195-204: Formatting Issue: Direct Width Control Code Block
The fixed-width example for <Column width="200px"> is correctly enclosed, but the subsequent percentage-based example (<Column width="50%">) isn’t wrapped in its own code block. Please enclose it properly to maintain consistency.


242-243: Duplicate Code Snippet: Auto-flexible Column
An extra instance of <Column>Flexible width</Column> appears after the code block. Removing the duplicate will prevent potential confusion.


210-214: Nitpick: Bullet List Punctuation
A loose punctuation mark is detected in the "Width Properties" section. A quick review of the bullet formatting would help ensure consistency.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)

📥 Commits

Reviewing files that changed from the base of the PR and between d952232 and 26158aa.

📒 Files selected for processing (7)
  • packages/react-components/src/components/Grid/Grid.mdx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.mdx (3 hunks)
  • packages/react-components/src/components/Grid/Grid.mdx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.mdx (7 hunks)
  • packages/react-components/src/components/Grid/Grid.mdx (2 hunks)
  • packages/react-components/src/components/Grid/Grid.mdx (1 hunks)
  • packages/react-components/src/components/Grid/Grid.mdx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
  • packages/react-components/src/components/Grid/Grid.mdx
  • packages/react-components/src/components/Grid/Grid.mdx
  • packages/react-components/src/components/Grid/Grid.mdx
  • packages/react-components/src/components/Grid/Grid.mdx
  • packages/react-components/src/components/Grid/Grid.mdx
🧰 Additional context used
🪛 LanguageTool
packages/react-components/src/components/Grid/Grid.mdx

[uncategorized] ~222-~222: Loose punctuation mark.
Context: ...aints. #### Width Properties - width: Sets a fixed width for the column (CSS ...

(UNLIKELY_OPENING_PUNCTUATION)

⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: chromatic-deployment
  • GitHub Check: build
🔇 Additional comments (2)
packages/react-components/src/components/Grid/Grid.mdx (2)

189-194: Clear: Grid-based Sizing Example
The “Column Sizing Methods” header and the grid-based sizing code snippet are clear and informative.


205-210: Good: Flexible with Constraints Example
The “Flexible with Constraints” example is concise and clearly demonstrates the intended usage.

Copy link

@vladko-uxds vladko-uxds left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[LayoutGrid] - New component
3 participants