RubyGems - playbook_ui - Versions diffs - 5.2.0.pre.alpha9 → 5.5.0.pre.alpha1 - Mend

playbook_ui 5.2.0.pre.alpha9 → 5.5.0.pre.alpha1

Files changed (135) hide show

data/app/pb_kits/playbook/pb_layout/header.rb ADDED

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+module Playbook
+  module PbLayout
+    class Header
+      include Playbook::Props
+      partial "pb_layout/header"
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[ul li span div],
+                 default: "div"
+      def classname
+        generate_classname("layout_header")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_layout/layout.rb CHANGED

@@ -19,12 +19,13 @@ module Playbook
                   default: "md"
       prop :transparent, type: Playbook::Props::Boolean, default: false
       prop :variant, type: Playbook::Props::Enum,
-                  values: %w[light dark gradient],
-                  default: "light"
+                     values: %w[light dark gradient],
+                     default: "light"
       prop :layout, type: Playbook::Props::Enum,
-            values: %w[sidebar collection kanban],
+            values: %w[sidebar collection collection_detail kanban content],
             default: "sidebar"
       prop :responsive, type: Playbook::Props::Boolean, default: false
       def classname
@@ -33,6 +34,10 @@ module Playbook
             generate_classname("pb_layout_kit", layout)
           when "kanban"
             generate_classname("pb_layout_kit", layout, responsive_class)
+          when "collection_detail"
+            generate_classname("pb_layout_kit", layout )
+          when "content"
+            generate_classname("pb_layout_kit", layout)
 	        else
 	          first_class = generate_classname("pb_layout_kit_sidebar","size_#{size}", position, variant, transparent_class)
 	          [first_class, full_class, collapse_class].reject(&:empty?).join(" ")
@@ -58,4 +63,4 @@ module Playbook
       end
     end
   end
-end
+end

data/app/pb_kits/playbook/pb_legend/_legend.html.erb CHANGED

@@ -1,4 +1,5 @@
 <%= content_tag(:div, object.text,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

data/app/pb_kits/playbook/pb_legend/_legend.jsx CHANGED

@@ -2,12 +2,14 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 import { Body, Title } from '../'
 type LegendProps = {
+  aria?: object,
+  className?: String,
   color?: | "data_1"
     | "data_2"
     | "data_3"
@@ -16,20 +18,39 @@ type LegendProps = {
     | "data_6"
     | "data_7",
   dark?: Boolean,
+  data?: object,
+  id?: String,
   prefixText?: String,
   text: String,
 }
 const Legend = (props: LegendProps) => {
-  const { color = 'data_1', dark = false, prefixText, text } = props
+  const {
+    aria = {},
+    className,
+    color = 'data_1',
+    dark = false,
+    data = {},
+    id,
+    prefixText,
+    text,
+  } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const darkClass = dark ? 'dark' : 'light'
   const bodyCSS = classnames(
-    buildCss('pb_legend_kit', color, darkClass),
+    buildCss('pb_legend_kit', color, darkClass), className,
     spacing(props)
   )
   return (
-    <div className={bodyCSS}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={bodyCSS}
+        id={id}
+    >
       <Body color={dark ? 'lighter' : 'light'}>
         <span className="pb_legend_indicator_circle" />
         <If condition={prefixText}>

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

@@ -32,21 +32,31 @@ const NavItem = ({
           onClick={onClick}
       >
         <If condition={iconLeft}>
-          <Icon
-              className="pb_nav_list_item_icon_left"
-              fixedWidth
-              icon={iconLeft}
-          />
+          <div
+              className="pb_nav_list_item_icon_section"
+              key={iconLeft}
+          >
+            <Icon
+                className="pb_nav_list_item_icon_left"
+                fixedWidth
+                icon={iconLeft}
+            />
+          </div>
         </If>
         <span className="pb_nav_list_item_text">
           {text || children}
         </span>
         <If condition={iconRight}>
-          <Icon
-              className="pb_nav_list_item_icon_right"
-              fixedWidth
-              icon={iconRight}
-          />
+          <div
+              className="pb_nav_list_item_icon_section"
+              key={iconRight}
+          >
+            <Icon
+                className="pb_nav_list_item_icon_right"
+                fixedWidth
+                icon={iconRight}
+            />
+          </div>
         </If>
       </Tag>
     </li>

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

@@ -32,6 +32,7 @@ $selector: ".pb_nav_list";
           }
           [class*=_item_text] {
             color: $primary;
+            font-weight: $bold;
           }
         }
       }
@@ -90,6 +91,7 @@ $selector: ".pb_nav_list";
         text-decoration: none;
         display: flex;
         align-items: center;
+        border: none;
         padding: $space_xs ($space_sm - 2px);
         transition-property: color, background-color;
         transition-duration: 0.15s;
@@ -106,6 +108,7 @@ $selector: ".pb_nav_list";
         }
         [class*=_text] {
           flex: 1;
+          font-weight: $regular;
         }
         &:hover {
           background-color: rgba($primary, 0.03);

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

@@ -73,23 +73,22 @@ const PersonContact = (props: PersonContactProps) => {
             contactDetail={contactObject.contactDetail}
             contactType={contactObject.contactType}
             contactValue={contactObject.contactValue}
-            key={`valid-contact-${index}`}
+            key={index}
         />
-      ))}
+            ))}
       {wrongContacts().map((contactObject, index) => (
-        <div key={`wrong-contact-caption-wrapper-${index}`}>
+        <>
           <Caption
               className="wrong_numbers"
-              key={`wrong-contact-caption-${index}`}
               text="wrong number"
           />
           <Contact
               contactType={contactObject.contactType}
               contactValue={contactObject.contactValue}
-              key={`wrong-contact-${index}`}
+              key={index}
           />
-        </div>
-      ))}
+        </>
+          ))}
     </div>
   )
 }

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',

