fix(utils): fix boolean modifiers

8base · Aug 9, 2018 · bcfa75d · bcfa75d
1 parent 60d1308
commit bcfa75d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 53 deletions.
diff --git a/src/utils/createStyledTag.js b/src/utils/createStyledTag.js
@@ -17,9 +17,17 @@ const getModifierStyles = (themeName: string, modifierName: string, props: Objec
   const modifierValue = getModifierValue(themeName, modifierName, props);
   const themeModifiers = getThemeModifiers(themeName, props);
 
-  return typeof modifierValue === 'boolean'
-    ? themeModifiers[modifierName] || {}
-    : themeModifiers[modifierName][modifierValue] || {};
+  let styles = {};
+
+  if (typeof modifierValue === 'boolean') {
+    if (modifierValue === true) {
+      styles = themeModifiers[modifierName];
+    }
+  } else {
+    styles = themeModifiers[modifierName][modifierValue] || {};
+  }
+
+  return styles;
 };
 
 const getAllModifiersStyles = (themeName: string, props: Object) =>

diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -2856,8 +2856,6 @@ exports[`Storyshots ATOMS/DATA ENTRY/Form with groups 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  height: 100%;
-  width: 100%;
 }
 
 .emotion-1 {
@@ -3178,8 +3176,6 @@ exports[`Storyshots ATOMS/DATA ENTRY/Form without groups 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  height: 100%;
-  width: 100%;
 }
 
 .emotion-0 {
@@ -11647,8 +11643,8 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Link with children 1`] = `
   font-family: Poppins;
   font-weight: 400;
   line-height: 1;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font-size: 1.4rem;
   color: #4DA1FF;
 }
@@ -11683,8 +11679,8 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Link with text 1`] = `
   font-family: Poppins;
   font-weight: 400;
   line-height: 1;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font-size: 1.4rem;
   color: #4DA1FF;
 }
@@ -11801,9 +11797,6 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with align modifiers  1`] = `
   color: #323c47;
   text-align: left;
   font-weight: 400;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
 .emotion-1 {
@@ -11814,9 +11807,6 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with align modifiers  1`] = `
   color: #323c47;
   text-align: right;
   font-weight: 400;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
 .emotion-2 {
@@ -11827,9 +11817,6 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with align modifiers  1`] = `
   color: #323c47;
   text-align: center;
   font-weight: 400;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
 <div
@@ -11877,9 +11864,6 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with bold modifier 1`] = `
   margin: 0;
   color: #323c47;
   font-weight: 700;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
 <div
@@ -11905,9 +11889,6 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with children 1`] = `
   margin: 0;
   color: #323c47;
   font-weight: 400;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
 <div
@@ -11933,9 +11914,6 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with color modifiers  1`] = `
   margin: 0;
   color: #323c47;
   font-weight: 400;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
 .emotion-1 {
@@ -11945,9 +11923,6 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with color modifiers  1`] = `
   margin: 0;
   color: #878c93;
   font-weight: 400;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
 .emotion-2 {
@@ -11957,9 +11932,6 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with color modifiers  1`] = `
   margin: 0;
   color: #eb4235;
   font-weight: 400;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
 .emotion-3 {
@@ -11969,9 +11941,6 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with color modifiers  1`] = `
   margin: 0;
   color: #00bb6e;
   font-weight: 400;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
 .emotion-4 {
@@ -11981,9 +11950,6 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with color modifiers  1`] = `
   margin: 0;
   color: #1968cb;
   font-weight: 400;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
 <div
@@ -12031,9 +11997,6 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with custom size 1`] = `
   margin: 0;
   color: #323c47;
   font-weight: 400;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
 <div
@@ -12059,9 +12022,6 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with disabled modifier 1`] = `
   margin: 0;
   color: #d0d7dd;
   font-weight: 400;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
 <div
@@ -12087,9 +12047,6 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with text 1`] = `
   margin: 0;
   color: #323c47;
   font-weight: 400;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
 <div
@@ -12685,9 +12642,6 @@ exports[`Storyshots MOLECULES/Rating with default modifiers 1`] = `
   margin: 0;
   color: #323c47;
   font-weight: 400;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
 .emotion-4 {