search

carbon-design-system / carbon-design-kit

A versioned, comprehensive kit of the Carbon Design System visual assets (components, icons, pictograms, text styles, color styles, grid templates).
Apache License 2.0
1.07k stars 154 forks source link

Modal: content area is missing the 20% padding on the right. #733

Closed aagonzales closed 8 months ago

aagonzales commented 11 months ago

Acceptance criteria

To-do

As-is:

image

To-be:

Content area should have a padding of 20% on the right. Inputs and other components are allowed to span 100%

image
thyhmdo commented 8 months ago

The issue is fixed with variable update from Juan.

The final item looks like the text doesn't have the right-padding but it's designed to scale appropriately based on breakpoints. Here are the demos:

Set the frame Auto layout as "Align center", then set the frame Layout grid to Carbon grid (Variable)

image

https://github.com/carbon-design-system/carbon-design-kit/assets/77697351/ba33ba77-af3e-4e7d-a03f-3c34acdf94e0

When dragging Modal into certain breakpoints: Drag the Modal to the breakpoint, it'll be positioned centered. (Note that you have to pick the right modal size for the right breakpoint)

image

https://github.com/carbon-design-system/carbon-design-kit/assets/77697351/167fc383-85e3-4c3a-9a26-63c0e1c824cf

When swapping items to the Slot: Create a new component(s) within the file, swap the slot component with the new component, set the the component width to "fill".

https://github.com/carbon-design-system/carbon-design-kit/assets/77697351/f91cbfe7-7b6d-48d2-8887-86ff43dab535

thyhmdo commented 8 months ago

Reviewed with Juan, Eugene, and Anna