App update modal background colors #14501
Conversation
mjhuff
requested review from
TamarZanzouri
and removed request for
a team and
TamarZanzouri
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## chore_release-7.2.0 #14501 +/- ##
=======================================================
+ Coverage 67.74% 67.80% +0.06%
=======================================================
Files 2517 2517
Lines 72068 72087 +19
Branches 9278 9292 +14
=======================================================
+ Hits 48823 48880 +57
+ Misses 21027 21005 -22
+ Partials 2218 2202 -16
Flags with carried forward coverage won't be shown. Click here to find out more.
|
| @@ -86,7 +86,7 @@ const Overlay = styled.div` | |||
| cursor: default; | |||
|
|
|||
| @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { | |||
| background-color: ${COLORS.grey50}; | |||
| background-color: ${COLORS.black90}${COLORS.opacity60HexCode}; | |||
There was a problem hiding this comment.
from the Figma
| background-color: ${COLORS.black90}${COLORS.opacity60HexCode}; | |
| background-color: ${COLORS.black90}${COLORS.opacity40HexCode}; |
There was a problem hiding this comment.
I believe that refers to the desktop opacity. The figma for the ODD says the opacity is 60? (This code is under the @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs}
There was a problem hiding this comment.
The name isn't clear but LegacyModal is for Desktop and Modal is for ODD.
So I guess we don't need to use RESPONSIVENESS.touchscreenMediaQuerySpecs in LegacyModal.
Is there any components for ODD that uses LegacyModal?
If no, probably we don't need to use RESPONSIVENESS.touchscreenMediaQuerySpecs in each modal component.
There was a problem hiding this comment.
Thanks for clarifying, that makes sense 👍
There was a problem hiding this comment.
@koji I've added docstrings to clarify the different use-cases, since it's a bit confusing 📝
| @@ -19,6 +19,9 @@ export interface LegacyModalProps extends StyleProps { | |||
| footer?: React.ReactNode | |||
| } | |||
|
|
|||
| /** | |||
| * For Desktop app use only. | |||
| @@ -24,6 +24,9 @@ interface ModalProps extends StyleProps { | |||
| /** see ModalHeader component for more details */ | |||
| header?: ModalHeaderBaseProps | |||
| } | |||
| /** | |||
| * For ODD use only. | |||
Closes RAUT-928 and RQA-2282
Overview
See Figma.
Update modal background colors to designs.
Before
After
Test Plan
Changelog
Risk assessment
low