Updated Selectable Icon dark mode

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Updated
+- Dark Mode update to Selectable Icon kit ([#955](https://github.com/powerhome/playbook/pull/955)  @kellyeryan)
+
 ### Added
 - 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)

app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.jsx

@@ -10,12 +10,13 @@ import {
   buildDataProps,
 } from '../utilities/props'
 
+import { globalProps } from '../utilities/globalProps.js'
+
 type SelectableIconProps = {
   aria?: Object,
   checked?: Boolean,
   className?: String,
   disabled?: Boolean,
-  dark?: Boolean,
   data?: Object,
   icon: String,
   inputId: String,
@@ -30,7 +31,6 @@ const SelectableIcon = ({
   aria = {},
   className,
   checked = false,
-  dark = false,
   data = {},
   disabled = false,
   icon,
@@ -45,13 +45,11 @@ const SelectableIcon = ({
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const css = buildCss({
-    'pb_selectable_icon_kit': true,
-    'checked': checked,
-    'dark': dark,
-    'disabled': disabled,
-    'enabled': !disabled,
-  })
+  const classes = classnames(buildCss('pb_selectable_icon_kit',
+    { 'checked': checked,
+      'disabled': disabled,
+      'enabled': !disabled },
+    className), globalProps(props))
 
   const inputType = multi === false ? 'radio' : 'checkbox'
 
@@ -61,7 +59,7 @@ const SelectableIcon = ({
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, className)}
+        className={classes}
     >
       <If condition={inputs === 'disabled'}>
         <>

app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb

@@ -9,8 +9,6 @@ class SelectableIcon
 
       # Icon props
       prop :icon, type: Playbook::Props::String
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       # Title text
       prop :text, type: Playbook::Props::String
 
@@ -30,7 +28,7 @@ class SelectableIcon
                     default: "enabled"
 
       def classname
-        generate_classname("pb_selectable_icon_kit", checked_class, dark_class, enabled_disabled_class)
+        generate_classname("pb_selectable_icon_kit", checked_class, enabled_disabled_class)
       end
 
       def input_id_present
@@ -43,10 +41,6 @@ def checked_class
         checked ? "checked" : nil
       end
 
-      def dark_class
-        dark ? "dark" : nil
-      end
-
       def enabled_disabled_class
         disabled ? "disabled" : "enabled"
       end

spec/pb_kits/playbook/kits/selectable_icon_spec.rb

@@ -22,7 +22,7 @@
     it "returns namespaced class name", :aggregate_failures do
       expect(subject.new({}).classname).to eq "pb_selectable_icon_kit_enabled"
       expect(subject.new(classname: "additional_class").classname).to eq "pb_selectable_icon_kit_enabled additional_class"
-      expect(subject.new(dark: true).classname).to eq "pb_selectable_icon_kit_dark_enabled dark"
+      expect(subject.new(dark: true).classname).to eq "pb_selectable_icon_kit_enabled dark"
       expect(subject.new(disabled: true).classname).to eq "pb_selectable_icon_kit_disabled"
     end
   end