Layout and Styling Issues in StackBlitz

[heloiselui]

Package:
@carbon/react

Browser:
Chrome

Package Version:
v1.75.0

Description:

While integrating StackBlitz with @carbon/react components, we encountered several layout and styling issues affecting proper rendering. During a PR review and testing session, we observed that some components are not displaying expected background colors, grid structures, and themes. Updating the affected components and ensuring their styles align with the expected design will help improve their functionality and consistency across different environments.

Tasks:

• FlexGrid

  • Problem: The colored background boxes are not showing, and the text layout is misaligned in the FlexGrid component.
  • Expected Fix: Ensure that the background colors and text align properly in the grid.

• Grid

  • Problem: The grid layout does not display properly, causing components to overlap or misalign.
  • Expected Fix: Fix the grid layout to ensure it works as expected and maintains consistent alignment.

• HideAtBreakpoint

  • Problem: The colored background behind the text is missing, affecting the visual hierarchy.
  • Expected Fix: Implement the background color to enhance the component's appearance.

• Layer

  • Problem: The gray background layer is not visible behind the text, making the text harder to read.
  • Expected Fix: Ensure the gray layer appears behind the text to improve readability.

• Theme

  • Problem: Missing CSS for theme implementation in StackBlitz.
  • Expected Fix: Implement the necessary CSS for proper theme rendering in the preview.

For reference, in the codePreview.tsx file, you can check the rules and adjustments we apply to ensure that Storybook code is transformed correctly into a format that StackBlitz can interpret.