6.1.0 (#960)

* fixup spec (#940) (#945) Co-authored-by: Jason Cypret <[email protected]> * Enables Global Prop Classnames in React & Enables Dark Class Prop (#942) * Adds System Props * fixup spec (#940) * Name Change * Updated Specs * More Spec Fixes * Last Two Fixes * Fixing Table Spec * Finally Fixed Rspec Tests * Removed File * Updated Changelog Co-authored-by: Jasper Furniss <[email protected]> Co-authored-by: Jason Cypret <[email protected]> * ★ Dark Mode Update Badge, Button, Circle Icon Button, Card, Checkbox and Body Kits (#948) * Adds System Props * Name Change * Updated Specs * More Spec Fixes * Last Two Fixes * Fixing Table Spec * Finally Fixed Rspec Tests * Removed File * Updated Changelog * Badge kit * Button + Circle Icon Button kits * Allow globalProps defaults * Body kit * Spec updates * Update CHANGELOG.md * Fix lint errors * Some things got stepped on Co-authored-by: Jasper Furniss <[email protected]> * Gauge Kit (#910) * Add aria, data props to React Badge kit (#901) * Add aria, data props to React Badge kit * Add to CHANGELOG * Added prop to remove card border (#900) * Added prop to remove card border * Updated changelog and spec doc * Removed trailing white space * Fixed react prop name to be camelcased * Renamed rails border prop * Updated spec doc * Migrate annotations to new version (#879) Co-authored-by: Bernardo Donadio <[email protected]> * scaffolded kit, added gauge switch case in pbCharts * fixed ghost content_tag, added props, merged gaugeOptions object * colors and tooltips corrected/standardized * restyled gauge with rounded thinner look, began typography changes * typography styling, added more doc examples * added sizing doc example * finalized props, created applied rails doc examples, react scaffolding * cleaned examples, fixed bugs, react live data experiments * found/implemented state re-rendering fix * tweaked units props, added stylings, implemented better React state solution * rescoped styles, cleaned live data doc example * moved min-max docs, scrubbed old comments, styled currency/prefix * accounted for empty/null chart_data prop, deleted more old comments, unified react/rails examples * deleted unnecessary sass styling * added CHANGELOG entry * wrote spec test * fixed spec test * fix for theme file woes, moved options for gauge over to pbChartsLightTheme * spacing and alphabetizing * added React spacing * fixed React spacing props, sizing example parity * test commit * removed subtitle prop, moved min max default comments into docs * removed subtitle prop from spec test * replaced forEach chartData formatting with mapping solution * added ability to update name field through React state * moved title text to .md files, added disable animation prop * fixed react component export * fixed rebase issues with circle chart * update gauge spec, fixed failing title spec * updated CHANGELOG * doc example housekeeping * removed commented debugger * replaced spacing with globalProps * fixed globalProps import * once more unto the CHANGELOG Co-authored-by: Kelly Ryan <[email protected]> Co-authored-by: Christina Tai <[email protected]> Co-authored-by: Stephen Marshall <[email protected]> Co-authored-by: Bernardo Donadio <[email protected]> * Cleanup 1284 (#952) * Add React Version of Time Kit (#947) * fixup spec (#940) * intial time component work * initial time commit * Rework show icon logic * Update changelog * Add code comment * Dark updates Co-authored-by: Jason Cypret <[email protected]> * Generate button toolbar kit (#908) * Added unreleased section for 5.3.0 * Add aria, data props to React Badge kit (#901) * Add aria, data props to React Badge kit * Add to CHANGELOG * Added prop to remove card border (#900) * Added prop to remove card border * Updated changelog and spec doc * Removed trailing white space * Fixed react prop name to be camelcased * Renamed rails border prop * Updated spec doc * Create ButtonGroup kit - WIP * Finish ButtonGroup kit * Remove simpleform generated files * Add spec test * Fix linting issue * Fix rspec file * Fix rspec again * Change name Button Group to Button Toolbar * Change docs examples, play with different colors for separating lines between buttons * Add hover color to scss file * Add secondary buttons * Change secondary button hover back to normal * Circle Chart Additions (#932) * Circle Kit Rounded + Block * Renamed Variables * Latest Doc Updates * Custom Colors Override Prop * Circle Chart Extensions v1 Done * Updated Changelog * Fix for Circle Chart * Moved Color Logic to Highchart Plugin * Cleanup * More Syntax Fixes * Latest * Formatting File * Cleaning Up Again * Lint Compaints * Refactoring Functions Co-authored-by: Jasper Furniss <[email protected]> * Moved Installation Kit and Logistic Kit so that they're part of Label Value Kit (#915) * Add blue to title kit (#921) * Add blue to title kit * Cover change with tests * Fix rspec test * Remove variant prop from docs * Add to CHANGELOG * Fix rspec * Change variant to enum * Fix rspec * Replace empty string with nil value in variant enum * Created Logistics category * Updated kit, example docs and changelog * Fixed example docs * Fixed changelog * Removed Installer Kit and Logsitic Kit * Updated spec doc * Updated title link prop, Label Value Kit description, and cleaned Label Value scss file * Updated details variant description Co-authored-by: Kelly Ryan <[email protected]> * Update CHANGELOG.md * Add CHANGELOG * Fix rspec file * Fix conflicts Co-authored-by: Jonathan Zazula <[email protected]> Co-authored-by: Christina Tai <[email protected]> Co-authored-by: Jasper Furniss <[email protected]> Co-authored-by: Jasper Furniss <[email protected]> Co-authored-by: Jason Cypret <[email protected]> * Fixed textarea label spacing issue (#943) * Fixed spacing issue on react version * Updated changelog Co-authored-by: Jon Zazula <[email protected]> * Update Selectable Card dark mode (#957) * Update Selectable Card dark mode * Add CHANGELOG Co-authored-by: Jon Zazula <[email protected]> * Update dark mode props on Selectable Card Icon (#956) * Update dark mode props on Selectable Card Icon * Add to CHANGELOG * Fix yarn lint violations * Change scss to fix font color on dark mode Co-authored-by: Jon Zazula <[email protected]> * Add props to Toggle React kit, create docs for React kit (#946) * Toggle React kit additions WIP * Add custom example to Toggle React kit * Add React Toggle Name file * Fix Toggle React kit * Add CHANGELOG Co-authored-by: Jon Zazula <[email protected]> * Updated Selectable Icon dark mode (#955) * Updated Selectable Icon dark mode * Add to CHANGELOG * Fix scss to correct font color Co-authored-by: Jon Zazula <[email protected]> * Bump elliptic from 6.5.2 to 6.5.3 (#936) Bumps [elliptic](https://github.com/indutny/elliptic) from 6.5.2 to 6.5.3. - [Release notes](https://github.com/indutny/elliptic/releases) - [Commits](indutny/elliptic@v6.5.2...v6.5.3) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Edit dark mode in Title kit to reflect globalProps changes (#951) * Edit dark mode in Title kit to reflect globalProps changes * Add CHANGELOG * Edit dark mode in Caption kit to reflect globalProps changes (#950) * Edit dark mode in Caption kit to reflect globalProps changes * Fix rspec file run yarn lint and add to CHANGELOG * Make Popover List Example Consistent (#949) * Adds System Props * fixup spec (#940) * Name Change * Updated Specs * More Spec Fixes * Last Two Fixes * Fixing Table Spec * Finally Fixed Rspec Tests * Removed File * Updated Changelog * Make example consistent Co-authored-by: Jasper Furniss <[email protected]> Co-authored-by: Jason Cypret <[email protected]> Co-authored-by: Jasper Furniss <[email protected]> * Update changelog (#944) Co-authored-by: Jon Zazula <[email protected]> * Fix Button Toolbar globalProps Co-authored-by: Stephen Marshall <[email protected]> Co-authored-by: Jason Cypret <[email protected]> Co-authored-by: Jasper Furniss <[email protected]> Co-authored-by: Jasper Furniss <[email protected]> Co-authored-by: Brendan Huffman <[email protected]> Co-authored-by: Kelly Ryan <[email protected]> Co-authored-by: Christina Tai <[email protected]> Co-authored-by: Bernardo Donadio <[email protected]> Co-authored-by: Cole <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
powerhome · Aug 7, 2020 · 8d9f3c4 · 8d9f3c4
1 parent d0f9583
commit 8d9f3c4
Show file tree

Hide file tree

Showing 197 changed files with 2,049 additions and 484 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,29 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+
+## [v6.1.0] 2020-8-6
+
+### Fixed
+- Updated and added to PB Toggle kit ([#946](https://github.com/powerhome/playbook/pull/946)  @kellyeryan)
+- Dark mode update to Selectable Card Icon ([#956](https://github.com/powerhome/playbook/pull/956)  @kellyeryan)
+- Dark mode update for Selectable Card kit ([#957](https://github.com/powerhome/playbook/pull/957)  @kellyeryan)
+- Fixed missing spacing under textarea label ([#943](https://github.com/powerhome/playbook/pull/943) @christinaatai)
+- Dark Mode update to Selectable Icon kit ([#955](https://github.com/powerhome/playbook/pull/955)  @kellyeryan)
+- Dark Mode Update Badge, Button, Circle Icon Button, Card, Checkbox and Body Kits ([#948](https://github.com/powerhome/playbook/pull/948)  @thestephenmarshall)
+- Cleanup #1284 ([#952](https://github.com/powerhome/playbook/pull/952) @thestephenmarshall)
+- Make Popover List Example Consistent ([#949](https://github.com/powerhome/playbook/pull/949) @thestephenmarshall)
+- Dark Mode Update for Title kit. ([#951](https://github.com/powerhome/playbook/pull/951)  @kellyeryan)
+- Fixed Caption kit to implement dark mode correctly in html ([#950](https://github.com/powerhome/playbook/pull/950)  @kellyeryan)
+- Dark Mode Update Badge, Button, Circle Icon Button, Card, Checkbox and Body Kits ([#948](https://github.com/powerhome/playbook/pull/948)  @thestephenmarshall)
+- Added React version of Time Kit ([#947](https://github.com/powerhome/playbook/pull/947) @coleerikson)
+
+### Added
+- Added Button Toolbar kit ([#908](https://github.com/powerhome/playbook/pull/908)  @kellyeryan)
+- Global Prop Additions & Dark Mode Enabled ([#942](https://github.com/powerhome/playbook/pull/942)  @jasperfurniss)
+- Gauge Kit ([#910](https://github.com/powerhome/playbook/pull/910) @bh247484)
+- Added span tag option to react version of Title kit ([#944](https://github.com/powerhome/playbook/pull/944) @coleerikson)
+
 ## [v6.0.1] 2020-7-30
 
 ### Fixed
@@ -28,6 +51,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 - Added disabled attribute to button. ([#934](https://github.com/powerhome/playbook/pull/934)  @KatherineMuedas)
 
+
 ## [v5.5.1] 2020-7-24
 
 ### Added
@@ -61,8 +85,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added aria, data props to Circle Icon Button React kit; added aria props to Circle Icon Button Rails kit.([#907](https://github.com/powerhome/playbook/pull/907) @kellyeryan)
 
 
+### Added
+- Gauge Kit ([#910](https://github.com/powerhome/playbook/pull/910) @bh247484)
+- Added border prop ([#900](https://github.com/powerhome/playbook/pull/900) @christinaatai))
+
 ## [v5.2.0] 2020-7-2
 
+### Added
+- Added aria, data props to Badge React kit; added aria props to Badge Rails kit ([#901](https://github.com/powerhome/playbook/pull/901) @kellyeryan)
+
 ### Fixed
 - Added User Badge Kit back to menu.yml ([#890](https://github.com/powerhome/playbook/pull/890) @christinaatai)
 

diff --git a/Makefile b/Makefile
@@ -25,7 +25,7 @@ install:
 	docker-compose run web yarn && bundle
 
 test:
-	docker-compose run web rake
+	docker-compose run web bin/rspec
 
 shell:
 	docker-compose run web /bin/bash --login

diff --git a/app/pb_kits/playbook/_playbook.scss b/app/pb_kits/playbook/_playbook.scss
@@ -1,5 +1,6 @@
 @import "pb_body/body";
 @import "pb_button/button";
+@import 'pb_button_toolbar/button_toolbar';
 @import "pb_caption/caption";
 @import "pb_card/card";
 @import "pb_title/title";
@@ -26,6 +27,7 @@
 @import 'pb_form/form';
 @import 'pb_form_pill/form_pill';
 @import 'pb_flex/flex';
+@import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
@@ -78,4 +80,4 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import './utilities/spacing';
+@import './utilities/spacing';
diff --git a/app/pb_kits/playbook/data/menu.yml b/app/pb_kits/playbook/data/menu.yml
@@ -10,15 +10,17 @@ kits:
   - badge
   - buttons:
     - button
+    - button_toolbar
     - circle_icon_button
   - card
   - checkbox
   - charts_and_graphs:
     - bar_graph
+    - circle_chart
+    - distribution_bar
+    - gauge
     - legend
     - line_graph
-    - distribution_bar
-    - circle_chart
 
   - filter
   - fixed_confirmation_toast

diff --git a/app/pb_kits/playbook/index.js b/app/pb_kits/playbook/index.js
@@ -5,6 +5,7 @@ export Badge from './pb_badge/_badge.jsx'
 export BarGraph from './pb_bar_graph/_bar_graph.jsx'
 export Body from './pb_body/_body.jsx'
 export Button from './pb_button/_button.jsx'
+export ButtonToolbar from './pb_button_toolbar/_button_toolbar.jsx'
 export Caption from './pb_caption/_caption.jsx'
 export Card from './pb_card/_card.jsx'
 export Checkbox from './pb_checkbox/_checkbox.jsx'
@@ -25,6 +26,7 @@ export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirm
 export Flex from './pb_flex/_flex.jsx'
 export FlexItem from './pb_flex/_flex_item.jsx'
 export FormPill from './pb_form_pill/_form_pill.jsx'
+export Gauge from './pb_gauge/_gauge.jsx'
 export Hashtag from './pb_hashtag/_hashtag.jsx'
 export Highlight from './pb_highlight/_highlight.jsx'
 export HomeAddressStreet from './pb_home_address_street/_home_address_street.jsx'

diff --git a/app/pb_kits/playbook/packs/examples.js b/app/pb_kits/playbook/packs/examples.js
@@ -19,6 +19,7 @@ import * as Badge from 'pb_badge/docs'
 import * as BarGraph from 'pb_bar_graph/docs'
 import * as Body from 'pb_body/docs'
 import * as Button from 'pb_button/docs'
+import * as ButtonToolbar from 'pb_button_toolbar/docs'
 import * as Caption from 'pb_caption/docs'
 import * as Card from 'pb_card/docs'
 import * as Checkbox from 'pb_checkbox/docs'
@@ -38,6 +39,7 @@ import * as Filter from 'pb_filter/docs'
 import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
 import * as Flex from 'pb_flex/docs'
 import * as FormPill from 'pb_form_pill/docs'
+import * as Gauge from 'pb_gauge/docs'
 import * as Hashtag from 'pb_hashtag/docs'
 import * as Highlight from 'pb_highlight/docs'
 import * as HomeAddressStreet from 'pb_home_address_street/docs'
@@ -97,6 +99,7 @@ WebpackerReact.setup({
   ...BarGraph,
   ...Body,
   ...Button,
+  ...ButtonToolbar,
   ...Caption,
   ...Card,
   ...Checkbox,
@@ -116,6 +119,7 @@ WebpackerReact.setup({
   ...FixedConfirmationToast,
   ...Flex,
   ...FormPill,
+  ...Gauge,
   ...Hashtag,
   ...Highlight,
   ...HomeAddressStreet,
@@ -168,3 +172,4 @@ WebpackerReact.setup({
   ...UserBadge,
   ...WeekdayStacked,
 })
+
diff --git a/app/pb_kits/playbook/pb_avatar/_avatar.jsx b/app/pb_kits/playbook/pb_avatar/_avatar.jsx
@@ -5,7 +5,7 @@ import classnames from 'classnames'
 import { map } from 'lodash'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 import { Image } from '../'
 
@@ -29,7 +29,7 @@ const Avatar = (props: AvatarProps) => {
   const { aria = {}, className, data = {}, name = null, id = id, imageUrl, size = 'md', status = null } = props
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(buildCss('pb_avatar_kit', size), className, spacing(props))
+  const classes = classnames(buildCss('pb_avatar_kit', size), className, globalProps(props))
 
   const initials = name && firstTwoInitials(name)
   dataProps['data-initials'] = initials

diff --git a/app/pb_kits/playbook/pb_badge/_badge.jsx b/app/pb_kits/playbook/pb_badge/_badge.jsx
@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 import {
   buildAriaProps,
@@ -13,7 +13,6 @@ import {
 type BadgeProps = {
   aria?: object,
   className?: String,
-  dark?: Boolean,
   data?: object,
   id?: String,
   rounded?: Boolean,
@@ -24,7 +23,6 @@ const Badge = (props: BadgeProps) => {
   const {
     aria = {},
     className,
-    dark = false,
     data = {},
     id,
     rounded = false,
@@ -37,9 +35,8 @@ const Badge = (props: BadgeProps) => {
     className,
     buildCss('pb_badge_kit', variant, {
       rounded: rounded,
-      dark: dark,
     }),
-    spacing(props)
+    globalProps(props)
   )
 
   return (

diff --git a/app/pb_kits/playbook/pb_badge/_badge.scss b/app/pb_kits/playbook/pb_badge/_badge.scss
@@ -37,7 +37,7 @@
     border-radius: $pb_badge_height / 2;
   }
 
-  &[class*=_dark] {
+  &.dark {
     border-width: 0;
 
     @each $color_name, $color_value in $status_colors {

diff --git a/app/pb_kits/playbook/pb_badge/badge.rb b/app/pb_kits/playbook/pb_badge/badge.rb
@@ -7,23 +7,18 @@ class Badge
 
       partial "pb_badge/badge"
 
-      prop :dark, type: Playbook::Props::Boolean, default: false
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[success warning error info neutral primary],
                      default: "neutral"
 
       def classname
-        generate_classname("pb_badge_kit", variant, rounded_class, dark_class)
+        generate_classname("pb_badge_kit", variant, rounded_class)
       end
 
     private
 
-      def dark_class
-        dark ? "dark" : nil
-      end
-
       def rounded_class
         rounded ? "rounded" : nil
       end

diff --git a/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx b/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx
@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { pbChart } from '../'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type BarGraphProps = {
   axisTitle: String,
@@ -75,7 +75,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
 
     return (
       <div
-          className={classnames(className, spacing(this.props))}
+          className={classnames(className, globalProps(this.props))}
           id={id}
       />
     )

diff --git a/app/pb_kits/playbook/pb_body/_body.jsx b/app/pb_kits/playbook/pb_body/_body.jsx
@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { Highlight } from '../'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type BodyProps = {
   aria?: object,
@@ -27,7 +27,6 @@ const Body = (props: BodyProps) => {
     className,
     children,
     color = '',
-    dark = false,
     data = {},
     highlightedText = [],
     highlighting = false,
@@ -40,10 +39,8 @@ const Body = (props: BodyProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_body_kit', color, status, {
-      dark: dark,
-    }),
-    spacing(props),
+    buildCss('pb_body_kit', color, status),
+    globalProps(props),
     className
   )
   const Tag = `${tag}`

diff --git a/app/pb_kits/playbook/pb_body/_body.scss b/app/pb_kits/playbook/pb_body/_body.scss
@@ -1,5 +1,11 @@
 @import "./body_mixins";
 
+.pb_body_kit {
+  &.dark {
+    @include pb_body_dark;
+  }
+}
+
 [class^=pb_body_kit]{
   @include pb_body;
 

diff --git a/app/pb_kits/playbook/pb_body/body.rb b/app/pb_kits/playbook/pb_body/body.rb
@@ -11,8 +11,6 @@ class Body
       prop :color, type: Playbook::Props::Enum,
                    values: %w[default light lighter dark light_dark lighter_dark],
                    default: "default"
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :status, type: Playbook::Props::Enum,
                     values: %w[neutral negative positive],
                     default: "neutral"
@@ -26,7 +24,7 @@ class Body
                               default: []
 
       def classname
-        generate_classname("pb_body_kit", color_class, dark_class, status_class)
+        generate_classname("pb_body_kit", color_class, status_class)
       end
 
       def content
@@ -41,15 +39,11 @@ def apply_highlight
         highlight_tags = pb_highlight_output.split("|")
         highlight(text, highlighted_text, highlighter: "#{highlight_tags.first.html_safe} \\1 #{highlight_tags.last.html_safe}")
       end
-     
+
       def color_class
         color != "default" ? color : nil
       end
 
-      def dark_class
-        dark ? "dark" : nil
-      end
-
       def status_class
         status != "neutral" ? status : nil
       end

diff --git a/app/pb_kits/playbook/pb_button/_button.jsx b/app/pb_kits/playbook/pb_button/_button.jsx
@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 import Icon from '../pb_icon/_icon.jsx'
 
@@ -13,7 +13,6 @@ type ButtonPropTypes = {
   },
   children?: Array<React.ReactChild>,
   className?: String | Array<String>,
-  dark: Boolean,
   disabled?: Boolean,
   fixedWidth?: Boolean,
   fullWidth?: Boolean,
@@ -34,7 +33,6 @@ type ButtonPropTypes = {
 
 const buttonClassName = (props: ButtonPropTypes) => {
   const {
-    dark = false,
     disabled = false,
     fullWidth = false,
     loading = false,
@@ -48,7 +46,6 @@ const buttonClassName = (props: ButtonPropTypes) => {
   className += `${variant !== null ? `_${variant}` : ''}`
   className += `${type !== null ? `_${type}` : ''}`
   className += `${size !== null ? `_${size}` : ''}`
-  className += `${dark === true ? '_dark' : ''}`
   className += `${fullWidth ? '_block' : ''}`
   className += disabled ? '_disabled' : '_enabled'
   className += loading ? '_loading' : ''
@@ -85,7 +82,7 @@ const Button = (props: ButtonPropTypes) => {
   } = props
 
   const buttonAria = buttonAriaProps(props)
-  const css = classnames(buttonClassName(props), className, spacing(props))
+  const css = classnames(buttonClassName(props), className, globalProps(props))
   const loadingIcon = (
     <div className="loading-icon">
       <Icon

diff --git a/app/pb_kits/playbook/pb_button/_button.scss b/app/pb_kits/playbook/pb_button/_button.scss
@@ -28,7 +28,7 @@
     @include pb_button_loading(true);
   }
   // Dark Variants =============
-  &[class*=_dark]  {
+  &.dark  {
     &[class*=_primary]  {
       @include pb_button_primary_dark;
     }