feat(button): add dark buttons (#155)

* feat(button): add dark buttons * add note in docs * add stories
wework · Jul 14, 2019 · d9e7857 · d9e7857
1 parent 7160078
commit d9e7857
Show file tree

Hide file tree

Showing 10 changed files with 253 additions and 4 deletions.
diff --git a/docs/components/button.md b/docs/components/button.md
@@ -14,6 +14,13 @@ To add an icon, use the `.ray-button__icon` class on an element, usually an svg.
  variation="button--primary"
  >
 </component>
+<component
+ name="Primary button dark"
+ component="button"
+ background="dark"
+ variation="button--primary--dark"
+ >
+</component>
 <component
  name="Primary button (RTL)"
  component="button"
@@ -26,6 +33,13 @@ To add an icon, use the `.ray-button__icon` class on an element, usually an svg.
  variation="button--secondary"
  >
 </component>
+<component
+ name="Secondary button dark"
+ component="button"
+ background="dark"
+ variation="button--secondary--dark"
+ >
+</component>
 <component
  name="Secondary button (RTL)"
  component="button"
@@ -38,6 +52,13 @@ To add an icon, use the `.ray-button__icon` class on an element, usually an svg.
  variation="button--tertiary"
  >
 </component>
+<component
+ name="Tertiary button dark"
+ component="button"
+ background="dark"
+ variation="button--tertiary--dark"
+ >
+</component>
 <component
  name="Tertiary button (RTL)"
  component="button"
@@ -80,3 +101,4 @@ Use these modifiers with `.ray-button` class.
 | `.ray-button--danger` | Selector for applying danger button styles |
 | `.ray-button--tertiary` | Selector for applying tertiary button styles |
 | `.ray-button--compact` | Selector for applying compact button styles |
+| `.ray-button--dark` | Selector for applying dark button styles |
diff --git a/docs/html/button/button--primary--dark.html b/docs/html/button/button--primary--dark.html
@@ -0,0 +1,34 @@
+<button class="ray-button ray-button--primary ray-button--dark">
+ Click Me
+</button>
+<button class="ray-button ray-button--primary ray-button--dark" disabled>
+ Click Me
+</button>
+<button class="ray-button ray-button--primary ray-button--dark">
+ Click Me
+ <svg
+ class="ray-button__icon"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 25 25"
+ >
+ <g>
+ <path
+ d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
+ />
+ </g>
+ </svg>
+</button>
+<button class="ray-button ray-button--primary ray-button--dark" disabled>
+ Click Me
+ <svg
+ class="ray-button__icon"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 25 25"
+ >
+ <g>
+ <path
+ d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
+ />
+ </g>
+ </svg>
+</button>
diff --git a/docs/html/button/button--secondary--dark.html b/docs/html/button/button--secondary--dark.html
@@ -0,0 +1,34 @@
+<button class="ray-button ray-button--secondary ray-button--dark">
+ Click Me
+</button>
+<button class="ray-button ray-button--secondary ray-button--dark" disabled>
+ Click Me
+</button>
+<button class="ray-button ray-button--secondary ray-button--dark">
+ Click Me
+ <svg
+ class="ray-button__icon"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 25 25"
+ >
+ <g>
+ <path
+ d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
+ />
+ </g>
+ </svg>
+</button>
+<button class="ray-button ray-button--secondary ray-button--dark" disabled>
+ Click Me
+ <svg
+ class="ray-button__icon"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 25 25"
+ >
+ <g>
+ <path
+ d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
+ />
+ </g>
+ </svg>
+</button>
diff --git a/docs/html/button/button--tertiary--dark.html b/docs/html/button/button--tertiary--dark.html
@@ -0,0 +1,35 @@
+<button class="ray-button ray-button--tertiary ray-button--dark">
+ Click Me
+</button>
+<button class="ray-button ray-button--tertiary ray-button--dark" disabled>
+ Click Me
+</button>
+<button class="ray-button ray-button--tertiary ray-button--dark">
+ Click Me
+ <svg
+ class="ray-button__icon"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 25 25"
+ >
+ <g>
+ <path
+ d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
+ />
+ </g>
+ </svg>
+</button>
+
+<button class="ray-button ray-button--tertiary ray-button--dark" disabled>
+ Click Me
+ <svg
+ class="ray-button__icon"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 25 25"
+ >
+ <g>
+ <path
+ d="M12.5,6C5.5964,6,0,12.6211,0,13.5S5.5964,21,12.5,21,25,14.4375,25,13.5,19.4036,6,12.5,6Zm0,11A3.5,3.5,0,1,1,16,13.5,3.5,3.5,0,0,1,12.5,17Z"
+ />
+ </g>
+ </svg>
+</button>
diff --git a/packages/core/src/components/button/_button.scss b/packages/core/src/components/button/_button.scss
@@ -89,6 +89,34 @@
  color: rgba($ray-color-white, 0.4);
  }
 
+ &.#{$ray-class-prefix}button--dark {
+ background-color: $ray-color-white;
+ border-color: $ray-color-white;
+ color: $ray-color-blue-50;
+
+ @include ray-breakpoint(desktop) {
+ &:hover {
+ background-color: $ray-color-gray-10;
+ border-color: $ray-color-gray-10;
+ }
+ }
+
+ .#{$ray-accessibility-class} &:focus {
+ box-shadow: 0 0 0 3px transparentize($ray-color-white, 0.75);
+ }
+
+ &:active {
+ background-color: $ray-color-gray-30;
+ border-color: $ray-color-gray-30;
+ }
+
+ &[disabled] {
+ background-color: $ray-color-gray-50;
+ border-color: $ray-color-gray-50;
+ color: rgba($ray-color-blue-50, 0.4);
+ }
+ }
+
  &.#{$ray-class-prefix}button--danger {
  background-color: $ray-color-red-50;
  border-color: $ray-color-red-50;