data/app/pb_kits/playbook/pb_popover/_popover.html.erb CHANGED

@@ -2,8 +2,8 @@
   id: object.id,
   data: object.data,
   class: object.classname) do %>
-    <div class="popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
-      <div class="popover_body <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
+    <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
+      <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
         <%= capture(&object.children) %>
       </div>
     </div>

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

@@ -59,6 +59,7 @@ const Popover = (props: PbPopoverProps) => {
   } = props
   const popoverSpacing = spacing(props) ? spacing(props) : 'p_sm'
+  const overflowHandling = maxHeight || maxWidth ? 'overflow_handling' : ''
   const zIndexStyle = zIndex ? { zIndex: zIndex } : {}
   const widthHeightStyles = () => {
     return Object.assign(
@@ -90,13 +91,14 @@ const Popover = (props: PbPopoverProps) => {
           >
             <div
                 className={classnames(
-                `${buildCss('popover_tooltip')} show`
+                `${buildCss('pb_popover_tooltip')} show`
               )}
             >
               <div
                   className={classnames(
-                  'popover_body',
-                  popoverSpacing
+                  'pb_popover_body',
+                  popoverSpacing,
+                  overflowHandling
                 )}
                   style={widthHeightStyles()}
               >
@@ -128,7 +130,7 @@ export default class PbReactPopover extends React.Component {
     document.body.addEventListener('click', ({ target }) => {
       const targetIsPopover =
-        target.closest('[class^=popover_tooltip]') !== null
+        target.closest('[class^=pb_popover_tooltip]') !== null
       const targetIsReference =
         target.closest('.pb_popover_reference_wrapper') !== null

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

@@ -19,34 +19,42 @@
   to {
     opacity: 0;
   }
+  .pb_popover_body {
+    @include pb_card;
+    border: 0;
+    box-shadow: $shadow_deeper;
+  }
+  .overflow_handling {
+    overflow: auto;
+  }
 }
-[class^="pb_popover_kit"] {
-  .popover_tooltip {
-    opacity: 0;
-    animation-name: fadeOut;
+.pb_popover_tooltip {
+  opacity: 0;
+  animation-name: fadeOut;
+  animation-duration: 150ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+  visibility: hidden;
+  pointer-events: none;
+  &.show {
+    animation-name: fadeIn;
     animation-duration: 150ms;
     animation-timing-function: linear;
     animation-fill-mode: forwards;
-    visibility: hidden;
-    pointer-events: none;
-    &.show {
-      animation-name: fadeIn;
-      animation-duration: 150ms;
-      animation-timing-function: linear;
-      animation-fill-mode: forwards;
-      visibility: visible;
-      pointer-events: initial;
-      z-index: $z_9;
-    }
-  }
-  .popover_body {
-    @include pb_card;
-    border: 0;
-    box-shadow: $shadow_deeper;
-    overflow: auto;
+    visibility: visible;
+    pointer-events: initial;
+    z-index: $z_9;
   }
 }
+.pb_popover_body {
+  @include pb_card;
+  border: 0;
+  box-shadow: $shadow_deeper;
+}
+.overflow_handling {
+  overflow: auto;
+}
 .pb_popover_reference_wrapper {

data/app/pb_kits/playbook/pb_popover/index.js CHANGED

@@ -8,7 +8,12 @@ export default class PbPopover extends PbEnhancedElement {
     return '[data-pb-popover-kit]'
   }
+  moveTooltip() {
+    document.querySelector('body').appendChild(this.tooltip)
+  }
   connect() {
+    this.moveTooltip()
     this.popper = createPopper(this.triggerElement, this.tooltip, {
       placement: this.position,
       strategy: 'fixed',
@@ -31,7 +36,7 @@ export default class PbPopover extends PbEnhancedElement {
       }
       setTimeout(() => {
-        // this.popper.scheduleUpdate()
+        this.popper.update()
         this.tooltip.classList.toggle('show')
       }, 0)
     })

data/app/pb_kits/playbook/pb_popover/popover.rb CHANGED

@@ -42,6 +42,10 @@ module Playbook
         out
       end
+      def width_height_class_helper
+        "overflow_handling" if max_height || max_width
+      end
       def data
         Hash(values[:data]).merge(
           pb_popover_kit: true,

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

@@ -8,6 +8,7 @@
   .pb_radio_button {
     width: 22px;
+    min-width: 22px;
     height: 22px;
     border-radius: 1000px;
     border: 2px solid $border_light;
@@ -29,6 +30,9 @@
     }
   }
   &[class*=_dark] {
+    .pb_radio_button {
+      border-color: $border_dark;
+    }
     input:checked ~ .pb_radio_button {
       border: 6px solid $primary;
     }

data/app/pb_kits/playbook/pb_title/_title.jsx CHANGED

@@ -7,14 +7,15 @@ import { spacing } from '../utilities/spacing.js'
 type TitleProps = {
   aria?: object,
-  className?: String,
   children?: Array<React.ReactNode> | React.ReactNode,
+  className?: String,
   dark?: Boolean,
   data?: object,
   id?: String,
   size?: 1 | 2 | 3 | 4,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div",
   text?: String,
+  variant?: null | "primary",
 }
 const Title = (props: TitleProps) => {
@@ -27,12 +28,14 @@ const Title = (props: TitleProps) => {
     id,
     size = 3,
     tag = 'h3',
-    text } = props
+    text,
+    variant = null,
+  } = props
-  const themeStyle = dark === true ? '_dark' : ''
+  const themeStyle = dark === true ? 'dark' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_title_kit', size, themeStyle), className, spacing(props))
+  const classes = classnames(buildCss('pb_title_kit', size, themeStyle, variant), className, spacing(props))
   const Tag = `${tag}`
   return (

data/app/pb_kits/playbook/pb_title/_title.scss CHANGED

@@ -1,4 +1,5 @@
 @import "title_mixin";
+@import "../tokens/colors";
 [class^=pb_title_kit]{
   &[class*=_1] {
@@ -20,4 +21,10 @@
   &[class*=_dark] {
     @include pb_title_dark;
   }
+  @each $color_name, $color_value in $status_colors {
+    &[class*=_#{$color_name}]  {
+      color: map-get($status_color_text, $color_name);
+    }
+  }
 }

data/app/pb_kits/playbook/pb_title/_title_mixin.scss CHANGED

@@ -36,3 +36,5 @@
 @mixin pb_title_dark {
   color: $text_dk_default;
 }