playbook_ui 4.18.1.pre.alpha1 → 5.1.0.pre.alpha2

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

@@ -1,14 +1,18 @@
 examples:
   rails:
     - popover_default: Default
-    - popover_list: With any children
-    - popover_click_outside: Close on click outside
-    - popover_click_inside: Close on click inside
-    - popover_click_any: Close on click anywhere
+    - popover_list: Example as dropdown
+    - popover_close: Close Options
+    - popover_z_index: Set Z-Index
+    - popover_scroll_height: Scroll and Height Settings
 
   react:
     - popover_default: Default
-    - popover_list: With any children
-    - popover_click_outside: Close on click outside
-    - popover_click_inside: Close on click inside
-    - popover_click_any: Close on click anywhere
+    - popover_list: Dropdown example
+    - popover_close: Close Options
+    - popover_z_index: Set Z-Index
+    - popover_scroll_height: Scroll and Height Settings
+  
+
+
+    

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

@@ -1,5 +1,5 @@
 export { default as PopoverDefault } from './_popover_default.jsx'
 export { default as PopoverList } from './_popover_list.jsx'
-export { default as PopoverClickOutside } from './_popover_click_outside.jsx'
-export { default as PopoverClickInside } from './_popover_click_inside.jsx'
-export { default as PopoverClickAny } from './_popover_click_any.jsx'
+export { default as PopoverClose } from './_popover_close.jsx'
+export { default as PopoverZIndex } from './_popover_z_index.jsx'
+export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'

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

@@ -1,7 +1,7 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import Popper from 'popper.js'
+import { createPopper } from '@popperjs/core'
 
