RubyGems - playbook_ui - Versions diffs - 4.17.0.pre.alpha1 → 5.0.1.pre.alpha1 - Mend

playbook_ui 4.17.0.pre.alpha1 → 5.0.1.pre.alpha1

Files changed (322) hide show

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx ADDED

@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import {
+  Body,
+  Button,
+  PbReactPopover,
+} from '../..'
+const PopoverZIndex = () => {
+  const [showPopover, setShowPopover] = useState(false)
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setShowPopover(!shouldClosePopover)
+  }
+  const popoverTrigger = (
+    <Button
+        onClick={handleTogglePopover}
+        text="Click Me"
+        variant="secondary"
+    />
+  )
+  return (
+    <>
+      <div style={{ position: 'relative', zIndex: 2 }}>
+        <Body
+            marginBottom="md"
+            text="I've got a z-index of 2"
+        />
+      </div>
+      <PbReactPopover
+          closeOnClick="outside"
+          offset
+          placement="top"
+          reference={popoverTrigger}
+          shouldClosePopover={handleShouldClosePopover}
+          show={showPopover}
+          zIndex={3}
+      >
+        {'I have a custom z-index of 3'}
+      </PbReactPopover>
+    </>
+  )
+}
+export default PopoverZIndex

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

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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_progress_pills/_progress_pills.html.erb CHANGED

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

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx CHANGED

@@ -2,14 +2,26 @@
 import React from 'react'
 import { Body, Title } from '../'
+import classnames from 'classnames'
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 type ProgressPillsProps = {
   active?: Number,
+  aria?: object,
+  className?: String,
+  data?: object,
+  id?: String,
   steps?: Number,
   title?: String,
   value?: String,
   dark?: Boolean,
 }
 const showSteps = (steps, active, dark) => {
@@ -22,22 +34,41 @@ const showSteps = (steps, active, dark) => {
   return items
 }
-const ProgressPill = ({
-  active,
-  dark,
-  step,
-}: ProgressPillProps) => (
+const ProgressPill = ({ active, dark, step }: ProgressPillProps) => (
   <div
-      className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? '_dark' : null}`}
+      className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${
+      dark ? '_dark' : ''
+    }`}
       key={step}
   />
 )
-const ProgressPills = ({ active = 0, steps = 3, title = null, value = null, dark = false }: ProgressPillsProps) => {
+const ProgressPills = (props: ProgressPillsProps) => {
+  const {
+    active = 0,
+    aria = {},
+    className,
+    data = {},
+    id,
+    steps = 3,
+    title,
+    value,
+    dark = false,
+  } = props
   const darkClass = dark ? '_dark' : ''
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_progress_pills_kit', darkClass), className, spacing(props))
   return (
-    <div className={`pb_progress_pills_kit${darkClass}`}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <If condition={title}>
         <div className="progress_pills_status">
           <Title
@@ -53,10 +84,7 @@ const ProgressPills = ({ active = 0, steps = 3, title = null, value = null, dark
           />
         </div>
       </If>
-      <div className="progress_pills">
-        {showSteps(steps, active, dark)}
-      </div>
+      <div className="progress_pills">{showSteps(steps, active, dark)}</div>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx CHANGED

@@ -2,6 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 type ProgressSimpleProps = {
   align?: "left" | "center" | "right",
@@ -13,19 +14,20 @@ type ProgressSimpleProps = {
   muted: Boolean,
   percent: String,
   value: Number,
-  width: String
+  width: String,
 }
-const ProgressSimple = ({
-  align,
-  className,
-  dark = false,
-  max,
-  muted = false,
-  percent = '',
-  value,
-  width = '100%',
-}: ProgressSimpleProps) => {
+const ProgressSimple = (props: ProgressSimpleProps) => {
+  const {
+    align,
+    className,
+    dark = false,
+    max,
+    muted = false,
+    percent = '',
+    value,
+    width = '100%',
+  } = props
   const styles = {
     width: width,
   }
@@ -36,7 +38,8 @@ const ProgressSimple = ({
   const wrapperClass = classnames(
     className,
-    buildCss('pb_progress_simple_wrapper', align, { dark: dark })
+    buildCss('pb_progress_simple_wrapper', align, { dark: dark }),
+    spacing(props)
   )
   const kitClass = classnames(

data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx CHANGED

@@ -3,30 +3,37 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 type ProgressStepProps = {
   className?: String,
   data?: String,
   id?: String,
   children?: Array<React.ReactChild>,
-  orientation?: 'horizontal' | 'vertical',
+  orientation?: "horizontal" | "vertical",
   icon?: Boolean,
   dark?: Boolean,
 }
-const ProgressStep = ({
-  className,
-  children,
-  orientation = 'horizontal',
-  icon = false,
-  dark = false,
-}: ProgressStepProps) => {
+const ProgressStep = (props: ProgressStepProps) => {
+  const {
+    className,
+    children,
+    orientation = 'horizontal',
+    icon = false,
+    dark = false,
+  } = props
   const iconStyle = icon === true ? 'icon' : ''
   const darkStyle = dark === true ? 'dark' : ''
-  const progressStepCss = buildCss('pb_progress_step_kit', orientation, iconStyle, darkStyle)
+  const progressStepCss = buildCss(
+    'pb_progress_step_kit',
+    orientation,
+    iconStyle,
+    darkStyle
+  )
   return (
-    <div className={classnames(progressStepCss, className)}>
+    <div className={classnames(progressStepCss, className, spacing(props))}>
       {children}
     </div>
   )

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

@@ -3,6 +3,8 @@
 import React from 'react'
 import Body from '../pb_body/_body.jsx'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 type RadioProps = {
   className?: String,
@@ -38,7 +40,7 @@ const Radio = ({
   return (
     <label
-        className={'pb_radio_kit' + (dark === true ? '_dark ' : ' ') + errorClass + ' ' + className}
+        className={classnames('pb_radio_kit' + (dark === true ? '_dark ' : ' ') + errorClass + ' ' + className, spacing(props))}
         htmlFor={id}
     >
       <If condition={children}>

data/app/pb_kits/playbook/pb_section_separator/_section_separator.html.erb CHANGED

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

data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx CHANGED

@@ -1,30 +1,45 @@
 /* @flow */
 import React from 'react'
 import classnames from 'classnames'
-import Caption from '../pb_caption/_caption.jsx'
+import { Caption } from '../'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 type SectionSeparatorProps = {
+  aria: object,
   className: String,
+  dark?: Boolean,
+  data: object,
+  id: String,
+  orientation?: "horizontal" | "vertical",
   text: String,
-  orientation?: 'horizontal' | 'vertical',
-  variant?: 'card' | 'background',
-  dark?: Boolean
+  variant?: "card" | "background",
 }
-const SectionSeparator = ({
-  className,
-  text,
-  orientation = 'horizontal',
-  variant = 'card',
-  dark = false,
-}: SectionSeparatorProps) => {
+const SectionSeparator = (props: SectionSeparatorProps) => {
+  const {
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    id,
+    orientation = 'horizontal',
+    text,
+    variant = 'card',
+  } = props
   const themeStyle = dark === true ? '_dark' : ''
-  const css = classnames([
-    `pb_section_separator_kit_${variant}_${orientation}` + themeStyle,
-    className])
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, themeStyle), className, spacing(props))
   return (
-    <div className={css}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <span>
         <Caption text={text} />
       </span>