Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
295 stars 76 forks source link

"Minimal" variant to current Notice component #10477

Open rmstinson opened 2 months ago

rmstinson commented 2 months ago

Check existing issues

Description

Add a “minimal” boolean because the current Notice can be intrusive in dense interfaces.

(Similar issue: #9806)

Acceptance Criteria

Main changes for a "minimal" variant includes removing the shadow style, the left-hand (start) highlight, and adding a link in-line with the main message, and rounding corners.

A "minimal" variant notice would not need a Title prop, as its main purpose is to communicate a contextual message referring to its pertinent interface.

Screenshot 2024-10-02 at 3 45 22 PM

Relevant Info

No response

Which Component

Notice

Example Use Case

Current use cases in which custom styling is being used to create roughly the same component in ArcGIS Online + MapViewer:

Screenshot 2024-10-02 at 3 56 09 PM

Priority impact

impact - p2 - want for an upcoming milestone

Calcite package

Esri team

ArcGIS Online

ashishgodbole commented 2 months ago

Web Editor would find this useful. Screenshots already provided.

Wondering if Color (the background fill) could be a property that can be set? Maybe option for info/warning/error styles. I think a couple of other screenshots show this with the faded color background fill

asangma commented 2 months ago

We could really use this in many places in Map Viewer. The in-progress redesign of ArcGIS Online's Data Tab has a number of dense UIs that could use this.

A tighter and more minimal Notice would also better fit the compact form factors of JS SDK widgets. NGL, we have made our own minimal versions of the Notice to fit the UI.

And more broadly, the ability to have a minimal Notice for system messages and the regular Notice for onboarding messaging would be handy. There are cases when we may need to show both types of messaging in the same interface.