[components] Visual improvements - input components (#488)

* [components] Aligning right side functions on selects * [components] Cleaning up style select * [components] Minor tweaks on dropdown and textinput * [components] Better buttons. No seondary kind (use simple) * [components] Focus on functions on searchable select * [components] Button tweak * [components] Styling fieldsets (and add hasError prop) * [base] New brand color * [components] Button story * [components] Last button fixes * [pr] Change requests from bjoerge
sanity-io · Jan 30, 2018 · cb6fd8d · cb6fd8d
1 parent 1808bc2
commit cb6fd8d
Show file tree

Hide file tree

Showing 20 changed files with 352 additions and 421 deletions.
diff --git a/packages/@sanity/base/src/styles/forms/clear-button.css b/packages/@sanity/base/src/styles/forms/clear-button.css
@@ -1,21 +1,15 @@
 @import 'part:@sanity/base/theme/variables-style';
 
 .root {
-  display: block;
-  cursor: default;
-}
-
-.top-right {
-  composes: root;
-  position: absolute;
-  right: 0;
-  top: 0;
+  color: var(--clear-cross-color);
+  outline: none;
   appearance: none;
   border: none;
   background-color: transparent;
   transition: all 0.1s linear;
-  color: var(--clear-cross-color);
-  outline: none;
+  padding: 0;
+  margin: 0;
+  display: inline-block;
 
   &:hover,
   &:focus {
@@ -28,10 +22,14 @@
   }
 }
 
+.top-right {
+  composes: root;
+}
+
 .textInput {
-  composes: top-right;
+  composes: root;
 }
 
 .textarea {
-  composes: top-right;
+  composes: root;
 }
diff --git a/packages/@sanity/base/src/styles/forms/text-input.css b/packages/@sanity/base/src/styles/forms/text-input.css
@@ -1,10 +1,8 @@
 @import 'part:@sanity/base/theme/variables-style';
 
-.textInput {
+.root {
   appearance: none;
-  border: 0;
-  border: var(--input-border-size) solid var(--input-border-color);
-  color: var(--input-color);
+  border: none;
   display: block;
   width: 100%;
   outline: none;
@@ -14,26 +12,37 @@
   box-sizing: border-box;
   padding: var(--input-padding-horizontal) var(--input-padding-vertical);
   border-radius: var(--input-border-radius);
-  background-color: var(--input-bg);
-  box-shadow: 0 0 4px color(var(--gray-base) a(15%));
   transition: all 0.1s linear;
 
+  @nest &:disabled {
+    opacity: 0.5;
+  }
+}
+
+.textInput {
+  composes: root;
+  color: var(--input-color);
+  background-color: var(--input-bg);
+  box-shadow: var(--component-box-shadow);
+
   @nest &:not(:disabled) {
     @nest &:hover {
-      border-color: var(--input-border-color-hover);
+      box-shadow: var(--component-box-shadow--hover);
     }
 
     @nest &:focus {
-      border-color: var(--input-border-color-focus);
-      box-shadow: 0 0 8px color(var(--input-border-color-focus) a(35%));
+      /* border-color: var(--input-border-color-focus); */
+      box-shadow: var(--component-box-shadow--focus);
     }
 
     @nest &:active {
-      border-color: var(--input-border-color-active);
+      /* border-color: var(--input-border-color-active); */
     }
   }
+}
 
-  @nest &:disabled {
-    opacity: 0.5;
-  }
+.error {
+  composes: textInput;
+  background-color: var(--input-bg-error);
+  box-shadow: var(--component-box-shadow--error);
 }
diff --git a/packages/@sanity/base/src/styles/variables/brand-colors.css b/packages/@sanity/base/src/styles/variables/brand-colors.css
@@ -2,7 +2,7 @@
   --brand-darkest: #000;
   --brand-lightest: #fff;
   --gray-base: #323232;
-  --brand-primary: #1aa0ca;
+  --brand-primary: #24a3e3;
   --brand-primary--text: #fff;
   --brand-primary-light: color(var(--brand-primary) lightness(+ 15%) saturation(- 10%));
   --brand-primary-light--text: #fff;

diff --git a/packages/@sanity/base/src/styles/variables/forms.css b/packages/@sanity/base/src/styles/variables/forms.css
@@ -8,6 +8,7 @@
   --default-button-color--active: var(--gray);
   --button-border-radius: var(--border-radius-base);
   --input-bg: var(--component-bg);
+  --input-bg-error: var(--component-bg);
   --input-bg-disabled: var(--gray-lighter);
   --input-color: var(--text-color);
   --input-border-color: color(var(--component-border-color));

diff --git a/packages/@sanity/base/src/styles/variables/globals.css b/packages/@sanity/base/src/styles/variables/globals.css
@@ -4,14 +4,29 @@
   --body-text: #111;
   --component-bg: #fff;
   --component-border-color: color(var(--gray) lightness(+ 30%));
-  --component-box-shadow: 0 1px 3px color(var(--component-border-color) lightness(- 10%) a(50%));
-  --component-box-shadow--focus: 0 1px 5px color(var(--input-border-color-focus) a(70%));
+  --component-box-shadow-base: var(--gray-base);
+  --component-box-shadow:
+    0 0 2px 0 color(var(--component-box-shadow-base) a(12%)),
+    0 2px 5px 0 color(var(--component-box-shadow-base) a(15%)),
+    0 1px 1px 1px color(var(--component-box-shadow-base) a(10%));
+  --component-box-shadow--hover:
+    0 1px 2px 0 color(var(--component-box-shadow-base) a(15%)),
+    0 2px 5px 0 color(var(--component-box-shadow-base) a(17%)),
+    0 1px 1px 1px color(var(--component-box-shadow-base) a(15%));
+  --component-box-shadow--focus:
+    0 0 2px 0 color(var(--input-border-color-focus) a(42%)),
+    0 2px 5px 0 color(var(--input-border-color-focus) a(45%)),
+    0 1px 1px 1px color(var(--input-border-color-focus) a(80%));
+  --component-box-shadow--error:
+    0 2px 1px -1px color(var(--state-danger-color) a(100%)),
+    0 1px 1px 0 color(var(--state-danger-color) a(65%)),
+    0 1px 3px 0 color(var(--state-danger-color) a(50%));
   --backdrop-background-color: color(var(--brand-primary-lighter) a(40%));
   --main-navigation-background-color: color(var(--brand-primary) shade(70%) saturation(20%));
   --header-height: 3rem;
 
   /* Border radius */
-  --border-radius-base: 0;
+  --border-radius-base: 3px;
   --border-radius-large: 0;
   --border-radius-small: 0;
 

diff --git a/packages/@sanity/components/src/buttons/createButtonLike.js b/packages/@sanity/components/src/buttons/createButtonLike.js
@@ -10,7 +10,7 @@ export default function createButtonLike(Component, {displayName, defaultProps =
     static displayName = displayName || `ButtonLike(${typeof Component === 'string' ? Component : (Component.displayName || Component.name)})`
 
     static propTypes = {
-      kind: PropTypes.oneOf(['default', 'simple', 'secondary']),
+      kind: PropTypes.oneOf(['default', 'simple']),
       color: PropTypes.oneOf(['primary', 'success', 'danger', 'white']),
       onClick: PropTypes.func,
       children: PropTypes.node,
@@ -86,13 +86,17 @@ export default function createButtonLike(Component, {displayName, defaultProps =
           className={style}
           onClick={this.handleClick}
           ref={this.setRootElement}
+          tabIndex={0}
+
         >
-          <div className={styles.inner}>
-            {loading && <span className={styles.spinner}><Spinner inline /></span>}
-            {Icon && <Icon className={styles.icon} />}
-            {children && <span className={styles.content}>{children}</span>}
-            {ripple && !disabled && <Ink duration={1000} opacity={0.10} radius={200} />}
-          </div>
+          <span className={styles.inner} tabIndex={-1}>
+            <span className={styles.content}>
+              {loading && <span className={styles.spinner}><Spinner inline /></span>}
+              {Icon && <Icon className={styles.icon} />}
+              {children && <span className={styles.content}>{children}</span>}
+              {ripple && !disabled && <Ink duration={1000} opacity={0.10} radius={200} />}
+            </span>
+          </span>
         </Component>
       )
     }

diff --git a/packages/@sanity/components/src/buttons/story.js b/packages/@sanity/components/src/buttons/story.js
@@ -64,7 +64,7 @@ storiesOf('Buttons', module)
     () => {
       const disabled = boolean('Disabled', false)
       return (
-        <form>
+        <form style={{padding: '2rem'}}>
           <h2>Default</h2>
           <Button onClick={action('clicked')} icon={SanityLogoIcon} disabled={disabled}>
             Default
@@ -75,10 +75,6 @@ storiesOf('Buttons', module)
           <Button onClick={action('clicked')} icon={SanityLogoIcon} kind="simple" disabled={disabled}>
             Simple
           </Button>
-          <Button onClick={action('clicked')} kind="secondary" icon={SanityLogoIcon} disabled={disabled}>
-            Secondary
-          </Button>
-
 
           <h2>Colors</h2>
           <Button onClick={action('clicked')} disabled={disabled}>
@@ -94,21 +90,6 @@ storiesOf('Buttons', module)
             Success
           </Button>
 
-          <h2>Colors (secondary)</h2>
-          <Button onClick={action('clicked')} kind="simple" disabled={disabled}>
-            Undefined
-          </Button>
-          <Button onClick={action('clicked')} kind="secondary" color="primary" disabled={disabled}>
-            Primary
-          </Button>
-          <Button onClick={action('clicked')} kind="secondary" color="danger" disabled={disabled}>
-            Danger
-          </Button>
-          <Button onClick={action('clicked')} kind="secondary" color="success" disabled={disabled}>
-            Success
-          </Button>
-
-
           <h2>Colors (inverted)</h2>
           <Button onClick={action('clicked')} inverted disabled={disabled}>
             Undefined
@@ -137,18 +118,6 @@ storiesOf('Buttons', module)
             Success
           </Button>
 
-          <h2>Secondary</h2>
-          <Button onClick={action('clicked')} inverted disabled={disabled}>
-            Inverted
-          </Button>
-          <Button onClick={action('clicked')} color="danger" inverted disabled={disabled}>
-            Inverted color:danger
-          </Button>
-
-          <Button onClick={action('clicked')} color="danger" disabled={disabled}>
-            Color:danger
-          </Button>
-
           <h2>With icons</h2>
           <Button onClick={action('clicked')} icon={SanityLogoIcon} disabled={disabled}>
             With icon