Provide Modal Patterns matching Lexicon Definition

• Type: Epic
• Status: Closed
• Priority: Critical
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: None
• Component/s: Alloy UI
• Labels:
  • 7.3-ce-ga4
  • echo-board-out
  • fc_20_03
  • fc_20_06
  • fi-s03e20
  • fi-s03e21
  • fi-s03e22
  • fi-s03e23
  • fi-s03e24
  • fi-s03e25
  • fi-s03e26
  • fi-s03e27
  • fi-s03e28
  • test_scenario_ready
• Epic/Theme:
  • FI_Technical_Debt
• Epic Status: To Do

Lexicon defines a set of best practices and guidelines to work with Modals. Based on those recommendations, Clay offers a rich set of Modal components that can be used to implement such Patterns.

The goal of this epic is to provide the current Modal Patterns in DXP to match Lexicon's recommendations as much as possible.

 

Acceptance Criteria:

 

1. Modal follows Lexicon Patterns

Given DXP

When a modal is opened in some part of the product

Then the following is true:

• The modal window is not full-size
• When a modal has a footer, the actions are inside and aligned to the left. Actions show in this order: Primary button (only one), secondary button, and button link

 

2. Modal API is backwards compatible

Given an old code using any of the existing Modal APIs

When used in DXP

Then the API produces compatible results in the UI (a modal) and backwards compatible responses in the code

 

3. Modal API uses Clay Components

Given DXP

When a modal is opened using the standard APIs (Liferay.Util.openWindow)

Then the API will use Clay Modal Components