fix(select): fixed select state styling

select when `is-dark` can now have `is-error`, `is-success` and `is-warning` nostalgic-css#384
HiKaylum · Dec 27, 2019 · 6b6f68e · 6b6f68e
1 parent 2790eab
commit 6b6f68e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/scss/form/selects.scss b/scss/form/selects.scss
@@ -47,11 +47,10 @@
 
   // prettier-ignore
   $types:
+    "dark" map-get($default-colors, "normal") map-get($default-colors, "hover"),
     "success" map-get($success-colors, "normal") map-get($success-colors, "hover"),
     "warning" map-get($warning-colors, "normal") map-get($warning-colors, "hover"),
-    "error" map-get($error-colors, "normal") map-get($error-colors, "hover"),
-    "dark" map-get($default-colors, "normal") map-get($default-colors, "hover");
-
+    "error" map-get($error-colors, "normal") map-get($error-colors, "hover");
   @each $type in $types {
     &.is-#{nth($type, 1)} {
       $color: nth($type, 2);

diff --git a/story/select/select.template.js b/story/select/select.template.js
@@ -1,16 +1,23 @@
-import { select } from '@storybook/addon-knobs';
+import { boolean, select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
 
 import sharedOptions from '../_helpers/shared';
 
 export default () => {
-  const selectedClass = select('class', {
+  const isDark = boolean('is-dark', false);
+  const selectOptions = select('class', {
     default: '',
     ...sharedOptions,
-    'is-dark': 'is-dark',
   }, '');
 
+  const selectedClasses = classNames(
+    'nes-select',
+    selectOptions,
+    { 'is-dark': isDark },
+  );
+
   return `
-    <div class="nes-select ${selectedClass}">
+    <div class="${selectedClasses}">
       <select required>
         <option value="" disabled selected hidden>Select...</option>
         <option value="0">To be</option>