ic-design-system
ic-design-system copied to clipboard
mi6
Updates to Component Images on Guidance Site
Summary
Make adjustments to component images on Figma
đź’¬ Description
@GCHQ-Developer-847 and @GCHQ-Developer-741 identified some issues with the component images when the dark mode images were added to the site. After completion, the updated images will need to be re-exported. The image filename is listed beneath the issue alongside the changes made.
Related Issues
#1311 #1348 #1400
The following points are copied from ticket #1348 comments:
Accordion
- Dark mode equivalent was using incorrect light mode focus state
- [X] Doesn't affect imagery, but codebase will need to change
Back to top
- “Use the icon-only variant when zoomed…” image doesn’t show the page zoomed in (see original light mode image) so it doesn’t really match what the text around it is talking about (Also should the back to top component be further over to the right? Scroll bar also isn’t quite displaying correctly)
- [X] "fig-2-use-the-icon-only-variant-when-zoomed-to-reduce-overlapping-content-dark" image now appears zoomed, scroll bar in correct place and icon moved further to the right
- [X] "fig-5-avoid-using-the-default-variant-where-it-may-obscure-important-page-content-dark" scroll bar now in correct place
Badge
- “Don’t add badges to non-navigational components…” image shows a different image on the right (non-coffee-related)
- [X] "fig-7-dont-add-badges-to-non-components-dark" added the image into the frame (same for light mode version)
- “Use badges where it is understandable…” image uses a different icon on the nav button (rather than an envelope/message icon) so it doesn’t match the caption (unlike in light mode)
- [X] "fig-3-text-badge-notification-on-new-list-item-dark", now has the mail icon and the badge applied to the tertiary icon, respectively
- Same as the above point but for the second image on the right (technically might not need to show the envelope icon though as the caption still makes sense - but might be good to change for consistency with the other image next to it)
- [X] "fig-4-dont-use-text-badge-with-long-label-dark", now has the mail icon and the badge applied to the menu button
Card (vertical)
- “Avoid displaying lengthy descriptions…” image doesn’t have coffee-related text (unlike the original light mode image)
- [X] "fig-11-avoid-displaying-lengthy-descriptions-in-the-content-area-dark" now has relevant coffee-related text
- Expanded content button shows black arrow, should be blue
- [X] "fig-1-card-anatomy-dark", changed from black to blue arrow
Checkbox
- “Checkbox group error state shown correctly” image doesn’t have validation text
- [X] "fig-5-checklist-error-state-shown-correctly-dark", now has text added, with correct error icon
- “Checkbox conditional field error shown correctly” image has the wrong validation error icon
- [X] "fig-7-checkbox-child-input-error-shown-correctly-dark" correct icon added
- ^ Also applies to the image next to it
- [X] "fig-8-checkbox-child-input-error-shown-incorrectly-dark" correct icon added, light mode images updated too
Chip
- anim-1 and anim-2 in DM are showing LM variant (correct in figma, not on site)
Data list
- All the images show the text in the rows laid out horizontally, rather than vertically (like they are in the light mode images), which is making a lot of the text wrap and makes it a bit harder to read / doesn’t look very clean
- [X] All images resized to ensure better text wrapping
Date picker
- Validation example calendar showing all 1’s
- [X] "fig4-clear-error-message-dark", changed from all 1s, now 1 to 31
- [X] "fig-6-date-picker-displaying-correct-usage-of-error-on-invalid-date-dark" changed from all 1s, now 1 to 31
Dialog
- When not to use has weird extra background around action elements
- [X] "fig-6-avoid-including-complex-content-dark", removed scrim background
Divider
- All divider colours do not pass WCAG guidelines
- [X] All images (light and dark) to be re-exported, due to main component change
Empty state
- “Use empty states within other components…” image has a lighter border around the last card
- [X] "fig-9-use-empty-states-on-other-containers-dark" set to DM tokens
- All images (light and dark) don't have sufficient visual hierarchy between text on empty state
- [X] All images need re-exporting, component colour scheme has changed to enforce hierarchy correctly
Footer
- The outline which is depicting the edges of the window in most images has quite low contrast so is difficult to see in dark mode
- [X] "fig-1-colours-dark", "fig-2-not-full-width-dark", "fig-3-below-the-fold-dark", "fig-4-above-the-fold-dark", "fig-5-app-drawer-layouts-dark", "fig-6-left-aligned-dark", "fig-7-centred-dark", "fig-8-full-width-dark", "fig-9-single-line-links-dark", "fig-10-grouped-links-dark", "fig-11-desktop-logos-dark", "fig-12-correct-copy-dark", "fig-13-incorrect-copy-dark" updated the border token to be Arch-300 in dark mode
Hero
- Link in “Use links to provide navigation from the interaction area” image says “Link label” - think it should be changed to more appropriate text
- [X] "fig-7-use-links-in-the-interaction-area-dark" text - link label changed to explore
- Background image example has white text on off-white background, and features the latest announcements section when not needed
- [X] "fig-16-use-safe-areas-when-using-background-imagery-dark", removed the clickable card & changed from white to black text
Link
- First two images don’t show the hover state on the links (like they do in light mode)
- [X] "always-include-a-launch-icon-when-directing-users-to-an-external-address-dark", changed link to hover state (changed light mode version too)
- [X] "dont-use-a-default-link-for-links-which-open-a-new-tab-or-website-dark", changed link to hover state (ditto)
Loading indicator
- “Place the full width indicator at the top of the container” image doesn’t show the full width variant (i.e. the corners at the sides of the screen shouldn’t be rounded
- [X] "fig-5-place-the-full-width-indicator-at-the-top-of-the-container-dark" changed to full width variant (same changes made to light mode version)
Page header
- “The anatomy of a page header…” image just says “Breadcrumb” for the current page - think this should be changed, probably to “Cappuccino”?
- Also in LM it only shows Tab 1, Tab 2, Tab 3 etc rather than related tab names
- [X] same image fixed as above in "fig-1-page-header-anatomy-dark"
- Very small issue but the “Default sized page header” text in the “An example of default and small sized page headers” image is not aligned to the left, and the line pointing to the small page header does not overlap the page header like it does in the page header shown above
- [X] "fig-3-use-default-and-dense-sizing-dark", moved text to be left-aligned and line brought to front (changed light mode images too)
- All four images in the “Alignment” section show a scroll bar when they probably don’t need to (probably copied over from the scroll examples?)
- [X] "fig-8-centre-alignment-dark", "fig-9-left-alignment-dark", "fig-10-full-width-dark", "fig-11-dont-mix-alignment-dark", hidden scroll bar in these images
- Monochrome breadcrumbs used on default example
- [X] "fig-1-page-header-anatomy-dark", Updated from monochrome to default & corrected spelling mistake
- Alignment left example has no padding on page content
- [X] "fig-9-left-alignment-dark", Added padding
Pagination
- “Use a pagination bar to provide more functionality” image shows “25” in the select when it should be “8”
- [X] "fig-3-data-table-with-pagination-bar-dark", changed from 25 to 8, in both light and dark mode images
- Colour examples background hard to see, and the text colour does not have sufficient contrast
- [X] "fig-5-use-colour-variants-dark", used light mode example to ensure yellow background example meets sufficient ratios for text against background
Popover menu
- “Set a max-height...” image shows a light-coloured scroll bar rather than a dark-coloured / dark mode one, and the chevron and tick icons on the right of the menu items are cut off on the right
- [X] "fig-3-set-maxheight-to-force-scroll-dark", changed to a darker scoll bar and amended location of icons in light mode version too
Radio button
- “Error validation…” and “Only display the error…” images show the wrong validation error icon
- [X] "fig-9-error-validation-shown-correctly-on-the-field-causing-the-error-dark", "fig-10-only-display-the-error-on-the-field-causing-it-dark" updated to correct error icon
Search bar
- “Use the loading state…” image doesn’t show the loading state
- [X] Figma image already existed in Figma "fig-5-suggested-options-loading-state-dark" needs to be used rather than "fig-6-suggested-options-empty-state-dark"
Section container
- Dashed outlines don’t appear clearly on dark background
- [X] "Fig-1-section-containers-align-content-dark", "Fig-2-full-height-example-dark", "Fig-3-section-containers-align-centre-dark", "Fig-4-section-containers-align-left-dark", "Fig-5-section-containers-align-full-width-dark" border assigned to arch-60
Select
- Fig 6 has unusual spacing around divider, clear button on search box
- [X] "fig-6-do-not-use-the-searchable-variant-when-providing-less-than-ten-options-dark" needs re-exporting following main Figma component change
Side navigation
- Layout example has different background colour to others
- [X] "fig-7-dont-position-side-nav-above-footer-dark", changed from image-background to content-background token
- Menu items example has no icons
- [X] "fig-9-tooltips-show-labels-on-hover-or-focus-dark", the icons are there on the image - unsure why they're not on the image on the site
Stepper
- “The compact stepper…” image shows the rectangle (depicting the content) overflowing the right of the image - probably should have a right margin / not overflow, like in the light mode image?
- [X] "fig-8-use-compact-stepper-when-there-is-not-much-room-dark" changed the width of the rectangle so there is a padding of 16 around the image
- Layout examples have random underline
- [X] "fig-6-a-stepper-that-is-leftaligned-at-the-top-of-the-page-showing-how-the-stepper-should-be-implemented-dark", "fig-7-a-stepper-that-is-centrealigned-at-the-top-of-the-page-showing-how-the-stepper-should-not-be-implemented-dark", removed stroke from stepper
Switch
- Animations show light mode version
- [X] anim-1.1, anim1.2 and anim1.3 exist in dark mode variant, re-export
- [X] anim-2 exists in dark mode variant, re-export
Tabs
- About the “Colour” examples - maybe they should show the monochrome variants? Not sure what else to do for these images and their captions to make sense
- [X] addressed in point above - changed left to the light mode version so it makes sense in context & monochrome variant on hero example
- The colour example makes no sense to me (explains using dark tabs on a light background then shows dark background). Also, the underline on the right example is the wrong colour
- [X] "fig-2-dark-tab-bar-example", (light mode) changed from light blue to monochrome variant (white)
- [X] "fig-2-dark-tab-bar-example-dark", (dark mode) changed tab to monochrome variant (white)
- [X] "fig-1-light-tab-bar-example-dark", is now using a white background rather than using the DM appearance so it makes sense in context on the site
- The content “dont mix normal and icon tabs” has no icon tabs visible
- [X] "fig-10-dont-mix-icon-tabs-with-normal-tabs-dark", now has an icon
Table of Contents
- We now have ToC imagery, courtesy of an old branch created by Rory!
- [X] All images on this page to be exported - images re-mapped to ICDSv3
Toast
- When not to use example is not error variant despite the example being of that
- [X] "fig-3c-dont-use-toast-to-display-errors-dark", correct image exists already in Figma so needs to be used instead of "fig-4c-correct-toast-positioning-dark", beneath "If the message must be seen, use an alert or dialog depending on the severity of the problem."
- Toast component has been updated
- [X] All images for toast to be re-exported following main component change. Dark mode toasts now set to dark mode variant, not light
- Animations are light mode
- [X] Anim-1 and anim-2 both exist in dark mode variant, re-export
Top navigation
- “Top navigation displayed on smaller screens” image shows the “About” nav item in blue with a chevron - I think it should just look like the other nav items
- [X] "fig-4-use-drawer-navigation-on-small-screens-dark" now matches the other nav items and is white rather than blue
- “Examples of top navigation using different brand colours” image has different padding and larger text in the second top nav than in the first
- [X] "fig-5-personality-colours-dark" updated to be small and medium variant rather than extra large
Figma UI kit
- both images are light mode
- [X] images exist as screenshots in figma file
Accessibility:Invisible illness
- animation is light mode
- [X] animation exists in DM in figma file
Accessibility:Neurodiversity
- Open dyslexic screenshot shows lighter background against text
- [X] "fig-16-dyslexia-friendly-font-dark" has been updated with correct colours
Style:Motion
- animations are light mode
- [X] animations exist in DM in figma file
