search

square / maker

Maker Design System by Square
https://square.github.io/maker/styleguide/latest-stable/
Other
63 stars 14 forks source link

refactor(icon)!: render fns instead of vue components #528

Closed pretzelhammer closed 1 year ago

pretzelhammer commented 1 year ago

Describe the problem this PR addresses

described in migration notes in this pr:

Before to theme icons you'd have to pass Vue components to the MTheme config object. This had two big limitations: icon components must be compiled either ahead of time or on the fly, and it wasn't possible to customize the prop values on the icon component, it would always be rendered with the defaults. Furthermore, doing this just for icon components was a little odd since we already established the pattern of using render functions for all other components which conditionally render nested content, e.g. MModals, MDialogs, MBlades, MToasts. Now to theme icons you use render functions, which solves all of the problems noted above.

also, while not mentioned in the migration notes (since it's not a breaking change) this PR also adds the ability to set/theme the fill property of MIcons separately from the color property. this is to enable setting values which are valid fill values but not valid color values, such as url(#idToSvgDefinitionSuchAsALinearGradient).

Describe the changes in this PR

Other information

check out the interactive icons lab here: https://square.github.io/maker/lab/icon-render-fns/#/CustomIcons

github-actions[bot] commented 1 year ago

Deployed Styleguide and Lab.

Notes
  1. Links may take a few minutes to update after PR is opened or commit is pushed.
  2. Links may become invalidated after PR is merged or closed.
  3. Links for all releases and open PRs can be found on the Maker Deploys page.

linnea commented 1 year ago

@laurenhu I'm only seeing one MIcon usage of 'info', can you point me to the other usages you see? Will be doing the upgrade here in a bit!

EDIT: Oh never mind, I found the theme data passing these components to update!

github-actions[bot] commented 1 year ago

:tada: This PR is included in version 17.0.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: