fix(text-fields): Add pointer cursor (#31)

wework · Feb 27, 2019 · ee97a07 · ee97a07
1 parent c5a7976
commit ee97a07
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 11 deletions.
diff --git a/packages/ray/lib/_forms.scss b/packages/ray/lib/_forms.scss
@@ -28,6 +28,7 @@
  transition: all 0.125s ease;
  height: 100%;
  width: 100%;
+ cursor: pointer;
 
  // handle truncating label
  white-space: nowrap;
@@ -48,6 +49,7 @@
  padding: $field-v-spacing $field-h-spacing 0;
  outline: 0;
  border: 0;
+ cursor: pointer;
 
  &:focus,
  &:not(:placeholder-shown) {
@@ -88,7 +90,8 @@
  pointer-events: none;
  }
 
- input::placeholder, textarea::placeholder {
+ input::placeholder,
+ textarea::placeholder {
  color: $ray-color-text-light !important;
  }
 

diff --git a/packages/ray/stories/radio-checkbox.stories.js b/packages/ray/stories/radio-checkbox.stories.js
@@ -3,24 +3,41 @@ import { storiesOf } from '@storybook/react';
 
 import withPadding from './util/withPadding';
 
-storiesOf('Forms - Radio buttons and Checkboxes', module)
+storiesOf('Radio & Checkbox', module)
  .addWithJSX('Radio button', () =>
  withPadding(
  <React.Fragment>
  <div className="ray-radio">
- <input id="radio-1" name="radio-button-story" type="radio" className="ray-radio__input" />
+ <input
+ id="radio-1"
+ name="radio-button-story"
+ type="radio"
+ className="ray-radio__input"
+ />
  <label htmlFor="radio-1">Choose me</label>
  </div>
  <div className="ray-radio">
- <input id="radio-2" name="radio-button-story" type="radio" className="ray-radio__input" />
+ <input
+ id="radio-2"
+ name="radio-button-story"
+ type="radio"
+ className="ray-radio__input"
+ />
  <label htmlFor="radio-2">Choose me</label>
  </div>
  <div className="ray-radio">
- <input id="radio-3" name="radio-button-story" type="radio" className="ray-radio__input" disabled />
+ <input
+ id="radio-3"
+ name="radio-button-story"
+ type="radio"
+ className="ray-radio__input"
+ disabled
+ />
  <label htmlFor="radio-3">Choose me</label>
  </div>
  </React.Fragment>
- ))
+ )
+ )
  .addWithJSX('Checkbox', () =>
  withPadding(
  <div className="ray-checkbox">
@@ -32,7 +49,12 @@ storiesOf('Forms - Radio buttons and Checkboxes', module)
  .addWithJSX('Checkbox - disabled', () =>
  withPadding(
  <div className="ray-checkbox">
- <input id="check" type="checkbox" className="ray-checkbox__input" disabled />
+ <input
+ id="check"
+ type="checkbox"
+ className="ray-checkbox__input"
+ disabled
+ />
  <label htmlFor="check">Check me out</label>
  </div>
  )

diff --git a/packages/ray/stories/textFields.stories.js b/packages/ray/stories/textFields.stories.js
@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 
 import withPadding from './util/withPadding';
 
-storiesOf('Forms - Text Fields', module)
+storiesOf('Text Field', module)
  .addWithJSX('Text field', () =>
  withPadding(
  <div className="ray-field">
@@ -168,15 +168,23 @@ storiesOf('Forms - Text Fields', module)
  .addWithJSX('Text field - compact', () =>
  withPadding(
  <div className="ray-field ray-field--compact">
- <input id="email" type="email" placeholder="[email protected]" />
+ <input
+ id="email"
+ type="email"
+ placeholder="[email protected]"
+ />
  <label htmlFor="email">Email address</label>
  </div>
  )
  )
  .addWithJSX('Text field, active - compact', () =>
  withPadding(
  <div className="ray-field ray-field--active ray-field--compact">
- <input id="email" type="email" placeholder="[email protected]" />
+ <input
+ id="email"
+ type="email"
+ placeholder="[email protected]"
+ />
  <label htmlFor="email">Email address</label>
  </div>
  )
@@ -240,7 +248,10 @@ storiesOf('Forms - Text Fields', module)
  </div>
  <div className="ray-field-wrapper">
  <div className="ray-field ray-field__textarea ray-field--compact">
- <textarea id="textarea" placeholder="Tell me, uh, something about yourself" />
+ <textarea
+ id="textarea"
+ placeholder="Tell me, uh, something about yourself"
+ />
  <label htmlFor="textarea">Notes</label>
  </div>
  </div>