playbook_ui 8.1.0.pre.alpha1 → 8.1.0

data/app/pb_kits/playbook/pb_form/simple_form.html.erb

@@ -1,4 +1,6 @@
-<%= simple_form_for model, options, &method(:render_form) %>
+<%= simple_form_for model, options do |form| %>
+  <% instance_exec form, &children %>
+<% end %>
 
 <% if validate %>
   <% content_for :pb_js do %>
@@ -8,4 +10,4 @@
       })
     <% end %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form/simple_form.rb

@@ -48,10 +48,6 @@ module Playbook
         prop(:options).fetch(:html, {})
       end
 
-      def render_form(builder)
-        view_context.capture(builder, &children)
-      end
-
       def render_in(view_context, &_block)
         super(view_context, &nil)
       end

data/app/pb_kits/playbook/pb_online_status/_online_status.jsx

@@ -23,8 +23,6 @@ const OnlineStatus = (props: OnlineStatusProps) => {
     status = 'offline',
   } = props
 
-  aria.label = status
-
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_online_status_kit', status), globalProps(props), className)

data/app/pb_kits/playbook/pb_online_status/online_status.html.erb

@@ -1,5 +1,5 @@
 <%= content_tag(:div,
-    aria: object.aria.merge!(label: object.status),
+    aria: object.aria,
     class: object.classname,
     data: object.data,
     id: object.id) do %>

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { forwardRef, useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import classnames from 'classnames'
 import useFocus from './useFocus.js'
 import Trix from 'trix'
@@ -22,7 +22,7 @@ type RichTextEditorProps = {
   value?: string,
 }
 
-const RichTextEditor = (props: RichTextEditorProps, ref: React.ElementRef<"input">) => {
+const RichTextEditor = (props: RichTextEditorProps) => {
   const {
     aria = {},
     className,
@@ -120,7 +120,6 @@ const RichTextEditor = (props: RichTextEditorProps, ref: React.ElementRef<"input
       <input
           id={id}
           name={name}
-          ref={ref}
           type="hidden"
           value={value}
       />
@@ -134,4 +133,4 @@ const RichTextEditor = (props: RichTextEditorProps, ref: React.ElementRef<"input
   )
 }
 
-export default forwardRef(RichTextEditor)
+export default RichTextEditor

data/app/pb_kits/playbook/pb_text_input/_text_input.jsx

@@ -19,7 +19,6 @@ type TextInputProps = {
   id?: string,
   name: string,
   label: string,
-  onBlur: (String) => void,
   onChange: (String) => void,
   placeholder: string,
   required?: boolean,
@@ -42,7 +41,6 @@ const TextInput = (
     id,
     name,
     label,
-    onBlur = () => {},
     onChange = () => {},
     placeholder,
     required,
@@ -81,7 +79,6 @@ const TextInput = (
               disabled={disabled}
               id={id}
               name={name}
-              onBlur={onBlur}
               onChange={onChange}
               placeholder={placeholder}
               ref={ref}

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -24,7 +24,6 @@ type TextareaProps = {
   required?: boolean,
   rows?: number,
   resize: 'none' | 'both' | 'horizontal' | 'vertical' | 'auto',
-  onBlur?: InputCallback<HTMLTextAreaElement>,
   onChange?: InputCallback<HTMLTextAreaElement>,
 }
 
@@ -38,7 +37,6 @@ const Textarea = ({
   label,
   maxCharacters,
   name,
-  onBlur = () => {},
   onChange = () => {},
   placeholder,
   required,
@@ -77,7 +75,6 @@ const Textarea = ({
             className="pb_textarea_kit"
             disabled={disabled}
             name={name}
-            onBlur={onBlur}
             onChange={onChange}
             placeholder={placeholder}
             ref={ref}

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -3,7 +3,6 @@
 import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
-import CreateableSelect from 'react-select/creatable'
 import { get } from 'lodash'
 import { globalProps } from '../utilities/globalProps.js'
 
@@ -27,7 +26,6 @@ import { noop } from '../utilities/props'
 
 type Props = {
   async?: boolean,
-  createable?: boolean,
   dark?: boolean,
   label?: string,
   loadOptions?: noop | string,
@@ -43,7 +41,6 @@ type Props = {
 
 const Typeahead = (props: Props) => {
   const selectProps = {
-    badges: false,
     cacheOptions: true,
     components: {
       Control,
@@ -61,7 +58,6 @@ const Typeahead = (props: Props) => {
     isClearable: true,
     isSearchable: true,
     name,
-    onCreate: () => {},
     ...props,
   }
 
@@ -69,8 +65,7 @@ const Typeahead = (props: Props) => {
   if (typeof(props.getOptionLabel) === 'string') selectProps.getOptionLabel = get(window, props.getOptionLabel)
   if (typeof(props.getOptionValue) === 'string') selectProps.getOptionValue = get(window, props.getOptionValue)
 
-  let Tag = props.async ? AsyncSelect : Select
-  if (props.createable) Tag = CreateableSelect
+  const Tag = props.async ? AsyncSelect : Select
 
   const handleOnChange = (data, { action, option, removedValue }) => {
     if (action === 'select-option') {

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { components } from 'react-select'
 
-import { FormPill, Badge } from '../../'
+import { FormPill } from '../../'
 
 type Props = {
   data: object,
@@ -28,7 +28,7 @@ const MultiValue = (props: Props) => {
         className="text_input_multivalue_container"
         {...props}
     >
-      {/* <If condition={imageUrl}>
+      <If condition={imageUrl}>
         <FormPill
             avatarUrl={imageUrl}
             closeProps={removeProps}
@@ -41,29 +41,6 @@ const MultiValue = (props: Props) => {
             marginRight="xs"
             text={label}
         />
-      </If> */}
-      <If condition={props.selectProps.badges}>
-        <Badge
-            closeProps={removeProps}
-            removeIcon
-            text={label}
-            variant="primary"
-        />
-        <Else />
-        <If condition={imageUrl}>
-          <FormPill
-              avatarUrl={imageUrl}
-              closeProps={removeProps}
-              marginRight="xs"
-              name={label}
-          />
-          <Else />
-          <FormPill
-              closeProps={removeProps}
-              marginRight="xs"
-              text={label}
-          />
-        </If>
       </If>
     </components.MultiValueContainer>
   )

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx

@@ -13,7 +13,6 @@ const options = [
 const TypeaheadDefault = (props) => {
   return (
     <Typeahead
-        // badges
         label="Colors"
         options={options}
         {...props}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -1,9 +1,9 @@
 /* @flow */
 
-import React, { useState } from 'react'
+import React from 'react'
 import { Typeahead } from '../..'
 
-const initOptions = [
+const options = [
   { label: 'Windows', value: '#FFA500' },
   { label: 'Siding', value: '#FF0000' },
   { label: 'Doors', value: '#00FF00' },
@@ -11,16 +11,12 @@ const initOptions = [
 ]
 
 const TypeaheadWithPills = (props) => {
-  const [values, setValues] = useState([])
   return (
     <>
       <Typeahead
-          badges
-          createable
           isMulti
           label="Colors"
-          onChange={(value) => console.log(value)}
-          options={initOptions}
+          options={options}
           placeholder=""
           {...props}
       />

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

@@ -23,7 +23,7 @@ const UserBadge = (props: UserBadgeProps) => {
     size = 'md',
   } = props
 
-  const image = require(`./badges/${badge}.svg`)
+  const image = require(`./badges/_${badge}.svg`)
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(

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

@@ -1,7 +1,7 @@
 import Highcharts from 'highcharts'
 
 import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme.js'
-import colors from '../tokens/exports/_colors.scss'
+import colors from '../tokens/_colors.scss'
 
 require('highcharts/modules/variable-pie')(Highcharts)
 import highchartsMore from 'highcharts/highcharts-more.js'

data/app/pb_kits/playbook/react_rails_kits.js

@@ -5,8 +5,4 @@ export { default as Legend } from './pb_legend/_legend.jsx'
 export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'
 export { default as Typeahead } from './pb_typeahead/_typeahead.jsx'
 export { default as RichTextEditor } from './pb_rich_text_editor/_rich_text_editor.jsx'
-export { default as Dialog } from './pb_dialog/_dialog.jsx'
-export { default as DialogHeader } from './pb_dialog/child_kits/_dialog_header.jsx'
-export { default as DialogBody } from './pb_dialog/child_kits/_dialog_body.jsx'
-export { default as DialogFooter } from './pb_dialog/child_kits/_dialog_footer.jsx'
 export { KitSearch, SnippetToggle, DarkModeToggle } from './docs_components'

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

@@ -32,3 +32,13 @@ $border_radius: (
   border_radius_none:    $border_radius_none,
   border_radius_rounded: $border_radius_rounded
 );
+
+
+:export {
+  @mixin export_border_radius($border_radius_list) {
+    @each $name, $size in $border_radius_list {
+      #{$name}: $size;
+    }
+  }
+  @include export_border_radius($border_radius);
+}

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

@@ -250,3 +250,28 @@ $transparent: transparent;
   background: linear-gradient(135deg,  $start 0%, $end 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start}', endColorstr='#{$end}', GradientType=1);
 }
+
+:export {
+  @mixin export-colors($colors-list) {
+    @each $name, $color in $colors-list {
+      #{$name}: $color;
+    }
+  }
+  @include export-colors($product_colors);
+  @include export-colors($status_colors);
+  @include export-colors($data_colors);
+  @include export-colors($shadow_colors);
+  @include export-colors($colors);
+  @include export-colors($interface_colors);
+  @include export-colors($main_colors);
+  @include export-colors($background_colors);
+  @include export-colors($card_colors);
+  @include export-colors($active_colors);
+  @include export-colors($action_colors);
+  @include export-colors($hover_colors);
+  @include export-colors($border_colors);
+  @include export-colors($text_colors);
+  @include export-colors($category_colors);
+  gradient_start: $gradient_start;
+  gradient_end: $gradient_end;
+}

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

@@ -14,3 +14,12 @@ $line_height: (
   looser: $lh_looser,
   loosest: $lh_loosest
 );
+
+:export {
+  @mixin export_line_height($line_height_list) {
+    @each $name, $settings in $line_height_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_line_height($line_height);
+}

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

@@ -19,3 +19,12 @@ $opacity: (
   opacity_8: $opacity_8,
   opacity_9: $opacity_9,
 );
+
+:export {
+  @mixin export_opacity($opacity_list) {
+    @each $name, $settings in $opacity_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_opacity($opacity);
+}

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

@@ -34,3 +34,12 @@ $offscreen: -9999px;
   }
   @return map-get($z_layers, $layer);
 }
+
+:export {
+  @mixin export_z_index($z_index_list) {
+    @each $name, $settings in $z_index_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_z_index($z_index);
+}

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

@@ -28,3 +28,12 @@ $breakpoints: (
     @content;
   }
 }
+
+:export {
+  @mixin export_breakpoints($breakpoints_list) {
+    @each $name, $settings in $breakpoints_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_breakpoints($breakpoints);
+}

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

@@ -11,3 +11,12 @@ $box_shadows: (
   shadow_deeper: $shadow_deeper,
   shadow_deepest: $shadow_deepest
 );
+
+:export {
+  @mixin export_shadows($shadows_list) {
+    @each $name, $settings in $shadows_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_shadows($box_shadows);
+}

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

@@ -11,3 +11,13 @@ $spaces:(
   space_xl:   $space_xl,
   none: 0
 );
+
+
+:export {
+  @mixin export_spacing($spacing_list) {
+    @each $name, $size in $spacing_list {
+      #{$name}: $size;
+    }
+  }
+  @include export_spacing($spaces);
+}

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

@@ -62,3 +62,28 @@ $boldest:       800;
 $bolder:        700;
 $light:         300;
 $lighter:       100;
+
+
+
+:export {
+  font_family_base: $font_family_base;
+  text_jumbo: $text_jumbo;
+  text_largest: $text_largest;
+  text_larger: $text_larger;
+  text_large: $text_large;
+  text_base: $text_base;
+  text_default: $text_default;
+  text_normal: $text_normal;
+  text_medium: $text_medium;
+  text_small: $text_small;
+  text_smaller: $text_smaller;
+  text_smallest: $text_smallest;
+  heading_1: $heading_1;
+  heading_2: $heading_2;
+  heading_3: $heading_3;
+  heading_4: $heading_4;
+  lighter: $lighter;
+  light: $light;
+  bold: $bold;
+  regular: $regular;
+}

data/app/pb_kits/playbook/utilities/test-utils.js

@@ -39,9 +39,3 @@ export const ensureAccessible = async (Kit, props = {}, newProps = {}) => {
   const html = render()
   expect(await axe(html)).toHaveNoViolations()
 }
-
-export const appendAlert = (message) => {
-  const alertNode = document.createElement('div')
-  alertNode.innerHTML = message
-  document.querySelector('body').appendChild(alertNode)
-}