playbook_ui 10.21.0.pre.alpha.lightbox.2 → 10.21.0.pre.alpha.na1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d8de309283f70eb32584fd45cd9c8c1d86eb4379dd3268b32c04961a3c1eb78c
-  data.tar.gz: 5d658516cec5f8eae57b9a5c04375524b9f03bb091171941a30776390130418c
+  metadata.gz: c91379a8ff1fbd4421f2d351cfd11cd08cf5dac3b00d275e2b8312b64ab983a9
+  data.tar.gz: 80f1bcd2b434b6213116668028aadbce11ef28b54d5ab758aea3d87c00eee109
 SHA512:
-  metadata.gz: 4ed16f1d8e6ab09e07dfc3f397700e4f41e90716ad91b61dbc33cc31615325a399affdcfb39448b7f5550784c4706ebeac6dfe1b0e4679a8bdd7207d956effaa
-  data.tar.gz: 634bc7cdb80465bb4c226a3b8f8f938380d57c44be6d94e0605c3ba3b357724d251c6a014e766b2173d35c2a22cac965637f953a5864f63ecd73eb466b6614b2
+  metadata.gz: 10bd2dc160d0cc7ad0cfc921b20b0429611bb628b6203cfa75528bfa32c4a3bf2a57506f4922dbb8fdfc2e75df4e0698759d21312a9a78dac41b3c044a5eea6e
+  data.tar.gz: c372e8a2490809b8345cb99230a49cb3c2420bdeec256a05cad5d10688a16ca447b44cbc582ab5cebd1af8517f7a3fc0ed63fdc7f22c54316461930baff3161f

data/app/pb_kits/playbook/_playbook.scss

@@ -47,7 +47,6 @@
 @import 'pb_label_value/label_value';
 @import 'pb_layout/layout';
 @import 'pb_legend/legend';
-@import 'pb_lightbox/lightbox';
 @import 'pb_line_graph/line_graph';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';

data/app/pb_kits/playbook/data/menu.yml

@@ -51,7 +51,6 @@ kits:
   - layouts:
     - flex
     - layout
-  - lightbox
   - list
   - loading_inline
   - nav

data/app/pb_kits/playbook/index.js

@@ -4,6 +4,7 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
 
 // vvv React Component JSX Imports from the React Kits vvv
+export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
 export { default as Avatar } from './pb_avatar/_avatar'
 export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
 export { default as Background } from './pb_background/_background'
@@ -54,7 +55,6 @@ export { default as Layout } from './pb_layout/_layout'
 export { default as Legend } from './pb_legend/_legend'
 export { default as LineGraph } from './pb_line_graph/_line_graph'
 export { default as List } from './pb_list/_list'
-export { default as Lightbox } from './pb_lightbox/_lightbox'
 export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
 export { default as Message } from './pb_message/_message'
@@ -101,7 +101,6 @@ export { default as Toggle } from './pb_toggle/_toggle'
 export { default as Typeahead } from './pb_typeahead/_typeahead'
 export { default as User } from './pb_user/_user'
 export { default as UserBadge } from './pb_user_badge/_user_badge'
-export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
 export { default as WeekdayStacked } from './pb_weekday_stacked/_weekday_stacked'
 // ^^^ React Component JSX Imports from the React Kits ^^^
 

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx

