Repository: uber-web/baseui
Pull request #545 (2018-11-27 23:21:22)

feat: add rating palette to light theme
#### Fixed Issues

This PR introduces the `rating200` and `rating400` theme colors. It also updates the `Rating` components to use these values rather than the warning palette.

##### Before

<img width="268" alt="screen shot 2018-11-27 at 3 22 23 pm" src="https://user-images.githubusercontent.com/4030377/49118197-4399d900-f258-11e8-8d3f-307a08ef77d5.png">

##### After

<img width="267" alt="screen shot 2018-11-27 at 3 22 12 pm" src="https://user-images.githubusercontent.com/4030377/49118203-472d6000-f258-11e8-8939-73df0ad6d353.png">

#### Tests Added + Pass

Yes

#### License

MIT

<!-- Describe your changes below in as much detail as possible -->



Patch:
diff --git a/docs/pages/theming/theming-values/colors.js b/docs/pages/theming/theming-values/colors.js
index eaea9570e..7036ba361 100644
--- a/docs/pages/theming/theming-values/colors.js
+++ b/docs/pages/theming/theming-values/colors.js
@@ -121,6 +121,11 @@ function Colors() {
     mono1000: {color: LightTheme.colors.mono1000, dark: false},
   };
 
+  const ratingColors = {
+    rating200: {color: LightTheme.colors.rating200, dark: true},
+    rating400: {color: LightTheme.colors.rating400, dark: true},
+  };
+
   return (
     <div>
       <Header>Colors</Header>
@@ -130,6 +135,7 @@ function Colors() {
         <ColorPreview colors={warningColors} />
         <ColorPreview colors={positiveColors} />
         <ColorPreview colors={monoColors} />
+        <ColorPreview colors={ratingColors} />
       </ExampleWrapper>
     </div>
   );
diff --git a/src/rating/examples.js b/src/rating/examples.js
index f57d4b167..1964d9f28 100644
--- a/src/rating/examples.js
+++ b/src/rating/examples.js
@@ -20,7 +20,9 @@ type ExampleState = {
 export default {
   [examples.DEFAULT]: function Story1() {
     class Example extends React.Component<{}, ExampleState> {
-      state = {};
+      state = {
+        value: 3,
+      };
 
       render() {
         return (
@@ -36,7 +38,9 @@ export default {
   },
   [examples.CUSTOM_STARS]: function Story2() {
     class Example extends React.Component<{}, ExampleState> {
-      state = {};
+      state = {
+        value: 5,
+      };
 
       render() {
         return (
@@ -53,7 +57,9 @@ export default {
   },
   [examples.EMOTICON]: function Story3() {
     class Example extends React.Component<{}, ExampleState> {
-      state = {};
+      state = {
+        value: 3,
+      };
 
       render() {
         return (
diff --git a/src/rating/styled-components.js b/src/rating/styled-components.js
index 842cfa05c..d14c92f75 100644
--- a/src/rating/styled-components.js
+++ b/src/rating/styled-components.js
@@ -42,7 +42,7 @@ export const StyledStar = styled(
     let starFill = $theme.colors.mono300;
 
     if ($isActive) {
-      starStroke = starFill = $theme.colors.warning300;
+      starStroke = starFill = $theme.colors.rating400;
     }
 
     const styles = {
@@ -82,7 +82,7 @@ export const StyledEmoticon = styled(
     let emoticonFill = $theme.colors.mono500;
 
     if ($isActive) {
-      emoticonFill = $theme.colors.warning200;
+      emoticonFill = $theme.colors.rating200;
     }
 
     const ratingIcons = [
diff --git a/src/styles/types.js b/src/styles/types.js
index 567c31550..e53bcb3b1 100644
--- a/src/styles/types.js
+++ b/src/styles/types.js
@@ -64,6 +64,10 @@ export type ColorsT = {
   mono1000: string,
   black: string,
 
+  // Rating Palette
+  rating200: string,
+  rating400: string,
+
   // Semantic Colors
 
   // Background
diff --git a/src/themes/creator.js b/src/themes/creator.js
index bf3780f9c..cbe9759f7 100644
--- a/src/themes/creator.js
+++ b/src/themes/creator.js
@@ -76,6 +76,10 @@ export default function createTheme(
       mono1000: primitives.mono1000,
       black: primitives.mono1000,
 
+      // Rating Palette,
+      rating200: primitives.rating200,
+      rating400: primitives.rating400,
+
       // Semantic Colors
 
       // Background
diff --git a/src/themes/dark-theme-primitives.js b/src/themes/dark-theme-primitives.js
index 67890fd0b..50e0d1d92 100644
--- a/src/themes/dark-theme-primitives.js
+++ b/src/themes/dark-theme-primitives.js
@@ -56,5 +56,8 @@ export const primitives: PrimitivesT = {
   mono900: '#111111',
   mono1000: '#000000',
 
+  rating200: '#FFE1A5',
+  rating400: '#FFC043',
+
   primaryFontFamily: '"Helvetica Neue", arial, sans-serif',
 };
diff --git a/src/themes/light-theme-primitives.js b/src/themes/light-theme-primitives.js
index 605d134f6..f4cdffefe 100644
--- a/src/themes/light-theme-primitives.js
+++ b/src/themes/light-theme-primitives.js
@@ -56,5 +56,8 @@ export const primitives: PrimitivesT = {
   mono900: '#333333',
   mono1000: '#000000',
 
+  rating200: '#FFE1A5',
+  rating400: '#FFC043',
+
   primaryFontFamily: '"Helvetica Neue", arial, sans-serif',
 };
diff --git a/src/themes/types.js b/src/themes/types.js
index 3a5d1cfb4..261fae590 100644
--- a/src/themes/types.js
+++ b/src/themes/types.js
@@ -59,5 +59,9 @@ export type PrimitivesT = {
   mono900: string,
   mono1000: string,
 
+  // Rating Palette
+  rating200: string,
+  rating400: string,
+
   primaryFontFamily: string,
 };


Test patch:
diff --git a/src/rating/__tests__/__snapshots__/styled-components.test.js.snap b/src/rating/__tests__/__snapshots__/styled-components.test.js.snap
index ddc0ede39..9115e83e5 100644
--- a/src/rating/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/rating/__tests__/__snapshots__/styled-components.test.js.snap
@@ -159,7 +159,7 @@ Object {
 exports[`StyledComponents StyledEmoticon displays correct styling with state $isActive 1`] = `
 Object {
   ":after": Object {
-    "content": "url('data:image/svg+xml;utf8,<svg width=\\"44\\" height=\\"44\\" viewBox=\\"0 0 44 44\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"22\\" cy=\\"22\\" r=\\"20\\" fill=\\"%24theme.colors.warning200\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M21.8377 29C24.8073 29 26.6585 30.7697 27.1609 31.5442C27.4615 32.0075 28.0807 32.1395 28.5441 31.839C29.0074 31.5384 29.1394 30.9192 28.8388 30.4558C28.0439 29.2303 25.614 27 21.8377 27C18.0453 27 15.8091 29.25 15.1202 30.5245C14.8576 31.0103 15.0385 31.6171 15.5244 31.8797C16.0102 32.1423 16.617 31.9614 16.8796 31.4755C17.2718 30.75 18.8842 29 21.8377 29Z\\" fill=\\"black\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M11.684 16.949C11.1601 16.7743 10.8769 16.208 11.0516 15.684C11.2262 15.1601 11.7926 14.8769 12.3165 15.0516L18.3165 17.0516C18.8404 17.2262 19.1236 17.7926 18.949 18.3165C18.8093 18.7355 18.4192 19.0005 18.0005 19.0005C18.0004 20.105 17.105 21.0002 16.0005 21.0002C14.896 21.0002 14.0005 20.1048 14.0005 19.0002C14.0005 18.5694 14.1368 18.1703 14.3686 17.8438L11.684 16.949ZM32.949 15.684C33.1237 16.208 32.8405 16.7743 32.3166 16.949L29.6324 17.8437C29.8642 18.1702 30.0005 18.5693 30.0005 19.0002C30.0005 20.1048 29.1051 21.0002 28.0005 21.0002C26.8961 21.0002 26.0007 20.105 26.0005 19.0005C25.5817 19.0007 25.1914 18.7356 25.0516 18.3165C24.877 17.7926 25.1602 17.2262 25.6841 17.0516L31.6841 15.0516C32.208 14.8769 32.7744 15.1601 32.949 15.684Z\\" fill=\\"black\\"/></svg>')",
+    "content": "url('data:image/svg+xml;utf8,<svg width=\\"44\\" height=\\"44\\" viewBox=\\"0 0 44 44\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"22\\" cy=\\"22\\" r=\\"20\\" fill=\\"%24theme.colors.rating200\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M21.8377 29C24.8073 29 26.6585 30.7697 27.1609 31.5442C27.4615 32.0075 28.0807 32.1395 28.5441 31.839C29.0074 31.5384 29.1394 30.9192 28.8388 30.4558C28.0439 29.2303 25.614 27 21.8377 27C18.0453 27 15.8091 29.25 15.1202 30.5245C14.8576 31.0103 15.0385 31.6171 15.5244 31.8797C16.0102 32.1423 16.617 31.9614 16.8796 31.4755C17.2718 30.75 18.8842 29 21.8377 29Z\\" fill=\\"black\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M11.684 16.949C11.1601 16.7743 10.8769 16.208 11.0516 15.684C11.2262 15.1601 11.7926 14.8769 12.3165 15.0516L18.3165 17.0516C18.8404 17.2262 19.1236 17.7926 18.949 18.3165C18.8093 18.7355 18.4192 19.0005 18.0005 19.0005C18.0004 20.105 17.105 21.0002 16.0005 21.0002C14.896 21.0002 14.0005 20.1048 14.0005 19.0002C14.0005 18.5694 14.1368 18.1703 14.3686 17.8438L11.684 16.949ZM32.949 15.684C33.1237 16.208 32.8405 16.7743 32.3166 16.949L29.6324 17.8437C29.8642 18.1702 30.0005 18.5693 30.0005 19.0002C30.0005 20.1048 29.1051 21.0002 28.0005 21.0002C26.8961 21.0002 26.0007 20.105 26.0005 19.0005C25.5817 19.0007 25.1914 18.7356 25.0516 18.3165C24.877 17.7926 25.1602 17.2262 25.6841 17.0516L31.6841 15.0516C32.208 14.8769 32.7744 15.1601 32.949 15.684Z\\" fill=\\"black\\"/></svg>')",
     "transition": "all $theme.animation.timing400",
   },
   ":focus": Object {
@@ -254,7 +254,7 @@ Object {
 exports[`StyledComponents StyledStar displays correct styling with state $isActive 1`] = `
 Object {
   ":after": Object {
-    "content": "url('data:image/svg+xml;utf8,<svg width=\\"22\\" height=\\"20\\" viewBox=\\"0 0 22 20\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M11 1.54816L13.1268 7.78053L13.2423 8.11905H13.6H20.4143L14.9132 11.9714L14.6055 12.1869L14.7268 12.5424L16.8321 18.7118L11.2868 14.8285L11 14.6277L10.7132 14.8285L5.16792 18.7118L7.27321 12.5424L7.39454 12.1869L7.08681 11.9714L1.58566 8.11905H8.4H8.75769L8.87321 7.78053L11 1.54816Z\\" fill=\\"%24theme.colors.warning300\\" stroke=\\"%24theme.colors.warning300\\"/></svg>')",
+    "content": "url('data:image/svg+xml;utf8,<svg width=\\"22\\" height=\\"20\\" viewBox=\\"0 0 22 20\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M11 1.54816L13.1268 7.78053L13.2423 8.11905H13.6H20.4143L14.9132 11.9714L14.6055 12.1869L14.7268 12.5424L16.8321 18.7118L11.2868 14.8285L11 14.6277L10.7132 14.8285L5.16792 18.7118L7.27321 12.5424L7.39454 12.1869L7.08681 11.9714L1.58566 8.11905H8.4H8.75769L8.87321 7.78053L11 1.54816Z\\" fill=\\"%24theme.colors.rating400\\" stroke=\\"%24theme.colors.rating400\\"/></svg>')",
     "transition": "all $theme.animation.timing400",
   },
   ":focus": Object {