playbook_ui 4.18.1 → 5.0.3

data/app/pb_kits/playbook/pb_list/docs/_list_borderless.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { List, ListItem } from '../../'
+
+const ListBorderless = () => {
+  return (
+    <>
+      <List
+          borderless
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListBorderless

data/app/pb_kits/playbook/pb_list/docs/_list_dark.jsx

@@ -6,12 +6,7 @@ const ListDark = () => {
   return (
     <>
       <List
-          borderless
           dark
-          layout="right"
-          ordered
-          size="large"
-          xpadding
       >
         <ListItem>{'Item 1'}</ListItem>
         <ListItem>{'Item 2'}</ListItem>

data/app/pb_kits/playbook/pb_list/docs/_list_dark_borderless.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { List, ListItem } from '../../'
+
+const ListDarkBorderless = () => {
+  return (
+    <>
+      <List
+          borderless
+          dark
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListDarkBorderless

data/app/pb_kits/playbook/pb_list/docs/_list_dark_lg.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { List, ListItem } from '../../'
+
+const ListDarkLg = () => {
+  return (
+    <>
+      <List
+          dark
+          size="large"
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListDarkLg

data/app/pb_kits/playbook/pb_list/docs/_list_dark_ordered.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { List, ListItem } from '../../'
+
+const ListDarkOrdered = () => {
+  return (
+    <>
+      <List
+          dark
+          ordered
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListDarkOrdered

data/app/pb_kits/playbook/pb_list/docs/_list_dark_xpadding.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { List, ListItem } from '../../'
+
+const ListDarkXpadding = () => {
+  return (
+    <>
+      <List
+          dark
+          xpadding
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListDarkXpadding

data/app/pb_kits/playbook/pb_list/docs/_list_layout_left.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+
+import { Currency, List, ListItem, Title } from '../../'
+
+const ListLayoutLeft = () => {
+  return (
+    <>
+      <List
+          layout="left"
+      >
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListLayoutLeft

data/app/pb_kits/playbook/pb_list/docs/_list_layout_right.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+
+import { Currency, List, ListItem, Title } from '../../'
+
+const ListLayoutRight = () => {
+  return (
+    <>
+      <List
+          layout="right"
+      >
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListLayoutRight

data/app/pb_kits/playbook/pb_list/docs/_list_lg.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { List, ListItem } from '../../'
+
+const ListLg = () => {
+  return (
+    <>
+      <List
+          size="large"
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListLg

data/app/pb_kits/playbook/pb_list/docs/_list_ordered.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { List, ListItem } from '../../'
+
+const ListOrdered = () => {
+  return (
+    <>
+      <List
+          ordered
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListOrdered

data/app/pb_kits/playbook/pb_list/docs/_list_xpadding.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { List, ListItem } from '../../'
+
+const ListXpadding = () => {
+  return (
+    <>
+      <List
+          xpadding
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListXpadding

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

@@ -14,4 +14,15 @@ examples:
   - list_dark_xpadding: Dark Horizontal Padding
   react:
   - list_default: Default
-  - list_dark: Dark
+  - list_lg: Large
+  - list_ordered: Ordered
+  - list_borderless: Borderless
+  - list_xpadding: Horizontal Padding
+  - list_layout_left: Layout Left
+  - list_layout_right: Layout Right
+  - list_dark: Dark Default
+  - list_dark_lg: Dark Large
+  - list_dark_ordered: Dark Ordered
+  - list_dark_borderless: Dark Borderless
+  - list_dark_xpadding: Dark Horizontal Padding
+ 

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

@@ -1,2 +1,13 @@
 export { default as ListDefault } from './_list_default.jsx'
 export { default as ListDark } from './_list_dark.jsx'
+export { default as ListXpadding } from './_list_xpadding.jsx'
+export { default as ListDarkBorderless } from './_list_dark_borderless.jsx'
+export { default as ListDarkLg } from './_list_dark_lg.jsx'
+export { default as ListDarkXpadding } from './_list_dark_xpadding.jsx'
+export { default as ListDarkOrdered } from './_list_dark_ordered.jsx'
+export { default as ListLayoutRight } from './_list_layout_right.jsx'
+export { default as ListLayoutLeft } from './_list_layout_left.jsx'
+export { default as ListLg } from './_list_lg.jsx'
+export { default as ListOrdered } from './_list_ordered.jsx'
+export { default as ListBorderless } from './_list_borderless.jsx'
+

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

@@ -2,9 +2,9 @@
   id: object.id,
   data: object.data,
   class: object.classname) do %>
-    <div class="popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
-      <%= pb_rails("card", props: {shadow: "deeper"}) do %>
+    <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
+      <div class="pb_popover_body <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
         <%= capture(&object.children) %>
-      <% end %>
+      </div>
     </div>
-<% end %>
+<% end %>

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

@@ -15,8 +15,6 @@ import { buildCss, noop } from '../utilities/props'
 import classnames from 'classnames'
 import { spacing } from '../utilities/spacing.js'
 
-import { Card } from '../'
-
 type PbPopoverProps = {
   className?: String,
   closeOnClick?: "outside" | "inside",
@@ -35,7 +33,7 @@ const POPOVER_MODIFIERS = {
     enabled: true,
     name: 'offset',
     options: {
-      offset: [0, 8],
+      offset: [0, 20],
     },
     phase: 'main',
   },
@@ -53,7 +51,25 @@ const Popover = (props: PbPopoverProps) => {
     offset,
     placement,
     referenceElement,
+    zIndex,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
   } = props
+
+  const popoverSpacing = spacing(props) ? spacing(props) : 'p_sm'
+  const zIndexStyle = zIndex ? { zIndex: zIndex } : {}
+  const widthHeightStyles = () => {
+    return Object.assign(
+      {},
+      maxHeight ? { maxHeight: maxHeight } : {},
+      maxWidth ? { maxWidth: maxWidth } : {},
+      minHeight ? { minHeight: minHeight } : {},
+      minWidth ? { minWidth: minWidth } : {}
+    )
+  }
+
   return (
     <Popper
         modifiers={popoverModifiers({ modifiers, offset })}
@@ -66,19 +82,26 @@ const Popover = (props: PbPopoverProps) => {
               className={`${buildCss('pb_popover_kit')} ${className}`}
               data-placement={placement}
               ref={ref}
-              style={style}
+              style={Object.assign(
+                {},
+                style,
+                zIndexStyle
+              )}
           >
             <div
                 className={classnames(
-                `${buildCss('popover_tooltip')} show`
+                `${buildCss('pb_popover_tooltip')} show`
               )}
             >
-              <Card
-                  className={spacing(props)}
-                  shadow="deeper"
+              <div
+                  className={classnames(
+                  'pb_popover_body',
+                  popoverSpacing
+                )}
+                  style={widthHeightStyles()}
               >
                 {children}
-              </Card>
+              </div>
             </div>
           </div>
         )
@@ -105,7 +128,7 @@ export default class PbReactPopover extends React.Component {
 
     document.body.addEventListener('click', ({ target }) => {
       const targetIsPopover =
-        target.closest('[class^=popover_tooltip]') !== null
+        target.closest('[class^=pb_popover_tooltip]') !== null
       const targetIsReference =
         target.closest('.pb_popover_reference_wrapper') !== null
 
@@ -143,16 +166,26 @@ export default class PbReactPopover extends React.Component {
       referenceElement,
       show,
       usePortal,
+      zIndex,
+      maxHeight,
+      maxWidth,
+      minHeight,
+      minWidth,
     } = this.props
 
     const popoverComponent = (
       <Popover
           {...this.props}
           className={className}
+          maxHeight={maxHeight}
+          maxWidth={maxWidth}
+          minHeight={minHeight}
+          minWidth={minWidth}
           modifiers={modifiers}
           offset={offset}
           placement={placement}
           referenceElement={referenceElement}
+          zIndex={zIndex}
       >
         {children}
       </Popover>