RubyGems - playbook_ui - Versions diffs - 7.0.0.pre.alpha7 → 7.0.0 - Mend

playbook_ui 7.0.0.pre.alpha7 → 7.0.0

Files changed (471) hide show

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

@@ -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,
+    }),
+    globalProps(props),
+    className
+  )
   return (
     <div

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

@@ -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;
+            }
           }
         }
       }
@@ -132,7 +136,35 @@ $selector: ".pb_nav_list";
     [class*=_active] {
       background-color: $active_light;
     }
+    &[class*=dark]{
+      [class*=_active] {
+      background-color: rgba($white, $opacity_1);
+    }
+    }
   }
+  &[class*=dark]{
+    background: tint($bg_dark,10%);
+    [class*=pb_nav_list_kit_item]{
+      border-color: rgba($white, $opacity_1);
+      &[class*=_active] [class*=_link]{
+        border-color: $white;
+        [class*=_text],[class*=_icon]{
+          color: $text_dk_default;
+        }
+      }
+      [class*=_link] {
+        [class*=_text],[class*=_icon]{
+          color: $text_dk_lighter;
+        }
+        &:hover{
+          background-color: rgba($white, $opacity_1);
+          [class*=_icon],[class*=_text] {
+            color: $white;
+          }
+        }
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx CHANGED

@@ -1,17 +1,26 @@
 import React from 'react'
 import { OnlineStatus } from '../../'
-const OnlineStatusDefault = () => (
+const OnlineStatusDefault = (props) => (
   <>
-    <OnlineStatus status="offline" />
+    <OnlineStatus
+        status="offline"
+        {...props}
+    />
     <br />
-    <OnlineStatus status="online" />
+    <OnlineStatus
+        status="online"
+        {...props}
+    />
     <br />
-    <OnlineStatus status="away" />
+    <OnlineStatus
+        status="away"
+        {...props}
+    />
   </>
 )

data/app/pb_kits/playbook/pb_online_status/docs/example.yml CHANGED

@@ -2,8 +2,7 @@ examples:
   rails:
   - online_status_default: Default
-  - online_status_dark: Dark
   react:
   - online_status_default: Default
-  - online_status_dark: Dark

data/app/pb_kits/playbook/pb_online_status/docs/index.js CHANGED

	@@ -1,2 +1 @@
1 1	export { default as OnlineStatusDefault } from './_online_status_default.jsx'
2	- export { default as OnlineStatusDark } from './_online_status_dark.jsx'

data/app/pb_kits/playbook/pb_person/_person.jsx CHANGED

@@ -32,7 +32,11 @@ const Person = (props: PersonProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_person_kit'), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_person_kit'),
+    globalProps(props),
+    className
+  )
   return (
     <div

data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx CHANGED

@@ -43,7 +43,11 @@ const PersonContact = (props: PersonContactProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_person_contact_kit'), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_person_contact_kit'),
+    globalProps(props),
+    className
+  )
   const wrongContacts = () => (
     contacts.filter((contactObject) => (

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx CHANGED

@@ -5,7 +5,6 @@ const PersonContactWithWrongNumbers = () => {
   return (
     <>
       <PersonContact
-          key="person-contact-1"
           contacts={[
             {
               contactType: 'email',
@@ -24,6 +23,7 @@ const PersonContactWithWrongNumbers = () => {
             },
           ]}
           firstName="Pauline"
+          key="person-contact-1"
           lastName="Smith"
       />
     </>

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

@@ -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 CHANGED

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

data/app/pb_kits/playbook/pb_popover/_popover.jsx CHANGED

@@ -78,7 +78,11 @@ const Popover = (props: PbPopoverProps) => {
   }
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_popover_kit'), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_popover_kit'),
+    globalProps(props),
+    className
+  )
   return (
     <Popper

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

@@ -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 CHANGED

@@ -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_simple/_progress_simple.jsx CHANGED

@@ -41,14 +41,14 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
   }
   const wrapperClass = classnames(
-    className,
     buildCss('pb_progress_simple_wrapper', align, { dark: dark }),
-    globalProps(props)
+    globalProps(props),
+    className
   )
   const kitClass = classnames(
-    className,
-    buildCss('pb_progress_simple_kit', { muted: muted }, variantStyle, align)
+    buildCss('pb_progress_simple_kit', { muted }, variantStyle, align),
+    className
   )
   return (

data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx CHANGED

@@ -32,7 +32,7 @@ const ProgressStep = (props: ProgressStepProps) => {
   )
   return (
-    <ul className={classnames(progressStepCss, className, globalProps(props))}>
+    <ul className={classnames(progressStepCss, globalProps(props), className)}>
       {children}
     </ul>
   )

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

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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.html.erb CHANGED

@@ -9,7 +9,7 @@
     <% if object.children %>
       <%= capture(&object.children) %>
     <% else %>
-      <%= radio_button_tag object.name, object.value, object.selected %>
+      <%= radio_button_tag object.name, object.value, object.selected, object.input_options %>
     <% end %>
     <span class="pb_radio_button"></span>

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

@@ -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/_radio_options.html.erb ADDED

@@ -0,0 +1,9 @@
+<%= pb_rails("radio", props: {
+  text: "Radio with Options",
+  input_options: {
+    id: "radio-id",
+    name: "radio-name",
+    value: "radio-value",
+    class: "radio-class",
+  }
+}) %>

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

@@ -2,14 +2,11 @@ examples:
   rails:
   - radio_default: Default
-  - radio_dark: Dark
   - radio_custom: Custom
   - radio_error: With Error
-  - radio_dark_error: With Error
+  - radio_options: With Options
   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 CHANGED

@@ -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_radio/radio.rb CHANGED

@@ -15,6 +15,8 @@ module Playbook
                      default: false
       prop :error, type: Playbook::Props::Boolean,
                    default: false
+      prop :input_options, type: Playbook::Props::Hash,
+                           default: {}
       prop :name, type: Playbook::Props::String,
                   default: "radio_name"
       prop :text, type: Playbook::Props::String,
@@ -26,10 +28,6 @@ module Playbook
         generate_classname("pb_radio_kit") + error_class
       end
-      def input
-        check_box_tag(name, value, checked)
-      end
       def selected
         "checked" if checked == true
       end

data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx CHANGED

@@ -30,7 +30,7 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
   const themeStyle = dark === true ? '_dark' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, themeStyle), className, globalProps(props))
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, themeStyle), globalProps(props), className)
   return (

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

@@ -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 CHANGED

@@ -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 CHANGED

@@ -11,9 +11,11 @@
     appearance: none;
     cursor: pointer;
     box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
-    padding-right: $space_lg;
-    &:hover, &:active, &:focus {
-      background-color: $focus_input_light;
+    padding-right: $space_xl;
+    @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;
     }