New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icon update #1034

Merged
merged 21 commits into from Jan 11, 2019

Conversation

Projects
None yet
2 participants
@RCopeland
Copy link
Member

RCopeland commented Jan 11, 2019

What does this PR do?

Alter the icon system to expect svg icons with presentational attributes.
Conditionally overrides stroke, fill and stroke-width.
Updates icon use across components.

Please check off completed items as you work.

If a checklist item or section does not apply to your PR
then please remove it.

Documentation

  • Update Spark Docs Angular
  • Update Spark Docs Vanilla
  • Update Component Sass Var/Class Modifier table

Code

  • Build Component in Spark Vanilla (Sass, HTML, JS)
  • Build Component in Spark Angular
  • Unit Testing in Spark Vanilla with npm run test --prefix ./packages/spark-core (100% coverage, 100% passing)
  • Unit Testing in Spark Angular with gulp test-angular (100% coverage, 100% passing)

Accessibility

Browser Testing (current version and 1 prior)

  • Google Chrome
  • Google Chrome (Mobile)
  • Mozilla Firefox
  • Mozilla Firefox (Mobile)
  • Microsoft Internet Explorer 11 (only this specific version of IE)
  • Microsoft Edge
  • Apple Safari
  • Apple Safari (Mobile)

Design Review

  • Design reviewed and approved

Screenshots

Add screenshots to help explain your PR if you'd like. However, this is not
expected.

@@ -13,7 +61,7 @@
}

.sprk-c-Icon--current-color {
fill: currentColor;
fill: none;

This comment has been minimized.

@afebbraro

afebbraro Jan 11, 2019

Member

Need two classes, one current color for fill and one for stroke

@@ -237,15 +237,16 @@ $sprk-alert-border: 1px solid $sprk-gray !default;
$sprk-alert-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.08) !default;
$sprk-alert-color: $sprk-black !default;
$sprk-alert-bg-color: $sprk-white !default;
$sprk-alert-icon-size: 40px !default;
$sprk-alert-icon-size: 32px !default;

This comment has been minimized.

@afebbraro

afebbraro Jan 11, 2019

Member

$sprk-alert-icon-size needs updating in the docs

@@ -58,8 +58,8 @@ $sprk-icon-m: 16px !default;
$sprk-icon-l: 32px !default;
$sprk-icon-xl: 64px !default;
$sprk-icon-xxl: 128px !default;
$sprk-icon-fill-color: $sprk-red !default;
$sprk-icon-stroke-color: $sprk-red !default;
$sprk-icon-fill-color: none !default;

This comment has been minimized.

@afebbraro

afebbraro Jan 11, 2019

Member

$sprk-icon-fill-color needs updating in the docs

$sprk-icon-fill-color: $sprk-red !default;
$sprk-icon-stroke-color: $sprk-red !default;
$sprk-icon-fill-color: none !default;
$sprk-icon-stroke-color: $sprk-black !default;

This comment has been minimized.

@afebbraro

afebbraro Jan 11, 2019

Member

$sprk-icon-stroke-color needs updating in the docs

RCopeland added some commits Jan 11, 2019

@RCopeland RCopeland merged commit afbb1e5 into sparkdesignsystem:staging Jan 11, 2019

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
deploy/netlify Deploy preview ready!
Details

@RCopeland RCopeland deleted the RCopeland:icon-update branch Jan 11, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment