[Notice] Responsive layout

[geospatialem]

Description

Mobile responsiveness across Calcite Design System, focused on web (traditionally desktop sized web browser), tablet, phone screen sizes, and large monitors.

Acceptance Criteria

• 1. Consider breaking changes for folks. Consultation should occur on both the design and development teams.
• 2. Components need to be designed for the following breakpoints:
  • Small (s), 476px
  • Medium (m), 768px
  • Large (l), 1152px
  • Extra larger (xl), 1440px

Relevant Info

Part of epic #6670

Which Component

notice

Example Use Case

No response

Priority impact

p4 - not time sensitive

Esri team

Calcite (design)

[SkyeSeitz]

Thanks, @geospatialem !

[SkyeSeitz]

@manuelalcosta presented iterations for Notice on smaller screen sizes and mobile devices. Below is the solution we landed on, where the icon moves above the Notice text and the actions-end moves to the bottom, right aligned. 

[SkyeSeitz]

Since Notice and Alert will share a very similar responsive layout solution, the Notice design proposal is on hold until Alert is finalized.

[SkyeSeitz]

Final specs available here

[github-actions]

cc @geospatialem, @brittneytewks

[jcfranco]

@SkyeSeitz @ashetland Per our conversation, responsive notice will be put on hold since it would be too disruptive in the current layouts its used in. LMK if I missed something or need to make corrections.

[SkyeSeitz]

Thanks, Franco. Since typical usage of Notice at narrow widths, e.g. within calcite-panel, work better with an inline icon & actions, my gut is to close this issue out and re-open in the future if a need arises.

@geospatialem

[ashetland]

Agreed.

[geospatialem]

Per the above discussion, is there a good summary we can provide folks that encounter narrower widths, but also to support wider ones as well?

Once we have a comprehensive solution for folks, think we can close the above issue out. cc @SkyeSeitz @ashetland @jcfranco

[geospatialem]

Updating notice to change at small widths would be too disruptive as it's a pretty common use case for the component. Calcite team members will revisit if there's an increased demand or ask in the future. Closing as not planned for the time being.