playbook_ui 7.0.1.pre.alpha12 → 7.0.1.pre.alpha14

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx

@@ -26,8 +26,11 @@ const UserBadge = (props: UserBadgeProps) => {
   const image = require(`./badges/_${badge}.svg`)
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_user_badge_kit', size), globalProps(props),
-    className)
+  const classes = classnames(
+    buildCss('pb_user_badge_kit', size),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -33,7 +33,7 @@ const mapColors = (array) => {
 
 // Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
 const alignBlockElement = (event) => {
-  const itemToMove = document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb_circle_chart_block`)
+  const itemToMove = document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`)
   const chartContainer = document.querySelector(`#${event.target.renderTo.id}`)
   if (itemToMove !== null) {
     itemToMove.style.height = `${event.target.chartHeight}px`

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

@@ -39,9 +39,9 @@ $heading_4: $font_base;
 
 
 // Letter Spacing
-$lspace_tightest:         _.1em;
-$lspace_tighter:          _.07em;
-$lspace_tight:            _.03em;
+$lspace_tightest:         -.1em;
+$lspace_tighter:          -.07em;
+$lspace_tight:            -.03em;
 $lspace_normal:           0;
 $lspace_loose:            .03em;
 $lspace_looser:           .07em;

data/lib/generators/kit/templates/kit_jsx.erb.tt

@@ -51,7 +51,7 @@ const <%= @kit_name_pascal %> = (props: <%= type_name %>) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_<%= @kit_name_underscore %>'), className, globalProps(props))
+  const classes = classnames(buildCss('pb_<%= @kit_name_underscore %>'), globalProps(props), className)
 
   return (
     <div

data/lib/playbook/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "7.0.1-alpha12"
+  VERSION = "7.0.1-alpha14"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.0.1.pre.alpha12
+  version: 7.0.1.pre.alpha14
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-10 00:00:00.000000000 Z
+date: 2020-10-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -464,6 +464,14 @@ files:
 - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb
 - app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml
 - app/pb_kits/playbook/pb_avatar_action_button/docs/index.js
+- app/pb_kits/playbook/pb_background/_background.html.erb
+- app/pb_kits/playbook/pb_background/_background.jsx
+- app/pb_kits/playbook/pb_background/_background.scss
+- app/pb_kits/playbook/pb_background/background.rb
+- app/pb_kits/playbook/pb_background/docs/_background_default.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_default.jsx
+- app/pb_kits/playbook/pb_background/docs/example.yml
+- app/pb_kits/playbook/pb_background/docs/index.js
 - app/pb_kits/playbook/pb_badge/_badge.html.erb
 - app/pb_kits/playbook/pb_badge/_badge.jsx
 - app/pb_kits/playbook/pb_badge/_badge.scss
@@ -604,21 +612,33 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx
+- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_description.md
 - app/pb_kits/playbook/pb_checkbox/docs/example.yml
 - app/pb_kits/playbook/pb_checkbox/docs/index.js
 - app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb
+- app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx
 - app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss
 - app/pb_kits/playbook/pb_circle_chart/circle_chart.rb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.html.erb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/example.yml
+- app/pb_kits/playbook/pb_circle_chart/docs/index.js
 - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.html.erb
 - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx
 - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
@@ -677,6 +697,8 @@ files:
 - app/pb_kits/playbook/pb_date/date.rb
 - app/pb_kits/playbook/pb_date/docs/_date_default.html.erb
 - app/pb_kits/playbook/pb_date/docs/_date_default.jsx
+- app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb
+- app/pb_kits/playbook/pb_date/docs/_date_timezone.md
 - app/pb_kits/playbook/pb_date/docs/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
@@ -685,6 +707,9 @@ files:
 - app/pb_kits/playbook/pb_date_picker/_date_picker.scss
 - app/pb_kits/playbook/pb_date_picker/date_picker.rb
 - app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
@@ -711,11 +736,10 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.md
@@ -1373,6 +1397,7 @@ files:
 - app/pb_kits/playbook/pb_radio/docs/_radio_error.html.erb
 - app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx
 - app/pb_kits/playbook/pb_radio/docs/_radio_error.md
+- app/pb_kits/playbook/pb_radio/docs/_radio_options.html.erb
 - app/pb_kits/playbook/pb_radio/docs/example.yml
 - app/pb_kits/playbook/pb_radio/docs/index.js
 - app/pb_kits/playbook/pb_radio/radio.rb
@@ -1590,12 +1615,16 @@ files:
 - app/pb_kits/playbook/pb_time/_time.scss
 - app/pb_kits/playbook/pb_time/docs/_description.md
 - app/pb_kits/playbook/pb_time/docs/_footer.md
+- app/pb_kits/playbook/pb_time/docs/_time_align.html.erb
 - app/pb_kits/playbook/pb_time/docs/_time_align.jsx
 - app/pb_kits/playbook/pb_time/docs/_time_default.html.erb
 - app/pb_kits/playbook/pb_time/docs/_time_default.jsx
 - app/pb_kits/playbook/pb_time/docs/_time_default.md
+- app/pb_kits/playbook/pb_time/docs/_time_sizes.html.erb
+- app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx
 - app/pb_kits/playbook/pb_time/docs/_time_timestamp.html.erb
 - app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx
+- app/pb_kits/playbook/pb_time/docs/_time_timezone.html.erb
 - app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx
 - app/pb_kits/playbook/pb_time/docs/_time_timezone.md
 - app/pb_kits/playbook/pb_time/docs/example.yml
@@ -1697,8 +1726,6 @@ files:
 - app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx
 - app/pb_kits/playbook/pb_toggle/docs/_toggle_name.html.erb
 - app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
-- app/pb_kits/playbook/pb_toggle/docs/_toggle_size.html.erb
-- app/pb_kits/playbook/pb_toggle/docs/_toggle_size.jsx
 - app/pb_kits/playbook/pb_toggle/docs/example.yml
 - app/pb_kits/playbook/pb_toggle/docs/index.js
 - app/pb_kits/playbook/pb_toggle/toggle.rb
@@ -1710,12 +1737,27 @@ files:
 - app/pb_kits/playbook/pb_tooltip/index.js
 - app/pb_kits/playbook/pb_tooltip/tooltip.rb
 - app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb
+- app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
 - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
+- app/pb_kits/playbook/pb_typeahead/components/Control.jsx
+- app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx
+- app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx
+- app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx
+- app/pb_kits/playbook/pb_typeahead/components/Option.jsx
+- app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx
+- app/pb_kits/playbook/pb_typeahead/components/ValueContainer.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_description.md
 - app/pb_kits/playbook/pb_typeahead/docs/_footer.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/example.yml
+- app/pb_kits/playbook/pb_typeahead/docs/index.js
 - app/pb_kits/playbook/pb_typeahead/index.js
 - app/pb_kits/playbook/pb_typeahead/typeahead.rb
 - app/pb_kits/playbook/pb_user/_user.html.erb
@@ -1879,7 +1921,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubygems_version: 3.1.2
+rubygems_version: 3.1.4
 signing_key: 
 specification_version: 4
 summary: Playbook Design System

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.jsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import { DatePicker } from '../../'
-
-const DatePickerReadOnly = () => (
-  <div>
-    <DatePicker
-        pickerId="date-picker-read-only"
-        readOnly
-    />
-  </div>
-)
-
-export default DatePickerReadOnly

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.md

@@ -1 +0,0 @@
-Read only inputs do not accept keyboard input.  The only way to change the date value is by picking a date on the calendar.  Especially useful on mobile as it prevents the keyboard from popping up and obscuring the date picker.

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_size.html.erb

@@ -1,11 +0,0 @@
-<%= pb_rails("toggle", props: {
-  size: "sm",
-  checked: false
-}) %>
-
-<br>
-
-<%= pb_rails("toggle", props: {
-  size: "md",
-  checked: false
-}) %>

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_size.jsx

@@ -1,44 +0,0 @@
-// @flow
-
-import React, { useState } from 'react'
-import { Toggle } from '../..'
-
-const ToggleSize = () => {
-  const [choice, setChoice] = useState(false)
-
-  const handleOnChange = ({ target }) => {
-    setChoice(target.value = !choice)
-  }
-
-  return (
-    <>
-      <Toggle
-          checked={choice}
-          size="sm"
-      >
-        <input
-            name="toggleSmall"
-            onChange={handleOnChange}
-            type="checkbox"
-            value="toggleSmall"
-        />
-      </Toggle>
-
-      <br />
-
-      <Toggle
-          checked={choice}
-          size="md"
-      >
-        <input
-            name="toggleMedium"
-            onChange={handleOnChange}
-            type="checkbox"
-            value="toggleMedium"
-        />
-      </Toggle>
-    </>
-  )
-}
-
-export default ToggleSize