RubyGems - playbook_ui - Versions diffs - 13.16.0.pre.alpha.PLAY11642006 → 13.16.0.pre.alpha.PLAY12002127 - Mend

playbook_ui 13.16.0.pre.alpha.PLAY11642006 → 13.16.0.pre.alpha.PLAY12002127

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx ADDED Viewed

@@ -0,0 +1,57 @@
+import React, { useState } from 'react'
+import {
+  Body,
+  Button,
+  CircleIconButton,
+  Flex,
+  PbReactPopover,
+} from '../..'
+const PopoverActionableContent = (props) => {
+  const [showPopover, setShowPopover] = useState(false)
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+  const handleShouldClosePopover = (shouldClose) => {
+    setShowPopover(!shouldClose)
+  }
+  const popoverReference = (
+    <CircleIconButton
+        icon="info"
+        onClick={handleTogglePopover}
+        variant="secondary"
+    />
+  )
+  return (
+    <Flex
+        orientation="row"
+        vertical="center"
+        {...props}
+    >
+      <Body text="Click info for more details" />
+      &nbsp;
+      <PbReactPopover
+          closeOnClick="inside"
+          offset
+          placement="top"
+          reference={popoverReference}
+          shouldClosePopover={handleShouldClosePopover}
+          show={showPopover}
+          {...props}
+      >
+        <Body textAlign="center">
+          <Button
+              onClick={() => {alert("Let's do this!")}}
+              text="Learn More"
+          />
+        </Body>
+      </PbReactPopover>
+    </Flex>
+  )
+}
+export default PopoverActionableContent

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

@@ -5,6 +5,7 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
+    - popover_actionable_content: With Actionable Content
   react:
     - popover_default: Default
@@ -12,4 +13,4 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
+    - popover_actionable_content: With Actionable Content

data/app/pb_kits/playbook/pb_popover/docs/index.js CHANGED Viewed

@@ -3,3 +3,4 @@ export { default as PopoverList } from './_popover_list.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'
+export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'

data/app/pb_kits/playbook/pb_table/_table.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 import PbTable from '.'
 type TableProps = {
@@ -9,19 +9,19 @@ type TableProps = {
   children: React.ReactNode[] | React.ReactNode,
   className: string,
   collapse?: "sm" | "md" | "lg",
-  container: boolean,
+  container?: boolean,
   dark?: boolean,
   data?: { [key: string]: string },
   dataTable: boolean,
-  disableHover: boolean,
+  disableHover?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  responsive: "collapse" | "scroll" | "none",
-  singleLine: boolean,
-  size: "sm" | "md" | "lg",
+  responsive?: "collapse" | "scroll" | "none",
+  singleLine?: boolean,
+  size?: "sm" | "md" | "lg",
   sticky?: boolean,
   verticalBorder?: boolean,
-}
+} & GlobalProps
 const Table = (props: TableProps) => {
   const {
@@ -56,29 +56,29 @@ const Table = (props: TableProps) => {
   return (
     <table
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classnames(
-        'pb_table',
-        `table-${size}`,
-        `table-responsive-${responsive}`,
-        {
-          'table-card': container,
-          'table-dark': dark,
-          'data_table': dataTable,
-          'single-line': singleLine,
-          'no-hover': disableHover,
-          'sticky-header': sticky,
-        },
-        globalProps(props),
-        tableCollapseCss,
-        verticalBorderCss,
-        className
-      )}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(
+          'pb_table',
+          `table-${size}`,
+          `table-responsive-${responsive}`,
+          {
+            'table-card': container,
+            'table-dark': dark,
+            'data_table': dataTable,
+            'single-line': singleLine,
+            'no-hover': disableHover,
+            'sticky-header': sticky,
+          },
+          globalProps(props),
+          tableCollapseCss,
+          verticalBorderCss,
+          className
+        )}
+        id={id}
     >
-      {children}
+        {children}
     </table>
   )
 }

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss CHANGED Viewed

@@ -148,7 +148,7 @@
     .placeholder {
       position: absolute;
       margin-right: 2px;
-      margin-left: 2px;
+      margin-left: 10px;
       top: 50%;
       transform: translateY(-50%);
       box-sizing: border-box;

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx CHANGED Viewed

@@ -73,8 +73,10 @@ const TypeaheadWithHighlight = (props) => {
     Option: (highlightProps: OptionProps) => (
       <components.Option {...highlightProps}/>
     ),
-    SingleValue: ({ data }: any) => (
-      <span>{data.name}</span>
+    SingleValue: ({ ...props }) => (
+      <components.SingleValue {...props}>
+        <span>{props.data.name}</span>
+      </components.SingleValue>
     )
   }

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

@@ -4,6 +4,7 @@ import WebpackerReact from 'webpacker-react'
 // KIT EXAMPLES
 import 'pb_form/pb_form_validation'
+import * as AdvancedTable from 'pb_advanced_table/docs'
 import * as Avatar from 'pb_avatar/docs'
 import * as AvatarActionButton from 'pb_avatar_action_button/docs'
 import * as Background from 'pb_background/docs'
@@ -105,6 +106,7 @@ import * as Walkthrough from 'pb_walkthrough/docs'
 import * as WeekdayStacked from 'pb_weekday_stacked/docs'
 WebpackerReact.registerComponents({
+  ...AdvancedTable,
   ...Avatar,
   ...AvatarActionButton,
   ...Background,

data/app/pb_kits/playbook/utilities/globalProps.ts CHANGED Viewed

@@ -17,7 +17,7 @@ type AlignContent = {
 }
 type AlignItems = {
-  alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
+  alignItems?: Alignment | ("flexStart" | "flexEnd" | "stretch" | "baseline")
 }
 type AlignSelf = {

data/dist/menu.yml CHANGED Viewed

@@ -43,6 +43,9 @@ kits:
       - name: "table"
         platforms: *web
         description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data.
+      - name: "advanced_table"
+        platforms: *react_only
+        description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
       - name: "list"
         platforms: *web
         description: Lists display a vertical set of related content.
@@ -354,4 +357,4 @@ kits:
         description: Multiple users stacked is used in tight spaces, where we need to indicate that multiple users are associated to a specific action or item.
       - name: "user"
         platforms: *web
-        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
+        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.