Description
openedon Apr 1, 2024
Feature Description
Site Kit shows a number of notices in different places. We mostly display minimal notices in the settings screens, using the SettingsNotice component, however, we've also used this component in the past within the Site Kit dashboard, e.g. in UACutOffWarning (which no longer exists now).
As Site Kit has grown, a lot of design differences have emerged in the usage of notices in settings screens. This has, in many instances, required us to add additional custom CSS to match the difference in the design.
To dive deep and see examples, open this accordion
-
This is what the
SettingsNoticecomponent generally looks like:
-
This is a general usage of the component in the Analytics settings edit:
-
This is another usage of the component:
Notice how this has the icon vertically aligned to the centre. -
This is another usage of the component:
Notice how the icon is vertically aligned to the centre, and the background colour and font size are different. -
This is another usage of the component:
Notice how this one has different dimensions, a different layout, and looks quite different than the original component.
The last three examples located above (3, 4, and 5) all use the same SettingsNotice component, but uses custom CSS to look different in different places to meet the design requirements.
-
Besides the above, we have introduced another minimal notice design. See:
-
Here is another of its usage:
While the above two notices look similar, they don't re-use a component. They're just built from scratch in two different places.
- Last but not the least, here is another notice:
This was supposed to use the same design as shown in 6 above, but it was built usingSettingsNotice(as that is the only re-usable component available as of now for notices, specially in settings screens) with custom CSS.
In order to ensure consistency of notice designs across Site Kit and reduce the growing technical debt of maintaining multiple custom CSS classes for different notices, ideally, we should unify them and decide on a single fundamental design (dimensions, typography, alignments, etc.) for these notices. Once that's decided, we should build a one-component-fits-all notice component with extendable and customizable background colours, CTAs, links, etc.
We should then replace all existing notices in Site Kit with our new unified notice component.
Important: According to this internal conversation, the icons used in these notices should be re-exported from Figma so that they include the frame around the graphic. The reason is that the icons are not always round or square and have different shapes. That way, all icons will have a uniform width & height, with inner margins to account for various shapes.
Do not alter or remove anything below. The following sections will be managed by moderators only.