@@ -135,6 +163,33 @@
  background-color: $ray-color-blue-20;
  }
 
+ &.#{$ray-class-prefix}button--dark {
+ background-color: transparent;
+ border-color: $ray-color-white;
+ color: $ray-color-white;
+
+ @include ray-breakpoint(desktop) {
+ &:hover {
+ background-color: rgba($ray-color-white, 0.1);
+ border-color: $ray-color-gray-10;
+ }
+ }
+
+ .#{$ray-accessibility-class} &:focus {
+ box-shadow: 0 0 0 3px transparentize($ray-color-white, 0.75);
+ }
+
+ &:active {
+ background-color: rgba($ray-color-white, 0.2);
+ }
+
+ &[disabled] {
+ background-color: transparent;
+ color: rgba($ray-color-white, 0.6);
+ border-color: rgba($ray-color-white, 0.6);
+ }
+ }
+
  &.#{$ray-class-prefix}button--danger {
  border-color: $ray-color-red-50;
  color: $ray-color-red-50;
@@ -218,6 +273,31 @@
  background-color: $ray-color-blue-10;
  }
 
+ &.#{$ray-class-prefix}button--dark {
+ color: $ray-color-white;
+
+ @include ray-breakpoint(desktop) {
+ &:hover {
+ background-color: hsl(0, 0, 20%);
+ border-color: hsl(0, 0, 20%);
+ }
+ }
+
+ .#{$ray-accessibility-class} &:focus {
+ box-shadow: 0 0 0 3px transparentize($ray-color-white, 0.75);
+ }
+
+ &:active {
+ background-color: rgba($ray-color-white, 0.2);
+ }
+
+ &[disabled] {
+ background-color: transparent;
+ border-color: transparent;
+ color: rgba($ray-color-white, 0.6);
+ }
+ }
+
  &.#{$ray-class-prefix}button--danger {
  color: $ray-color-red-50;
 

diff --git a/packages/core/stories/button.stories.js b/packages/core/stories/button.stories.js
@@ -138,4 +138,40 @@ storiesOf('Button', module)
  </button>
  </>
  ))
+ .add('dark', () => (
+ <div
+ style={{
+ backgroundColor: 'hsla(0, 0%, 20%, 1)',
+ padding: '1rem'
+ }}
+ >
+ <button className="ray-button ray-button--primary ray-button--dark">
+ Click me
+ </button>
+ <button
+ className="ray-button ray-button--primary ray-button--dark"
+ disabled
+ >
+ Disabled
+ </button>
+ <button className="ray-button ray-button--secondary ray-button--dark">
+ Click me
+ </button>
+ <button
+ className="ray-button ray-button--secondary ray-button--dark"
+ disabled
+ >
+ Disabled
+ </button>
+ <button className="ray-button ray-button--tertiary ray-button--dark">
+ Click me
+ </button>
+ <button
+ className="ray-button ray-button--tertiary ray-button--dark"
+ disabled
+ >
+ Disabled
+ </button>
+ </div>
+ ))
  .add('as link', () => <button className="ray-link">button as link</button>);
diff --git a/packages/docs-app/src/components/CodeExample/CodeExample.js b/packages/docs-app/src/components/CodeExample/CodeExample.js
@@ -58,7 +58,7 @@ class CodeExample extends Component {
  });
 
  const expandBtnClass = classnames(
- 'ray-button ray-button--tertiary ray-button--compact',
+ 'ray-button ray-button--tertiary ray-button--compact ray-button--dark',
  {
  'code-example__expand': this.state.showBtn,
  'code-example__expand--hidden': !this.state.showBtn

diff --git a/packages/docs-app/src/components/ComponentCode/ComponentCode.js b/packages/docs-app/src/components/ComponentCode/ComponentCode.js
@@ -22,7 +22,8 @@ export default class ComponentCode extends React.Component {
  codepen,
  hasreactversion,
  variation,
- experimental
+ experimental,
+ background
  } = this.props;
 
  let htmlFile;
@@ -87,6 +88,7 @@ export default class ComponentCode extends React.Component {
  hideViewFullRender={this.props.hideViewFullRender}
  hasReactVersion={hasreactversion}
  experimental={experimental}
+ background={background}
  />
  </div>
  );

diff --git a/packages/docs-app/src/components/ComponentCode/component-code.scss b/packages/docs-app/src/components/ComponentCode/component-code.scss
@@ -27,6 +27,10 @@
  background-color: $ray-color-white;
  }
 
+ &--dark {
+ background-color: hsl(0, 0%, 10%);
+ }
+
  &--rendered {
  display: flex;
  justify-content: center;

diff --git a/packages/docs-app/src/components/ComponentExample/ComponentExample.js b/packages/docs-app/src/components/ComponentExample/ComponentExample.js
@@ -17,7 +17,8 @@ class ComponentExample extends Component {
  variation: PropTypes.string,
  hideViewFullRender: PropTypes.bool,
  codepenSlug: PropTypes.string,
- experimental: PropTypes.string
+ experimental: PropTypes.string,
+ background: PropTypes.string
  };
 
  static _initHandles = new WeakMap();
@@ -112,7 +113,8 @@ class ComponentExample extends Component {
 
  const liveBackgroundClasses = classnames(
  'component-example__live',
- `component-example__live--${component}`
+ `component-example__live--${component}`,
+ { 'component-example__live--dark': this.props.background === 'dark' }
  );
 
  const componentLink = `https://codepen.io/team/wework/full/${codepenSlug}/`;