Skip to content

Design Kits v5.4.0
Compare
Choose a tag to compare
@oliviertassinari oliviertassinari released this 31 Jul 22:07
· 14 commits to master since this release
v5.4.0
70e9eda
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

Feb 3, 2022

Figma

Breaking changes

Before moving forward with the new library, you must make a few changes. Some names have been changed in 5.4.0, and since Swap Library identifies the components based on their names, you need to make sure the current component library matches the names of the new library. Skipping this step will leave the old components in your file. You can learn more about it in the migration introduction video.

  • Alert

    • Separate variants into three parts “Alert/Filled“, “Alert/Outlined“, “Alert/Standard“;

  • AppBar

    • Combine “DesktopAppBar“ and “MobileAppBar“ into a single “AppBar“ part;

  • Badge

    • Change name from “Badge/W.Icon“ to “Badge W. Icon“;

  • Button

    • Separate variants into three parts “Button/Filled“, “Button/Outlined“, “Button/Text“);

  • ButtonGroup

    • Separate “ButtonGroup/Horizontal“ and “ButtonGroup/Vertical“ into three parts “ButtonGroup/Contained“, “ButtonGroup/Outlined“, “ButtonGroup/Text“;

  • Chip

    • Separate variants into “Chip/Filled“, “Chip/Outlined“;

  • List

    • Separate “ListItem“ into “ListItem/Simple“, “ListItem/With Icon“, “ListItem/With Checkbox“, “ListItem/With Avatar“;

  • Menu

    • Change name from “MenuExamples“ to “Examples“;
    • Change name for “Menu/Native“ to “Menu Native“;

  • Progress

    • Change name from “Linear“ to Progress/Linear;
    • Change name from “Circular“ to Progress/Circular;

  • Step

    • Change name from “Step/Elements“ to “Step Elements“;
    • Change name from “Stepper/W. Content“ to “DesktopStepper“;

Changes

  • Add dark mode as a variant to each component to avoid having two separate Figma files.
  • Add interactive states for many components
  • Sync dark theme colors with the default React theme
  • Group tokens into light and dark — we used these names to increase
  • Sync the Figma icons with @mui/icons-material to include the latest ones
  • Rename variant names (e.g., Resting -> Enabled, Hover -> Hovered, etc.)
  • Add Material Design 2014 colors as tokens
  • Delete unused icons from the main Figma file for better performance (see guide on how to access the whole icon library)
  • Add new screen examples for each breakpoint
  • Add new color variants (Inherit, Default)
  • Add coverage for the Focused state on the components
  • Improve/change Card component
  • Improve/change List component
  • Improve/change Menu component
  • Add Hover state to Text Field, Select, Autocomplete, Multiline
  • Add Multiline component
  • Add Layout component
  • Fix Paper elevation in dark mode

Sketch

  • Sync dark theme colors with the default React theme
  • Sync the Sketch icons with @mui/icons-material to include the latest ones
  • Delete unused icons from the main Sketch file for better performance
  • Add new color variants (Inherit, Default)
  • Add multiline support for the text field component
  • Add Card component
  • Improve/change Text field, Select, Multiline, Autocomplete to fix Adoronment issue
  • Improve/change Slider component
  • Improve/change Menu component
  • Fix Button, Button group, Toggle, etc opacity bug caused by the new Sketch updates
  • Fix Paper elevation in dark mode
  • Fix outdated links to docs
Assets 2
Loading