Merge pull request #1221 from buildo/1220-scss_double_imports_cause

#1220: scss double imports cause duplication and possibly broken style depending on order of imports (closes #1220)

src/Input/Examples.md

@@ -44,3 +44,38 @@ const wrapperProps = { style: { marginRight: '10px', width: '150px' } };
   </FlexView>
 </form>
 ```
+
+#### Password Input
+
+```js
+initialState = { value: '' };
+
+const onChange = value => setState({ value });
+
+<PasswordInput
+  placeholder='super secret password'
+  value={state.value}
+  onChange={onChange}
+/>
+```
+
+#### Confirmation Input
+
+```js
+initialState = {};
+
+const onConfirm = value => console.log(`confirmed: ${value}`);
+const onClear = () => console.log('cleared!');
+const onChange = value => setState({ value });
+
+const initialValue = state.value;
+
+<form className='ui form'>
+  <ConfirmationInput
+    placeholder='Type Word'
+    {...{ initialValue, onChange, onConfirm, onClear }}
+    text={{ clear: 'clear', toConfirm: 'to confirm' }}
+    icon={{ clear: undefined, toConfirm: undefined }}
+  />
+</form>
+```

src/Input/index.ts

@@ -1,2 +1,5 @@
 import { Input } from './Input';
+import { ConfirmationInput } from './ConfirmationInput';
+import { PasswordInput } from './PasswordInput';
+export { ConfirmationInput, PasswordInput, Input };
 export default Input;

src/Input/input.scss

@@ -16,6 +16,14 @@ $color-failure: $brc-alizarinCrimson !default;
 $border-color-success: $brc-seaGreen !default;
 $border-color-failure: $brc-alizarinCrimson !default;
 
+// confirmation-input extensions
+$confirmation-font-weight: $brc-semibold !default;
+$confirmation-color: $brc-azure !default;
+$confirmation-color-focus: $brc-azure !default;
+
+// password input extensions
+$show-color: $brc-azure !default;
+
 .input {
   input {
     border: $border-width solid $border-color;
@@ -86,4 +94,35 @@ $border-color-failure: $brc-alizarinCrimson !default;
       color: $color-failure;
     }
   }
+
+  // confirmation input extensions
+  &.confirmation-input {
+    .confirmation {
+      height: $height;
+      margin: 0 $padding-h;
+      color: $confirmation-color;
+      font-size: $font-size;
+      line-height: $font-size;
+      font-weight: $confirmation-font-weight;
+    }
+
+    &.focused {
+      .confirmation {
+        cursor: pointer;
+        color: $confirmation-color-focus;
+      }
+    }
+  }
+
+  // password input extensions
+  &.password-input {
+    .password-input-toggle {
+      height: $height;
+      margin: 0 $padding-h;
+      color: $show-color;
+      font-size: $font-size;
+      line-height: $font-size;
+      cursor: pointer;
+    }
+  }
 }

src/index.ts

@@ -31,8 +31,6 @@ export { Button };
 export { StatefulButton } from './Button';
 import MoreOrLess from './MoreOrLess';
 export { MoreOrLess };
-import ConfirmationInput from './ConfirmationInput';
-export { ConfirmationInput };
 import Badge from './Badge';
 export { Badge };
 import NavBar from './NavBar';
@@ -62,7 +60,5 @@ import DateField from './DateField';
 export { DateField };
 import Image from './Image';
 export { Image };
-import Input from './Input';
-export { Input };
-import PasswordInput from './PasswordInput';
-export { PasswordInput };
+import { Input, PasswordInput, ConfirmationInput } from './Input';
+export { Input, PasswordInput, ConfirmationInput };

styleguide/setup.ts

@@ -42,7 +42,6 @@ import '../src/Panel/tabbedPanel.scss';
 import '../src/MoreOrLess/moreOrLess.scss';
 import '../src/LoadingSpinner/loadingSpinner.scss';
 import '../src/Dropdown/dropdown.scss';
-import '../src/ConfirmationInput/confirmationInput.scss';
 import '../src/Badge/badge.scss';
 import '../src/Toggle/toggle.scss';
 import '../src/Tooltip/tooltip.scss';
@@ -56,7 +55,6 @@ import '../src/AsyncStatusIndicator/asyncStatusIndicator.scss';
 import '../src/DatePicker/datePicker.scss';
 import '../src/DateField/dateField.scss';
 import '../src/Input/input.scss';
-import '../src/PasswordInput/passwordInput.scss';
 
 
 // examples sass and resources

test/scripts/__snapshots__/build.test.ts.snap

@@ -24,11 +24,6 @@ Array [
   "Button/button.css",
   "Button/index.d.ts",
   "Button/index.js",
-  "ConfirmationInput/ConfirmationInput.d.ts",
-  "ConfirmationInput/ConfirmationInput.js",
-  "ConfirmationInput/confirmationInput.css",
-  "ConfirmationInput/index.d.ts",
-  "ConfirmationInput/index.js",
   "DateField/DateField.d.ts",
   "DateField/DateField.js",
   "DateField/dateField.css",
@@ -77,8 +72,12 @@ Array [
   "Image/getUrl.js",
   "Image/index.d.ts",
   "Image/index.js",
+  "Input/ConfirmationInput.d.ts",
+  "Input/ConfirmationInput.js",
   "Input/Input.d.ts",
   "Input/Input.js",
+  "Input/PasswordInput.d.ts",
+  "Input/PasswordInput.js",
   "Input/index.d.ts",
   "Input/index.js",
   "Input/input.css",
@@ -135,11 +134,6 @@ Array [
   "Panel/index.js",
   "Panel/panel.css",
   "Panel/tabbedPanel.css",
-  "PasswordInput/PasswordInput.d.ts",
-  "PasswordInput/PasswordInput.js",
-  "PasswordInput/index.d.ts",
-  "PasswordInput/index.js",
-  "PasswordInput/passwordInput.css",
   "Popover/Popover.d.ts",
   "Popover/Popover.js",
   "Popover/examples.css",