HomePhabricator
Diffusion Comm dee71a4f63b6

[web] introduce secondary button prop to modal component

Description

[web] introduce secondary button prop to modal component

Summary:
Sometimes we need two buttons in our modals. This diff introduces a secondary button prop which will enfore style rules when there are two buttons in the modal.
The style rules for when there is a primary + secondary button are as follows:

  • If there are two buttons needed for a single modal, the secondary button may live in the button section next to the main button.
  • The secondary button can be outlined to show less visual hierarchy.
  • The buttons will only be as wide as the button’s text content and lie on the right side of the modal.

Here is a screenshot from figma showing how modals with primary + secondary should look visually:

Screenshot 2023-12-08 at 2.27.39 PM.png (1×3 px, 570 KB)

Linear task: https://linear.app/comm/issue/ENG-5943/extendmodify-the-modal-props-api-to-follow-new-modal-designs

Depends on D10242

Test Plan:
Here is an example of using the secondaryButton prop

Screenshot 2023-12-08 at 2.37.23 PM.png (1×3 px, 961 KB)

Reviewers: atul, rohan, kamil

Reviewed By: atul

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D10266

Details

Provenance
ginsuAuthored on Feb 15 2024, 12:07 AM
Reviewer
atul
Differential Revision
D10266: [web] introduce secondary button prop to modal component
Parents
rCOMM87547ad343a8: [web] update password change modal css to use camalcase
Branches
Unknown
Tags
Unknown