-const POPOVER_OFFSET_Y = '0,8'
+const POPOVER_OFFSET_Y = [0, 20]
 
 export default class PbPopover extends PbEnhancedElement {
   static get selector() {
@@ -9,13 +9,17 @@ export default class PbPopover extends PbEnhancedElement {
   }
 
   connect() {
-    this.popper = new Popper(this.triggerElement, this.tooltip, {
+    this.popper = createPopper(this.triggerElement, this.tooltip, {
       placement: this.position,
-      modifiers: {
-        offset: {
-          offset: this.offset,
+      strategy: 'fixed',
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: this.offset,
+          },
         },
-      },
+      ],
     })
 
     this.triggerElement.addEventListener('click', (event) => {
@@ -27,7 +31,7 @@ export default class PbPopover extends PbEnhancedElement {
       }
 
       setTimeout(() => {
-        this.popper.scheduleUpdate()
+        // this.popper.scheduleUpdate()
         this.tooltip.classList.toggle('show')
       }, 0)
     })
@@ -89,7 +93,7 @@ export default class PbPopover extends PbEnhancedElement {
   }
 
   get offset() {
-    return this.element.dataset.pbPopoverOffset === 'true' ? POPOVER_OFFSET_Y : '0,0'
+    return this.element.dataset.pbPopoverOffset === 'true' ? POPOVER_OFFSET_Y : [0, 0]
   }
 
   get closeOnClick() {

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

@@ -6,16 +6,40 @@ module Playbook
       include Playbook::Props
       partial "pb_popover/popover"
 
-      prop :position
+      prop :position, type: Playbook::Props::Enum,
+                      values: %w[top bottom left right],
+                      default: "left"
       prop :trigger_element_id
       prop :tooltip_id
+      prop :max_height
+      prop :max_width
+      prop :min_width
+      prop :min_height
+      prop :z_index, type: Playbook::Props::String
       prop :offset, type: Playbook::Props::Boolean, default: false
       prop :close_on_click, type: Playbook::Props::Enum,
                             values: %w[none outside inside any],
                             default: "none"
 
       def classname
-        generate_classname("pb_popover_kit")
+        generate_classname_without_spacing("pb_popover_kit")
+      end
+
+      def popover_spacing_helper
+        generate_classname(spacing_props.nil? ? "p_sm" : spacing_props)
+      end
+
+      def z_index_helper
+        z_index.present? ? "z-index: #{z_index}" : ""
+      end
+
+      def width_height_helper
+        out = ""
+        out += "max-height: #{max_height}; " if max_height.present?
+        out += "max-width: #{max_width}; " if max_width.present?
+        out += "min-height: #{min_height}; " if min_height.present?
+        out += "min-width: #{min_width};" if min_width.present?
+        out
       end
 
       def data

data/app/pb_kits/playbook/pb_title/_title.html.erb

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

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

@@ -2,38 +2,45 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 
 type TitleProps = {
+  aria?: object,
   className?: String,
   children?: Array<React.ReactNode> | React.ReactNode,
   dark?: Boolean,
+  data?: object,
+  id?: String,
   size?: 1 | 2 | 3 | 4,
+  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div",
   text?: String,
-  tag?: "h1" | "h2" | "h3",
-}
-
-const tagCSS = ({ dark = false, size = 3 }) => {
-  let css = ''
-
-  css += `_${size}`
-  css += dark === true ? '_dark' : ''
-
-  return css
 }
 
 const Title = (props: TitleProps) => {
-  const { children, className, tag = 'h3', text } = props
-
+  const {
+    aria = {},
+    children,
+    className,
+    dark = false,
+    data = {},
+    id,
+    size = 3,
+    tag = 'h3',
+    text } = props
+
+  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 Tag = `${tag}`
 
   return (
     <Tag
-        className={classnames(
-        `pb_title_kit${tagCSS(props)}`,
-        className,
-        spacing(props),
-      )}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       {text || children}
     </Tag>

data/app/pb_kits/playbook/props.rb

@@ -51,6 +51,13 @@ module Playbook
       ].compact.join(" ")
     end
 
+    def generate_classname_without_spacing(*name_parts, separator: "_")
+      [
+        name_parts.compact.join(separator),
+        prop(:classname),
+      ].compact.join(" ")
+    end
+
     attr_accessor :values
     private :values, :values=
 

data/app/pb_kits/playbook/tokens/index.scss

@@ -0,0 +1,12 @@
+@import "animation-curves";
+@import "border_radius";
+@import "colors";
+@import "fonts";
+@import "line_height";
+@import "opacity";
+@import "positioning";
+@import "screen_sizes";
+@import "shadows";
+@import "spacing";
+@import "transition";
+@import "typography";

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "4.18.1-alpha1"
+  VERSION = "5.1.0-alpha2"
 end

data/lib/tasks/pb_release.rake

@@ -39,6 +39,9 @@ namespace :pb_release do
       puts "Updated Gemfile.lock"
       puts "\n\n"
 
+      puts "\nCreating dist files"
+      `yarn release`
+
       puts "Commit your changes and create a PR to merge to master"
     end
   end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 4.18.1.pre.alpha1
+  version: 5.1.0.pre.alpha2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-06-17 00:00:00.000000000 Z
+date: 2020-06-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -381,15 +381,6 @@ extra_rdoc_files: []
 files:
 - README.md
 - Rakefile
-- app/assets/images/clark.jpg
-- app/assets/images/giant.jpg
-- app/assets/images/pb-caret.svg
-- app/assets/images/pb-check.svg
-- app/assets/images/pb.logo.svg
-- app/controllers/playbook/application_controller.rb
-- app/controllers/playbook/guides_controller.rb
-- app/controllers/playbook/pages_controller.rb
-- app/controllers/playbook/samples_controller.rb
 - app/helpers/playbook/application_helper.rb
 - app/helpers/playbook/layout_helper.rb
 - app/helpers/playbook/pb_doc_helper.rb
@@ -397,27 +388,7 @@ files:
 - app/helpers/playbook/pb_sample_helper.rb
 - app/helpers/playbook/redcarpet_helper.rb
 - app/pb_kits/playbook/_playbook.scss
-- app/pb_kits/playbook/config/_kit_example.html.erb
-- app/pb_kits/playbook/config/_kit_samples_list.html.erb
-- app/pb_kits/playbook/config/_kit_ui.html.erb
-- app/pb_kits/playbook/config/_pb_kit_api.html.erb
-- app/pb_kits/playbook/data/menu.yml
 - app/pb_kits/playbook/index.js
-- app/pb_kits/playbook/packs/application.js
-- app/pb_kits/playbook/packs/examples.js
-- app/pb_kits/playbook/packs/main.scss
-- app/pb_kits/playbook/packs/samples.js
-- app/pb_kits/playbook/packs/site_styles/_samples.scss
-- app/pb_kits/playbook/packs/site_styles/_scaffold.scss
-- app/pb_kits/playbook/packs/site_styles/_site-style.scss
-- app/pb_kits/playbook/packs/site_styles/docs/_all.scss
-- app/pb_kits/playbook/packs/site_styles/docs/_code_snippet.scss
-- app/pb_kits/playbook/packs/site_styles/docs/_color_utilities.scss
-- app/pb_kits/playbook/packs/site_styles/docs/_flex_examples.scss
-- app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss
-- app/pb_kits/playbook/packs/site_styles/docs/_kits_examples.scss
-- app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss
-- app/pb_kits/playbook/packs/site_styles/docs/_spacing_tokens.scss
 - app/pb_kits/playbook/pb_avatar/_avatar.html.erb
 - app/pb_kits/playbook/pb_avatar/_avatar.jsx
 - app/pb_kits/playbook/pb_avatar/_avatar.scss
@@ -537,6 +508,7 @@ files:
 - app/pb_kits/playbook/pb_card/_card.html.erb
 - app/pb_kits/playbook/pb_card/_card.jsx
 - app/pb_kits/playbook/pb_card/_card.scss
+- app/pb_kits/playbook/pb_card/_card_mixin.scss
 - app/pb_kits/playbook/pb_card/card.rb
 - app/pb_kits/playbook/pb_card/card_body.rb
 - app/pb_kits/playbook/pb_card/card_header.rb
@@ -937,6 +909,14 @@ files:
 - app/pb_kits/playbook/pb_image/docs/example.yml
 - app/pb_kits/playbook/pb_image/docs/index.js
 - app/pb_kits/playbook/pb_image/image.rb
+- app/pb_kits/playbook/pb_installer/_installer.html.erb
+- app/pb_kits/playbook/pb_installer/_installer.jsx
+- app/pb_kits/playbook/pb_installer/_installer.scss
+- app/pb_kits/playbook/pb_installer/docs/_installer_default.html.erb
+- app/pb_kits/playbook/pb_installer/docs/_installer_default.jsx
+- app/pb_kits/playbook/pb_installer/docs/example.yml
+- app/pb_kits/playbook/pb_installer/docs/index.js
+- app/pb_kits/playbook/pb_installer/installer.rb
 - app/pb_kits/playbook/pb_kit/base.rb
 - app/pb_kits/playbook/pb_kit/dateTime.js
 - app/pb_kits/playbook/pb_kit/pb_date_time.rb
@@ -966,6 +946,7 @@ files:
 - app/pb_kits/playbook/pb_label_value/docs/index.js
 - app/pb_kits/playbook/pb_label_value/label_value.rb
 - app/pb_kits/playbook/pb_layout/_body.html.erb
+- app/pb_kits/playbook/pb_layout/_column.html.erb
 - app/pb_kits/playbook/pb_layout/_layout.html.erb
 - app/pb_kits/playbook/pb_layout/_layout.jsx
 - app/pb_kits/playbook/pb_layout/_layout.scss
@@ -977,6 +958,10 @@ files:
 - app/pb_kits/playbook/pb_layout/docs/_layout_collection.jsx
 - app/pb_kits/playbook/pb_layout/docs/_layout_colors.html.erb
 - app/pb_kits/playbook/pb_layout/docs/_layout_colors.jsx
+- app/pb_kits/playbook/pb_layout/docs/_layout_kanban.html.erb
+- app/pb_kits/playbook/pb_layout/docs/_layout_kanban.jsx
+- app/pb_kits/playbook/pb_layout/docs/_layout_kanban_responsive.html.erb
+- app/pb_kits/playbook/pb_layout/docs/_layout_kanban_responsive.jsx
 - app/pb_kits/playbook/pb_layout/docs/_layout_sizes.html.erb
 - app/pb_kits/playbook/pb_layout/docs/_layout_sizes.jsx
 - app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.html.erb
@@ -1027,19 +1012,29 @@ files:
 - app/pb_kits/playbook/pb_list/_list_mixin.scss
 - app/pb_kits/playbook/pb_list/docs/_description.md
 - app/pb_kits/playbook/pb_list/docs/_list_borderless.html.erb
+- app/pb_kits/playbook/pb_list/docs/_list_borderless.jsx
 - app/pb_kits/playbook/pb_list/docs/_list_dark.html.erb
 - app/pb_kits/playbook/pb_list/docs/_list_dark.jsx
 - app/pb_kits/playbook/pb_list/docs/_list_dark_borderless.html.erb
+- app/pb_kits/playbook/pb_list/docs/_list_dark_borderless.jsx
 - app/pb_kits/playbook/pb_list/docs/_list_dark_lg.html.erb
+- app/pb_kits/playbook/pb_list/docs/_list_dark_lg.jsx
 - app/pb_kits/playbook/pb_list/docs/_list_dark_ordered.html.erb
+- app/pb_kits/playbook/pb_list/docs/_list_dark_ordered.jsx
 - app/pb_kits/playbook/pb_list/docs/_list_dark_xpadding.html.erb
+- app/pb_kits/playbook/pb_list/docs/_list_dark_xpadding.jsx
 - app/pb_kits/playbook/pb_list/docs/_list_default.html.erb
 - app/pb_kits/playbook/pb_list/docs/_list_default.jsx
 - app/pb_kits/playbook/pb_list/docs/_list_layout_left.html.erb
+- app/pb_kits/playbook/pb_list/docs/_list_layout_left.jsx
 - app/pb_kits/playbook/pb_list/docs/_list_layout_right.html.erb
+- app/pb_kits/playbook/pb_list/docs/_list_layout_right.jsx
 - app/pb_kits/playbook/pb_list/docs/_list_lg.html.erb
+- app/pb_kits/playbook/pb_list/docs/_list_lg.jsx
 - app/pb_kits/playbook/pb_list/docs/_list_ordered.html.erb
+- app/pb_kits/playbook/pb_list/docs/_list_ordered.jsx
 - app/pb_kits/playbook/pb_list/docs/_list_xpadding.html.erb
+- app/pb_kits/playbook/pb_list/docs/_list_xpadding.jsx
 - app/pb_kits/playbook/pb_list/docs/example.yml
 - app/pb_kits/playbook/pb_list/docs/index.js
 - app/pb_kits/playbook/pb_list/item.rb
@@ -1177,18 +1172,17 @@ files:
 - app/pb_kits/playbook/pb_popover/_popover.jsx
 - app/pb_kits/playbook/pb_popover/_popover.scss
 - app/pb_kits/playbook/pb_popover/docs/_description.md
-- app/pb_kits/playbook/pb_popover/docs/_popover_click_any.html.erb
-- app/pb_kits/playbook/pb_popover/docs/_popover_click_any.jsx
-- app/pb_kits/playbook/pb_popover/docs/_popover_click_inside.html.erb
-- app/pb_kits/playbook/pb_popover/docs/_popover_click_inside.jsx
-- app/pb_kits/playbook/pb_popover/docs/_popover_click_outside.html.erb
-- app/pb_kits/playbook/pb_popover/docs/_popover_click_outside.jsx
+- app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb
+- app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx
-- app/pb_kits/playbook/pb_popover/docs/_popover_with_button.jsx
-- app/pb_kits/playbook/pb_popover/docs/_popover_with_circle.html.erb
+- app/pb_kits/playbook/pb_popover/docs/_popover_list.md
+- app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.html.erb
+- app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx
+- app/pb_kits/playbook/pb_popover/docs/_popover_z_index.html.erb
+- app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx
 - app/pb_kits/playbook/pb_popover/docs/example.yml
 - app/pb_kits/playbook/pb_popover/docs/index.js
 - app/pb_kits/playbook/pb_popover/index.js
@@ -1695,6 +1689,7 @@ files:
 - app/pb_kits/playbook/tokens/_spacing.scss
 - app/pb_kits/playbook/tokens/_transition.scss
 - app/pb_kits/playbook/tokens/_typography.scss
+- app/pb_kits/playbook/tokens/index.scss
 - app/pb_kits/playbook/types.js
 - app/pb_kits/playbook/utilities/_background_colors.scss
 - app/pb_kits/playbook/utilities/_colors.scss
@@ -1703,43 +1698,6 @@ files:
 - app/pb_kits/playbook/utilities/spacing.js
 - app/pb_kits/playbook/utilities/text.js
 - app/pb_kits/playbook/vendor.js
-- app/views/layouts/playbook/_mobile_hamburger.html.erb
-- app/views/layouts/playbook/_nav.html.erb
-- app/views/layouts/playbook/_sidebar.html.erb
-- app/views/layouts/playbook/application.html.slim
-- app/views/layouts/playbook/fullscreen.html.slim
-- app/views/layouts/playbook/grid.html.slim
-- app/views/layouts/playbook/samples.html.erb
-- app/views/playbook/guides/create_kit.html.slim
-- app/views/playbook/guides/create_kit/_file_naming.html.md
-- app/views/playbook/guides/create_kit/_generator.html.md
-- app/views/playbook/guides/create_kit/_kit_examples.html.md
-- app/views/playbook/guides/create_kit/_kit_rails.html.md
-- app/views/playbook/guides/create_kit/_kit_react.html.md
-- app/views/playbook/guides/create_kit/_layout.html.md
-- app/views/playbook/guides/create_kit/_view_objects.html.md
-- app/views/playbook/guides/create_kit/_writing_sass.md
-- app/views/playbook/guides/use_nitro.html.slim
-- app/views/playbook/guides/use_nitro/_local.html.md
-- app/views/playbook/guides/use_nitro/_nitro_components.html.md
-- app/views/playbook/guides/use_nitro/_versions.html.md
-- app/views/playbook/pages/fullscreen.html.slim
-- app/views/playbook/pages/grid.html.slim
-- app/views/playbook/pages/home.html.slim
-- app/views/playbook/pages/kit_category_show.html.erb
-- app/views/playbook/pages/kit_show.html.erb
-- app/views/playbook/pages/kits.html.erb
-- app/views/playbook/pages/principals/_getting_started.html.md
-- app/views/playbook/pages/principles.html.slim
-- app/views/playbook/pages/tokens.html.slim
-- app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim
-- app/views/playbook/pages/utilities.html.slim
-- app/views/playbook/pages/utilities/_pb_doc_color.html.slim
-- app/views/playbook/samples/dashboards/index.html.erb
-- app/views/playbook/samples/dashboards/index.jsx
-- app/views/playbook/samples/registration/index.html.erb
-- app/views/playbook/samples/registration/index.jsx
-- app/views/playbook/samples/sample_show.html.erb
 - fonts/fontawesome-min.js
 - fonts/regular-min.js
 - lib/generators/kit/USAGE