Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

feat(Icon): Teams theme add static outline and filled classes to SVG icons #834

Merged
merged 9 commits into from
Feb 4, 2019

Conversation

miroslavstastny
Copy link
Member

@miroslavstastny miroslavstastny commented Feb 4, 2019

Closes #716.

  • Add teamsIconSlotClassNames.outline and filled to all SVG icons in Teams theme which have outline and/or filled paths,
  • do the same for all ProcessedIcons in Teams theme,
  • add UT to verify these classes on Teams icons,
  • Use teamsIconSlotClassNames instead of hardcoded class names in theme styles,
  • update CHANGELOG.


describe('Teams Theme Icon', () => {
function testIcon(icon) {
const iconFunc: any = (icon as SvgIconSpecWithStyles).icon
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This does not cover all possible Icon flavors, but works for all Teams theme icons.
Instead of implementing universal test now, let it fail and iterate.

@codecov
Copy link

codecov bot commented Feb 4, 2019

Codecov Report

Merging #834 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master     #834   +/-   ##
=======================================
  Coverage   93.54%   93.54%           
=======================================
  Files          21       21           
  Lines         728      728           
  Branches       69       73    +4     
=======================================
  Hits          681      681           
  Misses         47       47

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8207b8a...cee4412. Read the comment docs.


export default {
icon: ({ classes }) => (
<svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
<g>
<path
className={classes.outlinePart}
className={cx(teamsIconSlotClassNames.outline, classes.outlinePart)}
Copy link
Contributor

@kuzhelov kuzhelov Feb 4, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't like the fact that this class name data is repeated for every icon while, in fact, it provides the same information as classes.outlinePart. We might think about some way to provide classes via styles, via dedicated prop - so that this repetition will be avoided.

const iconStyles = ({ ... }) => ({
  root: ....,
  outlinePart: {
     ...
      classes: ['outline']
  }
})

Note that this will be quite safe move (as it is quite easy to filter out this prop before Fela transformations), as well as we will still preserve full control of this aspect being provided to the client's hands (so it will be up to client to decide on class names policy, extend this set, etc)

@miroslavstastny miroslavstastny merged commit 21c2f9e into master Feb 4, 2019
@miroslavstastny miroslavstastny deleted the theme/teams-icons-static-classes branch February 4, 2019 19:30
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants