kolibri-design-system icon indicating copy to clipboard operation
kolibri-design-system copied to clipboard

Update $core-time value and dropshadows documentation to the latest guidance from the design team

Open MisRob opened this issue 1 year ago • 1 comments

Description

Based on recent guidance (Slack thread) by @jtamiace:

  • Updates $core-time value from 0.25s to 0.15s
  • Updates guidance for drop shadows depth to:
    • "1dp: containers, panels, controls"
    • "2dp: cards, app bars, buttons, menu, tooltips, snackbars"
    • "6dp: card hover, modal"
    • Figma design

Note that KDS consumers currently use more dp values. Here are issues to align products and KDS components with these guidelines at first, and then to remove unused dp.

  • https://github.com/learningequality/kolibri-design-system/issues/724
  • https://github.com/learningequality/kolibri/issues/12552
  • https://github.com/learningequality/kolibri-design-system/issues/725

Changelog

  • #723
    • Description: Updates $core-time value from 0.25s to 0.15s
    • Products impact: User experience - faster transitions
    • Addresses: Updates KDS to the latest guidance from the design team
    • Components: KButton, KExternalLink, KRouterLink, KModal, KCard, KIcon, KTabsList, KTabs, and places in consumers that imports $core-time
    • Breaking: no
    • Impacts a11y: no
    • Guidance: -
  • #723
    • Description: Updates drop shadows documentation to the latest guidance from the design team
    • Products impact: -
    • Addresses: Updates KDS to the latest guidance from the design team
    • Components: -
    • Breaking: no
    • Impacts a11y: no
    • Guidance: -

Steps to test

  • Preview "Globally available styles", "Elevation and shadow", and "Easing and timing" sections of the Styling documentation preview page
  • Try the live hover example in "Easing and timing" section for before/after

Testing checklist

  • [x] Contributor has fully tested the PR manually
  • [x] If there are any front-end changes, before/after screenshots are included (see docs preview)
  • [ ] ~Critical and brittle code paths are covered by unit tests~
  • [x] The change is described in the changelog section above

Reviewer guidance

  • [ ] Is the code clean and well-commented?
  • [ ] Are there tests for this change?
  • [ ] Are all UI components LTR and RTL compliant (if applicable)?
  • [ ] Add other things to check for here

After review

  • [x] The changelog item has been pasted to the `CHANGELOG.md

MisRob avatar Aug 11 '24 15:08 MisRob

@jtamiace I'd appreciate if you could read through the update documentation sections I linked in the "Steps to test"

MisRob avatar Aug 11 '24 15:08 MisRob

Thanks both

MisRob avatar Aug 21 '24 18:08 MisRob