@@ -8,7 +8,6 @@ import pbChart from '../plugins/pb_chart'
 
 type BarGraphProps = {
   axisTitle: string,
-  dark?: Boolean,
   xAxisCategories: array,
   yAxisMin: number,
   yAxisMax: number,
@@ -31,7 +30,6 @@ type BarGraphProps = {
 export default class BarGraph extends React.Component<BarGraphProps> {
   static defaultProps = {
     className: 'pb_bar_graph',
-    dark: false,
     type: 'column',
     legend: false,
     toggleLegendClick: true,
@@ -40,7 +38,6 @@ export default class BarGraph extends React.Component<BarGraphProps> {
   componentDidMount() {
     const {
       axisTitle,
-      dark,
       xAxisCategories,
       yAxisMin,
       yAxisMax,
@@ -59,7 +56,6 @@ export default class BarGraph extends React.Component<BarGraphProps> {
 
     new pbChart(`.${className}`, {
       axisTitle: axisTitle,
-      dark,
       chartData: chartData,
       colors: colors,
       id: id,

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -33,7 +33,6 @@ module Playbook
           id: id,
           className: classname,
           chartData: chart_data,
-          dark: dark ? "dark" : "",
           type: chart_type,
           title: title,
           subtitle: subtitle,

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -22,7 +22,7 @@ type ButtonPropTypes = {
   loading?: boolean,
   newWindow?: boolean,
   onClick?: EventHandler,
-  size?: 'sm' | 'md' | 'lg',
+  size: 'large' | 'medium' | 'small',
   text?: string,
   type: 'inline' | null,
   htmlType: string | 'button',
@@ -36,19 +36,19 @@ const buttonClassName = (props: ButtonPropTypes) => {
     disabled = false,
     fullWidth = false,
     loading = false,
+    size = null,
     type = 'inline',
     variant = 'primary',
-    size = null,
   } = props
 
   let className = 'pb_button_kit'
 
   className += `${variant !== null ? `_${variant}` : ''}`
   className += `${type !== null ? `_${type}` : ''}`
+  className += `${size !== null ? `_${size}` : ''}`
   className += `${fullWidth ? '_block' : ''}`
   className += disabled ? '_disabled' : '_enabled'
   className += loading ? '_loading' : ''
-  className += `${size !== null ? ` size_${size}` : ''}`
 
   return className
 }

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -1,24 +1,7 @@
 @import "./button_mixins";
 
-$pb_button_sizes: (
-  "sm":   0.75rem,
-  "md":   0.875rem,
-  "lg":   1.125rem,
-);
-
-[class*=pb_button_kit]{
+[class^=pb_button_kit]{
   @include pb_button;
-  // Size =================
-  @each $name, $size in $pb_button_sizes {
-    &[class*=size_#{$name}] {
-      font-size: $size;
-      padding: calc(#{$size} / 2) calc(#{$size} * 2.42) !important;
-    }
-    @if $name == "sm" {
-      min-height: 0;
-    }
-  }
-
   // Variants =================
   &[class*=_primary]  {
     @include pb_button_primary;

data/app/pb_kits/playbook/pb_button/button.rb

@@ -18,9 +18,6 @@ module Playbook
       prop :text
       prop :type
       prop :value
-      prop :size, type: Playbook::Props::Enum,
-                  values: ["sm", "md", "lg", nil],
-                  default: nil
 
       def options
         {
@@ -47,13 +44,12 @@ module Playbook
         link ? "a" : "button"
       end
 
+    private
+
       def classname
-        button_class = generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
-        button_class + size_class
+        generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
       end
 
-    private
-
       def disabled_class
         disabled ? "disabled" : "enabled"
       end
@@ -65,10 +61,6 @@ module Playbook
       def loading_class
         loading ? "loading" : nil
       end
-
-      def size_class
-        size ? " size_#{size}" : ""
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_button/button.test.js

@@ -89,16 +89,3 @@ test('click event', async () => {
 
   expect(screen.getByText('clicked button!')).toBeInTheDocument()
 })
-
-test('size prop', () => {
-  render(
-    <Button
-        data={{ testid: 'size-test' }}
-        size="sm"
-    />
-  )
-
-  const kit = screen.getByTestId('size-test')
-
-  expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled size_sm')
-})

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

@@ -7,7 +7,6 @@ examples:
   - button_block_content: Button Block Content
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options
-  - button_size: Button Size
   react:
   - button_default: Button Variants
   - button_full_width: Button Full Width
@@ -16,4 +15,3 @@ examples:
   - button_block_content: Button Block Content
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options (onClick)
-  - button_size: Button Size

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

@@ -5,4 +5,3 @@ export { default as ButtonLoading } from './_button_loading.jsx'
 export { default as ButtonBlockContent } from './_button_block_content.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
-export { default as ButtonSize } from './_button_size.jsx'

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx

@@ -14,7 +14,6 @@ type CircleChartProps = {
   children: Node,
   className?: string,
   colors: array,
-  dark?: Boolean,
   data?: Object,
   dataLabelHtml: string,
   dataLabels: boolean,
@@ -41,7 +40,6 @@ const CircleChart = (props: CircleChartProps) => {
     children,
     className,
     colors = [],
-    dark = false,
     data = {},
     dataLabelHtml = '<div>{point.name}</div>',
     dataLabels = false,
@@ -83,7 +81,6 @@ const CircleChart = (props: CircleChartProps) => {
       borderColor: roundedBorderColor,
       borderWidth: roundedBorderWidth,
       chartData: formattedChartData,
-      dark,
       title,
       type: style,
       showInLegend: legend,

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -69,7 +69,6 @@ module Playbook
           borderColor: rounded_border_color,
           borderWidth: rounded_border_width,
           chartData: chart_data_formatted,
-          dark: dark ? "dark" : "",
           title: title,
           height: height,
           type: chart_type,

data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx

@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
 import classnames from 'classnames'
 
-import { buildCss, buildDataProps, noop } from '../utilities/props'
+import { buildCss, noop } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import type { Callback } from '../types'
 
@@ -14,17 +14,15 @@ import Card from '../pb_card/_card'
 type FileUploadProps = {
   accept?: array<string>,
   className?: string,
-  data?: object,
   acceptedFilesDescription?: string,
   onFilesAccepted: Callback,
 }
 
 const FileUpload = (props: FileUploadProps) => {
   const {
-    accept = null,
+    accept = ['*'],
     acceptedFilesDescription = '',
     className,
-    data = {},
     onFilesAccepted = noop,
   } = props
   const onDrop = useCallback((files) => {
@@ -36,22 +34,17 @@ const FileUpload = (props: FileUploadProps) => {
     onDrop,
   })
 
-  const acceptedFileTypes = () => {
-    return accept.map((fileType) => {
-      if (fileType.startsWith('image/')) {
-        return fileType.replace('image/', ' ')
-      } else {
-        return fileType
-      }
-    })
-  }
-
-  const dataProps = buildDataProps(data)
+  const acceptedFileTypes = accept.map((fileType) => {
+    if (fileType.startsWith('image/')) {
+      return fileType.replace('image/', ' ')
+    } else {
+      return fileType
+    }
+  })
 
   return (
     <div
         className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
-        {...dataProps}
         {...getRootProps()}
     >
       <Card>
@@ -60,7 +53,7 @@ const FileUpload = (props: FileUploadProps) => {
           <If condition={isDragActive}>
             <p>{'Drop the files here ...'}</p>
             <Else />
-            <p>{accept === null ? 'Choose a file or drag it here' : `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}`}</p>
+            <p>{`Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes}`}</p>
           </If>
         </Body>
       </Card>

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx

@@ -12,7 +12,6 @@ type GaugeProps = {
   aria: Object,
   className?: string,
   chartData?: array,
-  dark?: Boolean,
   data?: Object,
   disableAnimation: boolean,
   fullCircle: boolean,
@@ -34,7 +33,6 @@ const Gauge = (props: GaugeProps) => {
     aria = {},
     className,
     chartData = [{ name: 'Name', value: 0 }],
-    dark = false,
     data = {},
     disableAnimation = false,
     fullCircle = false,
@@ -69,7 +67,6 @@ const Gauge = (props: GaugeProps) => {
       id: id,
       chartData: formattedChartData,
       circumference: fullCircle ? [0, 360] : [-100, 100],
-      dark,
       disableAnimation: disableAnimation,
       height: height,
       min: min,

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -32,7 +32,6 @@ module Playbook
           id: id,
           chartData: chart_data_formatted,
           circumference: full_circle ? [0, 360] : [-100, 100],
-          dark: dark ? "dark" : "",
           disableAnimation: disable_animation,
           height: height,
           min: min,

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -34,7 +34,7 @@ const Image = (props: ImageProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_image_kit', size ? `size_${size}` : null),
+    buildCss('pb_image_kit', size),
     'lazyload',
     transition,
     { rounded },

data/app/pb_kits/playbook/pb_image/_image.scss

@@ -14,7 +14,7 @@ $image-sizes: (
   object-fit: cover;
 
   @each $name, $size in $image-sizes {
-    &[class*=size_#{$name}] {
+    &[class*=_#{$name}] {
       width: $size;
       height: $size;
       object-fit: cover;
@@ -35,7 +35,7 @@ $image-sizes: (
         transition: opacity 300ms ease-in;
       }
     }
-
+    
     &.blur {
       filter: blur(5px);
       &.lazyloaded {
@@ -44,7 +44,7 @@ $image-sizes: (
         transition: filter 300ms ease-in;
       }
     }
-
+    
     &.scale {
       opacity: 0;
       transform: scale(0.9);

data/app/pb_kits/playbook/pb_image/image.rb

@@ -27,7 +27,7 @@ module Playbook
       end
 
       def size_class
-        size == "none" ? nil : "_size_#{size}"
+        size == "none" ? nil : "_#{size}"
       end
 
       def transition_class

data/app/pb_kits/playbook/pb_image/image.test.js

@@ -26,7 +26,7 @@ test('default classname', () => {
 
 test('size = xs', () => {
   const kit = renderKit(Image, props, { size: 'xs' })
-  expect(kit).toHaveClass('pb_image_kit_size_xs lazyload')
+  expect(kit).toHaveClass('pb_image_kit_xs lazyload')
 })
 
 test('transition = blur', () => {

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx

@@ -8,7 +8,6 @@ import pbChart from '../plugins/pb_chart'
 
 type LineGraphProps = {
   axisTitle?: string,
-  dark?: Boolean,
   xAxisCategories: array,
   yAxisMin: number,
   yAxisMax: number,
@@ -32,7 +31,6 @@ type LineGraphProps = {
 export default class LineGraph extends React.Component<LineGraphProps> {
   static defaultProps = {
     className: 'pb_bar_graph',
-    dark: false,
     gradient: false,
     type: 'line',
     legend: false,
@@ -42,7 +40,6 @@ export default class LineGraph extends React.Component<LineGraphProps> {
   componentDidMount() {
     const {
       axisTitle,
-      dark,
       xAxisCategories,
       yAxisMin,
       yAxisMax,
@@ -63,7 +60,6 @@ export default class LineGraph extends React.Component<LineGraphProps> {
       axisTitle: axisTitle,
       chartData: chartData,
       colors: colors,
-      dark,
       id: id,
       pointStart: pointStart,
       subtitle: subTitle,

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -32,7 +32,6 @@ module Playbook
           id: id,
           className: classname,
           chartData: chart_data,
-          dark: dark ? "dark" : "",
           type: chart_type,
           title: title,
           subtitle: subtitle,

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

@@ -150,14 +150,16 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
       const targetIsReference =
         target.closest('.pb_popover_reference_wrapper') !== null
 
+      if (targetIsReference) return
+
       switch (closeOnClick) {
       case 'outside':
-        if (!targetIsPopover || targetIsReference) {
+        if (!targetIsPopover) {
           shouldClosePopover(true)
         }
         break
       case 'inside':
-        if (targetIsPopover || targetIsReference) {
+        if (targetIsPopover) {
           shouldClosePopover(true)
         }
         break

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb

@@ -1,23 +1,23 @@
 <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
   <span>
-    <%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id: "inside-popover-1" }) %>
+    <%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id: 'inside-popover-1' }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "inside",
       trigger_element_id: "inside-popover-1",
       tooltip_id: "inside-tooltip-1",
-      position: "bottom",
+      position: 'bottom',
       offset: true
     }) do %>
       Click on me!
     <% end %>
   </span>
   <span>
-    <%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id: "outside-popover-1" }) %>
+    <%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id: 'outside-popover-1' }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "outside",
       trigger_element_id: "outside-popover-1",
       tooltip_id: "outside-tooltip-1",
-      position: "left",
+      position: 'left',
       offset: true
     }) do %>
         Click anywhere but me!
@@ -27,16 +27,16 @@
     <%= pb_rails("button", props: {
       text: "Click Anywhere",
       variant: "secondary",
-      id: "any-popover-1"
+      id: 'any-popover-1'
     }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "any",
       trigger_element_id: "any-popover-1",
       tooltip_id: "any-tooltip-1",
-      position: "top",
+      position: 'top',
       offset: true
     }) do %>
       Click anything!
     <% end %>
   </span>
-<% end %>
+<% end %>

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

@@ -36,14 +36,15 @@ export default class PbPopover extends PbEnhancedElement {
       }
 
       setTimeout(() => {
-        this.toggleTooltip()
         this.popper.update()
+        this.toggleTooltip()
       }, 0)
     })
   }
 
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target }) => {
+      const isTriggerElement = target.closest(`#${this.triggerElementId}`) !== null
       const isTooltipElement = target.closest(`#${this.tooltipId}`) !== null
 
       switch (this.closeOnClick) {
@@ -51,17 +52,21 @@ export default class PbPopover extends PbEnhancedElement {
         this.hideTooltip()
         break
       case 'outside':
-        if (!isTooltipElement) {
+        if (isTooltipElement) {
+          this.checkCloseTooltip()
+        } else {
           this.hideTooltip()
         }
         break
       case 'inside':
-        if (isTooltipElement) {
+        if (isTooltipElement || isTriggerElement) {
           this.hideTooltip()
+        } else {
+          this.checkCloseTooltip()
         }
         break
       }
-    }, true)
+    }, { once: true })
   }
 
   hideTooltip() {

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -3,7 +3,7 @@
   class: object.classname,
   data: object.data,
   id: object.id) do %>
-  <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_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 %>">
       <%= content.presence %>
     </div>

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

@@ -129,10 +129,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     trixRef.current.addEventListener('click', handleClick)
   }, [])
 
-  useEffect(() => {
-    trixRef.current.editor.loadHTML(value)
-  }, [value])
-
   const RichTextEditorClass = 'pb_rich_text_editor_kit'
   const SimpleClass = simple ? 'simple' : ''
   const FocusClass = focus ? 'focus-editor-targets' : ''

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

@@ -4,12 +4,12 @@
 
 
 [class^=pb_text_input_kit] {
-  margin-bottom: $space_sm;
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;
   }
   .text_input_wrapper {
+    margin-bottom: $space_sm;
     display: block;
     input::placeholder,
     .text_input .placeholder {
@@ -169,7 +169,7 @@
     &-card {
       height: 45px;
       margin: 0;
-      padding: 0;
+      padding: 0 !important;
       align-items: center;
       justify-content: center;
       width: 45px;

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -75,17 +75,3 @@ test('returns additional class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} dark error`)
 })
-
-test('returns additional class name', () => {
-  render(
-    <TextInput
-        data={{ testid: testId }}
-        label="First Name"
-        marginBottom="lg"
-        placeholder="Enter first name"
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(`${kitClass} mb_lg`)
-})

data/app/pb_kits/playbook/playbook-doc.js

@@ -51,7 +51,6 @@ import * as LabelPill from 'pb_label_pill/docs'
 import * as LabelValue from 'pb_label_value/docs'
 import * as Layout from 'pb_layout/docs'
 import * as LegendDocs from 'pb_legend/docs'
-import * as Lightbox from 'pb_lightbox/docs'
 import * as LineGraphDocs from 'pb_line_graph/docs'
 import * as List from 'pb_list/docs'
 import * as LoadingInline from 'pb_loading_inline/docs'
@@ -146,7 +145,6 @@ WebpackerReact.setup({
   ...LabelValue,
   ...Layout,
   ...LegendDocs,
-  ...Lightbox,
   ...LineGraphDocs,
   ...List,
   ...LoadingInline,