playbook_ui 7.0.1.pre.alpha8 → 7.0.1.pre.alpha9

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js

@@ -1,2 +1 @@
 export { default as MultipleUsersStackedDefault } from './_multiple_users_stacked_default.jsx'
-export { default as MultipleUsersStackedDark } from './_multiple_users_stacked_dark.jsx'

data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss

@@ -45,11 +45,13 @@ $selector: ".pb_nav_list";
         color: $text_lt_default;
       }
 
-      &:hover {
-        color: $primary;
-        #{$selector}_item_icon,
-        #{$selector}_item_text {
+      @media (hover:hover) {
+        &:hover {
           color: $primary;
+          #{$selector}_item_icon,
+          #{$selector}_item_text {
+            color: $primary;
+          }
         }
       }
     }

data/app/pb_kits/playbook/pb_nav/_nav.jsx

@@ -36,8 +36,13 @@ const Nav = (props: NavProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const cardCss = classnames(buildCss('pb_nav_list', variant, orientation, {
-    highlight: highlight }, className, globalProps(props)))
+  const cardCss = classnames(
+    buildCss('pb_nav_list', variant, orientation, {
+      highlight: highlight,
+    }),
+    className,
+    globalProps(props)
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -46,13 +46,15 @@ $selector: ".pb_nav_list";
         transition-property: color, border-color, background-color;
         transition-duration: 0.15s;
         transition-timing-function: $bezier;
-        &:hover {
-          background-color: rgba($primary, 0.03);
-          [class*=_icon] {
-            color: $primary;
-          }
-          [class*=_text] {
-            color: $primary;
+        @media (hover:hover) {
+          &:hover {
+            background-color: rgba($primary, 0.03);
+            [class*=_icon] {
+              color: $primary;
+            }
+            [class*=_text] {
+              color: $primary;
+            }
           }
         }
         [class*=_icon_left] {
@@ -110,13 +112,15 @@ $selector: ".pb_nav_list";
           flex: 1;
           font-weight: $regular;
         }
-        &:hover {
-          background-color: rgba($primary, 0.03);
-          [class*=_icon] {
-            color: $primary;
-          }
-          [class*=_text] {
-            color: $primary;
+        @media (hover:hover) {
+          &:hover {
+            background-color: rgba($primary, 0.03);
+            [class*=_icon] {
+              color: $primary;
+            }
+            [class*=_text] {
+              color: $primary;
+            }
           }
         }
       }

data/app/pb_kits/playbook/pb_pill/docs/example.yml

@@ -2,10 +2,8 @@ examples:
   
   rails:
   - pill_default: Default
-  - pill_dark: Dark
+ 
   
   
   react:
   - pill_default: Default
-  - pill_dark: Dark
-  

data/app/pb_kits/playbook/pb_pill/docs/index.js

@@ -1,2 +1 @@
 export { default as PillDefault } from './_pill_default.jsx'
-export { default as PillDark } from './_pill_dark.jsx'

data/app/pb_kits/playbook/pb_progress_pills/docs/example.yml

@@ -3,12 +3,9 @@ examples:
   rails:
   - progress_pills_default: Default
   - progress_pills_status: Status
-  - progress_pills_dark: Dark
-  - progress_pills_status_dark: Status Dark
+
 
 
   react:
   - progress_pills_default: Default
   - progress_pills_status: Status
-  - progress_pills_dark: Dark
-  - progress_pills_status_dark: Status Dark

data/app/pb_kits/playbook/pb_progress_pills/docs/index.js

@@ -1,4 +1,2 @@
 export { default as ProgressPillsDefault } from './_progress_pills_default.jsx'
 export { default as ProgressPillsStatus } from './_progress_pills_status.jsx'
-export { default as ProgressPillsDark } from './_progress_pills_dark.jsx'
-export { default as ProgressPillsStatusDark } from './_progress_pills_status_dark.jsx'

data/app/pb_kits/playbook/pb_progress_step/docs/example.yml

@@ -2,12 +2,10 @@ examples:
   rails:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
-  - progress_step_dark: Dark
   - progress_step_tracker: Tracker
   
   
   react:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
-  - progress_step_dark: Dark
   - progress_step_tracker: Tracker

data/app/pb_kits/playbook/pb_progress_step/docs/index.js

@@ -1,4 +1,3 @@
 export { default as ProgressStepDefault } from './_progress_step_default.jsx'
 export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
-export { default as ProgressStepDark } from './_progress_step_dark.jsx'
 export { default as ProgressStepTracker } from './_progress_step_tracker.jsx'

data/app/pb_kits/playbook/pb_progress_step/progress_step.rb

@@ -13,8 +13,8 @@ module Playbook
       prop :icon, type: Playbook::Props::Boolean,
                   default: false
       prop :variant, type: Playbook::Props::Enum,
-                         values: %w[default tracker],
-                         default: "default"
+                     values: %w[default tracker],
+                     default: "default"
       def classname
         generate_classname("pb_progress_step_kit", orientation, icon_class, variant_class)
       end

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb

@@ -14,7 +14,6 @@ module Playbook
       def classname
         generate_classname("pb_progress_step_item", status)
       end
-
     end
   end
 end

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -5,6 +5,7 @@
 
 [class^=pb_radio_kit] {
   display: inline-flex;
+  cursor: pointer;
 
   .pb_radio_button {
     width: 22px;
@@ -18,8 +19,10 @@
     transition-timing-function: $easeIn;
   }
 
-  &:hover .pb_radio_button {
-    border-color: $primary_action;
+  @media (hover:hover) {
+    &:hover .pb_radio_button {
+      border-color: $primary_action;
+    }
   }
 
   input {
@@ -37,8 +40,10 @@
       border: 6px solid $primary;
     }
 
-    &:hover .pb_radio_button {
-      border-color: $primary_action;
+    @media (hover:hover) {
+      &:hover .pb_radio_button {
+        border-color: $primary_action;
+      }
     }
     &.error {
       > .pb_radio_button {

data/app/pb_kits/playbook/pb_radio/docs/example.yml

@@ -2,14 +2,10 @@ examples:
 
   rails:
   - radio_default: Default
-  - radio_dark: Dark
   - radio_custom: Custom
   - radio_error: With Error
-  - radio_dark_error: With Error
 
   react:
   - radio_default: Default
-  - radio_dark: Dark
   - radio_custom: Custom
   - radio_error: With Error
-  - radio_dark_error: Dark With Error

data/app/pb_kits/playbook/pb_radio/docs/index.js

@@ -1,5 +1,2 @@
 export { default as RadioDefault } from './_radio_default.jsx'
-export { default as RadioDark } from './_radio_dark.jsx'
 export { default as RadioCustom } from './_radio_custom.jsx'
-export { default as RadioError } from './_radio_error.jsx'
-export { default as RadioDarkError } from './_radio_dark_error.jsx'

data/app/pb_kits/playbook/pb_section_separator/docs/example.yml

@@ -5,11 +5,10 @@ examples:
   - section_separator_line: Line Separator
   - section_separator_text_background: Background Variant
   - section_separator_vertical: Vertical
-  - section_separator_dark: Dark
+
 
   react:
   - section_separator_text: Text Separator
   - section_separator_line: Line Separator
   - section_separator_text_background: Background Variant
   - section_separator_vertical: Vertical
-  - section_separator_dark: Dark

data/app/pb_kits/playbook/pb_section_separator/docs/index.js

@@ -2,4 +2,3 @@ export { default as SectionSeparatorLine } from './_section_separator_line.jsx'
 export { default as SectionSeparatorText } from './_section_separator_text.jsx'
 export { default as SectionSeparatorTextBackground } from './_section_separator_text_background.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
-export { default as SectionSeparatorDark } from './_section_separator_dark.jsx'

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -12,8 +12,10 @@
     cursor: pointer;
     box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
     padding-right: $space_lg;
-    &:hover, &:active, &:focus {
-      background-color: $focus_input_light;
+    @media (hover:hover) {
+      &:hover, &:active, &:focus {
+        background-color: $focus_input_light;
+      }
     }
     &:disabled ~ .pb_select_kit_caret {
       opacity: 0.5;
@@ -60,8 +62,10 @@
       @include pb_title_dark;
       background: $focus_input_dark;
       box-shadow: inset 0 -11px 20px rgba($white, 0.05);
-      &:hover, &:active, &:focus {
-        background-color: tint($focus_input_dark, 5%);
+      @media (hover:hover) {
+        &:hover, &:active, &:focus {
+          background-color: tint($focus_input_dark, 5%);
+        }
       }
       text-shadow: 0 0 0 $text_dk_default;
     }

data/app/pb_kits/playbook/pb_select/docs/example.yml

@@ -8,9 +8,8 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
-  - select_dark: Dark Select
   - select_error: Select w/ Error
-  - select_dark_error: Select Dark w/ Error
+
 
 
   react:
@@ -21,6 +20,4 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
-  - select_dark: Dark Select
   - select_error: Select w/ Error
-  - select_dark_error: Select Dark w/ Error

data/app/pb_kits/playbook/pb_select/docs/index.js

@@ -1,5 +1,4 @@
 export { default as SelectDefault } from './_select_default.jsx'
-export { default as SelectDark } from './_select_dark.jsx'
 export { default as SelectBlank } from './_select_blank.jsx'
 export { default as SelectDisabledOptions } from './_select_disabled_options.jsx'
 export { default as SelectDisabled } from './_select_disabled.jsx'
@@ -7,4 +6,3 @@ export { default as SelectRequired } from './_select_required.jsx'
 export { default as SelectCustomSelect } from './_select_custom_select.jsx'
 export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
 export { default as SelectError } from './_select_error.jsx'
-export { default as SelectDarkError } from './_select_dark_error.jsx'

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -18,9 +18,11 @@ $pb_selectable_card_border: 2px;
     padding: $space_sm + 1;
     cursor: pointer;
 
-    &:hover {
-      box-shadow: $shadow-deep;
-      border-color: $slate;
+    @media (hover:hover) {
+      &:hover {
+        box-shadow: $shadow-deep;
+        border-color: $slate;
+      }
     }
 
     .pb_selectable_card_circle {
@@ -66,6 +68,7 @@ $pb_selectable_card_border: 2px;
   }
 
   &.dark {
+    color: $white;
     label {
       @include pb_card_dark;
       background: transparent;

data/app/pb_kits/playbook/pb_selectable_card/docs/example.yml

@@ -4,10 +4,9 @@ examples:
   - selectable_card_default: Default
   - selectable_card_single_select: Single Select
   - selectable_card_block: Block
-  - selectable_card_dark: Dark
+
   
   react:
   - selectable_card_default: Default
   - selectable_card_single_select: Single Select
   - selectable_card_block: Block
-  - selectable_card_dark: Dark

data/app/pb_kits/playbook/pb_selectable_card/docs/index.js

@@ -1,4 +1,3 @@
 export { default as SelectableCardDefault } from './_selectable_card_default.jsx'
 export { default as SelectableCardSingleSelect } from './_selectable_card_single_select.jsx'
-export { default as SelectableCardDark } from './_selectable_card_dark.jsx'
 export { default as SelectableCardBlock } from './_selectable_card_block.jsx'

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx

@@ -51,11 +51,15 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const classes = classnames(buildCss('pb_selectable_card_icon_kit',
-    { 'checked': checked,
-      'disabled': disabled,
-      'enabled': !disabled },
-    className), globalProps(props))
+  const classes = classnames(
+    buildCss('pb_selectable_card_icon_kit', {
+      checked: checked,
+      disabled: disabled,
+      enabled: !disabled,
+    }),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/example.yml

@@ -4,13 +4,10 @@ examples:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
-  - selectable_card_icon_dark: Dark
+
   
   
   react:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
-  - selectable_card_icon_dark: Dark
-
-  

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/index.js

@@ -1,4 +1,3 @@
 export { default as SelectableCardIconDefault } from './_selectable_card_icon_default.jsx'
 export { default as SelectableCardIconCheckmark } from './_selectable_card_icon_checkmark.jsx'
 export { default as SelectableCardIconSingleSelect } from './_selectable_card_icon_single_select.jsx'
-export { default as SelectableCardIconDark } from './_selectable_card_icon_dark.jsx'

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.jsx

@@ -45,11 +45,15 @@ const SelectableIcon = ({
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const classes = classnames(buildCss('pb_selectable_icon_kit',
-    { 'checked': checked,
-      'disabled': disabled,
-      'enabled': !disabled },
-    className), globalProps(props))
+  const classes = classnames(
+    buildCss('pb_selectable_icon_kit', {
+      checked: checked,
+      disabled: disabled,
+      enabled: !disabled,
+    }),
+    globalProps(props),
+    className
+  )
 
   const inputType = multi === false ? 'radio' : 'checkbox'
 

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss

@@ -1,82 +1,80 @@
+@import "../tokens/transition";
+
 [class^=pb_selectable_icon] {
 
-  text-align: center;
-  cursor: pointer;
+	text-align: center;
+	cursor: pointer;
+	transition: all $transition_short ease;
+	@media (hover:hover) {
+		&:hover * {
+			transition: all $transition_short ease;
+			transform: translateY(-2px);
+		}
+	}
 
-  :hover * {
-		filter: drop-shadow(0 0 8px rgba($shadow, 0.25));
-		transition-duration: $transition_short;
-		transition-timing-function: $easeIn;
-  }
+	* {
+		cursor: pointer;
+	}
 
-  * {
-    cursor: pointer;
-  }
+	h4 {
+		margin-top: $space_xs !important;
+		user-select: none;
+		transition: color $transition_short ease;
+	}
 
-  h4 {
-    margin-top: $space_xs !important;
-    user-select: none;
-  }
+	label {
+		transition: color $transition_short ease;
+	}
 
-  &[class*=_disabled] {
+	&[class*=_disabled] {
 		opacity: $opacity_6;
 		cursor: not-allowed;
-
 		* {
-				cursor: not-allowed;
+			cursor: not-allowed;
 		}
 	}
 	
-  input[type="checkbox"],
-  input[type="radio"] {
+	input[type="checkbox"],
+	input[type="radio"] {
 		-webkit-appearance: none;
 		-moz-appearance: none;
 		display: none;
 		appearance: none;
-
-		transition-property: color;
-		transition-duration: $transition_short;
+		transition: color $transition_short ease;
 
 		&:checked ~ label * {
-			transition-timing-function: $easeIn;
+			transition: color $transition_short ease;
 			color: $primary;
 		}
 		
 		&:not(:checked) ~ label {
-			transition-timing-function: $easeOut;
+			transition: color $transition_short ease;
 			color: $slate;
 
-			h4 {
-				transition-delay: .15s;
-			}
 		}
 	}
 
 
-  &.dark {
-
+	&.dark {
 		input[type="checkbox"],
 		input[type="radio"] {
 			-webkit-appearance: none;
 			-moz-appearance: none;
 			display: none;
 			appearance: none;
-
-			transition-property: color;
-			transition-duration: $transition_short;
-
-
+			transition: color $transition_short ease;
+			
 			&:checked ~ label * {
-				transition-timing-function: $easeIn;
+				transition: color $transition_short ease;
 				color: $active_dark !important;
 			}
 				
 			&:not(:checked) ~ label {
-				transition-timing-function: $easeOut;
+				transition: color $transition_short ease;
 				color: $text_dk_lighter;
 
 				h4 {
-					transition-delay: .15s;
+					transition: color $transition_short ease;
 					color: $text_dk_default;
 				}
 			}