playbook_ui_docs 14.17.0.pre.alpha.playcdntest7233 → 14.17.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 928d266a62ffa1fc328c1015aeebe1c4eac7f81e50b7ad6dcab8ff0036e42f2a
-  data.tar.gz: 7316c6e5e625708083da16241a65f95ac3e52f48d975fdf883e02d56dddfb325
+  metadata.gz: e5e99001e493bbb79c6b9bfdf598ee07d46a81e961199406eeeabd32a9565a9d
+  data.tar.gz: 5030c56f1a17c88716ce9260a94ca5b7d1bce2250ae2d3e37e5d322e4cd86edf
 SHA512:
-  metadata.gz: 95a4357a462767d5d382b097f358983f59b81f6068ddfb488dfbe3ba4605284f2b694226d042061697f8de24d1b8218ab939a9fe27fe0a209974ebfa5b8ddeba
-  data.tar.gz: fd21ce12213128f57c68c5eca0e28d4975a1e41889a67d4991ef405d01c9d837e5172e837f1c387033ed409bea9902e70934c617e913f961d303090533f2ddaf
+  metadata.gz: 996ea586c181e0e36cbdf2df01768695527a859f4f43935b7ad9df35c28eb7a263147dc0962452f03fc29edb297f4b5f13442d31d557096480d9b49a848dd848
+  data.tar.gz: 566dc754029a3b2b90c4aefd4884c5d55b8eb1ed071c3ea22342926866c6743c052b935c11d7e1bfd6664c06d9929992e5aa71d937fd1c1c0efc631c284c52e5

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

@@ -39,5 +39,4 @@ examples:
   - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
-  - advanced_table_inline_editing: Inline Cell Editing
-  - advanced_table_fullscreen: Fullscreen
+  - advanced_table_inline_editing: Inline Cell Editing

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

@@ -21,5 +21,4 @@ export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
-export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
-export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
+export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'

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

@@ -19,4 +19,3 @@ examples:
   - background_status_subtle: Status Subtle
   - background_category: Category
   - background_size: Size
-  - background_overlay: Overlay

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

@@ -6,4 +6,3 @@ export { default as BackgroundStatus } from './_background_status.jsx'
 export { default as BackgroundStatusSubtle } from './_background_status_subtle.jsx'
 export { default as BackgroundCategory } from './_background_category.jsx'
 export { default as BackgroundSize } from './_background_size.jsx'
-export { default as BackgroundOverlay } from './_background_overlay.jsx'

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb

@@ -4,3 +4,14 @@
   inline: true,
   picker_id: "date-picker-inline"
 }) %>
+
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", (event) => {
+    const fpInline = document.querySelector("#date-picker-inline")._flatpickr
+    <!-- Display the angle-down icon when a date has been selected -->
+    const showAngleDownHandler = () => {
+      document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
+    }
+    fpInline.config.onChange.push(showAngleDownHandler)
+  })
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.jsx

@@ -3,12 +3,19 @@ import React from 'react'
 import DatePicker from '../_date_picker'
 
 const DatePickerInline = (props) => {
+  const showAngleDownHandler = (dateSelected) => {
+    if (dateSelected) {
+      document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
+    }
+  }
+
   return (
     <div>
       <DatePicker
           className="inline-date-picker"
           hideIcon
           inLine
+          onChange={showAngleDownHandler}
           pickerId="date-picker-inline"
           {...props}
       />

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx

@@ -60,120 +60,123 @@ const DraggableDropZones = (props) => {
 
   return (
     <>
-      <Flex justify="between"
-          {...props}
-      >
-        <FlexItem marginRight="xl">
-          <DraggableProvider
-              dropZone={{type: "shadow"}}
-              initialItems={dataShadow}
-              onReorder={(items) => setInitialShadowState(items)}
-          >
-              <Caption
+    <Flex justify="between"
+        {...props}
+    >
+      <FlexItem marginRight="xl">
+        <DraggableProvider
+            dropZone={{type: "shadow"}}
+            initialItems={dataShadow}
+            onReorder={(items) => setInitialShadowState(items)}
+        >
+            <Caption
+                marginBottom="xs"
+                textAlign="center"
+            >
+              {"Shadow"}
+            </Caption>
+            <Draggable.Container
+                htmlOptions={{style:{ width: "200px"}}}
+                {...props}
+            >
+            {initialShadowState.map(({ id, text }) => (
+              <Card dragId={id}
+                  draggableItem
+                  key={id}
                   marginBottom="xs"
-                  text="Shadow"
-                  textAlign="center"
-              />
-              <Draggable.Container
-                  htmlOptions={{style:{ width: "200px"}}}
+                  padding="xs"
                   {...props}
               >
-              {initialShadowState.map(({ id, text }) => (
-                <Card dragId={id}
-                    draggableItem
-                    key={id}
-                    marginBottom="xs"
-                    padding="xs"
-                    {...props}
+                <Flex alignItems="stretch"
+                    flexDirection="column"
                 >
-                  <Flex alignItems="stretch"
-                      flexDirection="column"
-                  >
-                    <Body
-                        text={text}
-                        {...props}
-                    />
-                  </Flex>
-                </Card>
-              ))}
-              </Draggable.Container>
-          </DraggableProvider>
-        </FlexItem>
-        <FlexItem marginRight="xl">
-          <DraggableProvider
-              dropZone={{type: "outline"}}
-              initialItems={dataOutline}
-              onReorder={(items) => setInitialOutlineState(items)}
-          >
-              <Caption
+                  <Body
+                      text={text}
+                      {...props}
+                  />
+                </Flex>
+              </Card>
+            ))}
+            </Draggable.Container>
+        </DraggableProvider>
+      </FlexItem>
+      <FlexItem marginRight="xl">
+        <DraggableProvider
+            dropZone={{type: "outline"}}
+            initialItems={dataOutline}
+            onReorder={(items) => setInitialOutlineState(items)}
+        >
+            <Caption
+                marginBottom="xs"
+                textAlign="center"
+            >
+              {"Outline"}
+            </Caption>
+            <Draggable.Container
+                htmlOptions={{style:{ width: "200px"}}}
+                {...props}
+            >
+            {initialOutlineState.map(({ id, text }) => (
+              <Card
+                  dragId={id}
+                  draggableItem
+                  key={id}
                   marginBottom="xs"
-                  text="Outline"
-                  textAlign="center"
-              />
-              <Draggable.Container
-                  htmlOptions={{style:{ width: "200px"}}}
+                  padding="xs"
                   {...props}
               >
-              {initialOutlineState.map(({ id, text }) => (
-                <Card
-                    dragId={id}
-                    draggableItem
-                    key={id}
-                    marginBottom="xs"
-                    padding="xs"
-                    {...props}
+                <Flex
+                    alignItems="stretch"
+                    flexDirection="column"
                 >
-                  <Flex
-                      alignItems="stretch"
-                      flexDirection="column"
-                  >
-                    <Body
-                        text={text}
-                        {...props}
-                    />
-                  </Flex>
-                </Card>
-              ))}
-              </Draggable.Container>
-          </DraggableProvider>
-        </FlexItem>
-        <FlexItem>
-          <DraggableProvider
-              dropZone={{type: "line"}}
-              initialItems={dataLine}
-              onReorder={(items) => setInitialLineState(items)}
-          >
-              <Caption
+                  <Body
+                      text={text}
+                      {...props}
+                  />
+                </Flex>
+              </Card>
+            ))}
+            </Draggable.Container>
+        </DraggableProvider>
+      </FlexItem>
+      <FlexItem>
+        <DraggableProvider
+            dropZone={{type: "line"}}
+            initialItems={dataLine}
+            onReorder={(items) => setInitialLineState(items)}
+        >
+            <Caption
+                marginBottom="xs"
+                textAlign="center"
+            >
+              {"Line"}
+            </Caption>
+            <Draggable.Container
+                htmlOptions={{style:{ width: "200px"}}}
+                {...props}
+            >
+            {initialLineState.map(({ id, text }) => (
+              <Card dragId={id}
+                  draggableItem
+                  key={id}
                   marginBottom="xs"
-                  text="Line"
-                  textAlign="center"
-              />
-              <Draggable.Container
-                  htmlOptions={{style:{ width: "200px"}}}
+                  padding="xs"
                   {...props}
               >
-              {initialLineState.map(({ id, text }) => (
-                <Card dragId={id}
-                    draggableItem
-                    key={id}
-                    marginBottom="xs"
-                    padding="xs"
-                    {...props}
+                <Flex alignItems="stretch"
+                    flexDirection="column"
                 >
-                  <Flex alignItems="stretch"
-                      flexDirection="column"
-                  >
-                    <Body
-                        text={text}
-                        {...props}
-                    />
-                  </Flex>
-                </Card>
-              ))}
-              </Draggable.Container>
-          </DraggableProvider>
-        </FlexItem>
-      </Flex>
+                  <Body
+                      text={text}
+                      {...props}
+                  />
+                </Flex>
+              </Card>
+            ))}
+            </Draggable.Container>
+        </DraggableProvider>
+      </FlexItem>
+    </Flex>
     </>
   );
 };

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md

@@ -1,5 +1,5 @@
-  The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
+The Draggable kit allows you to choose the style of drop zones that appear when dragging an item.
 
-By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
+By default, the Draggable kit utilizes the "ghost" style for drop zones, but you can also choose between "shadow", "outline", and "line".
 
-When using the "line" type, make sure to set the appropriate `direction` attribute within the `dropZone` prop based on the orientation of your draggable view. By default, this is set to "vertical," but it can also be adjusted to "horizontal." Note that the direction attribute only applies to the "line" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the [Draggable Drop Zones Line doc example](https://playbook.powerapp.cloud/kits/draggable/react#draggable-drop-zones-line).
+Additionally, when using the "line" style, be sure to set the proper `direction` attribute within the `dropZone` prop depending on the orentation of your draggable view. By default, this attribute is set to "vertical", but can also be used with a "horizontal" direction. The `direction` attribute only applies to the "line" style and will not affect other drop zone styles.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx

@@ -6,8 +6,6 @@ import Caption from '../../pb_caption/_caption'
 import Draggable from '../../pb_draggable/_draggable'
 import { DraggableProvider } from '../../pb_draggable/context'
 
-
-
 // Initial items to be dragged
 const dataPrimary = [
   {
@@ -44,54 +42,54 @@ const DraggableDropZonesColors = (props) => {
 
   return (
     <>
-      <Caption marginBottom="xs"
-          text="Primary"
-      />
-      <DraggableProvider
-          dropZone={{type: "shadow", color: "primary"}}
-          initialItems={dataPrimary}
-          onReorder={(items) => setInitialPrimaryState(items)}
-      >
-          <Draggable.Container {...props}>
-              <Flex>
-                  {initialPrimaryState.map(({ id, url }) => (
-                    <Draggable.Item dragId={id}
-                        key={id}
-                        marginRight="sm"
-                    >
-                        <Image alt={id}
-                            size="md"
-                            url={url}
-                        />
-                    </Draggable.Item>
-                  ))}
-              </Flex>
-          </Draggable.Container>
-      </DraggableProvider>
-      <Caption marginBottom="xs"
-          text="Purple"
-      />
-      <DraggableProvider
-          dropZone={{type: "outline", color: "purple"}}
-          initialItems={dataPurple}
-          onReorder={(items) => setInitialPurpleState(items)}
-      >
-          <Draggable.Container {...props}>
-              <Flex>
-                  {initialPurpleState.map(({ id, url }) => (
-                    <Draggable.Item dragId={id}
-                        key={id}
-                        marginRight="sm"
-                    >
-                        <Image alt={id}
-                            size="md"
-                            url={url}
-                        />
-                    </Draggable.Item>
-                  ))}
-              </Flex>
-          </Draggable.Container>
-      </DraggableProvider>
+    <Caption marginBottom="xs">
+      Primary
+    </Caption>
+    <DraggableProvider
+        dropZone={{type: "shadow", color: "primary"}}
+        initialItems={dataPrimary}
+        onReorder={(items) => setInitialPrimaryState(items)}
+    >
+        <Draggable.Container {...props}>
+        <Flex>
+            {initialPrimaryState.map(({ id, url }) => (
+              <Draggable.Item dragId={id}
+                  key={id}
+                  marginRight="sm"
+              >
+                <Image alt={id}
+                    size="md"
+                    url={url}
+                />
+              </Draggable.Item>
+            ))}
+         </Flex>
+        </Draggable.Container>
+    </DraggableProvider>
+    <Caption marginBottom="xs">
+      Purple
+    </Caption>
+    <DraggableProvider
+        dropZone={{type: "outline", color: "purple"}}
+        initialItems={dataPurple}
+        onReorder={(items) => setInitialPurpleState(items)}
+    >
+        <Draggable.Container {...props}>
+        <Flex>
+            {initialPurpleState.map(({ id, url }) => (
+              <Draggable.Item dragId={id}
+                  key={id}
+                  marginRight="sm"
+              >
+                <Image alt={id}
+                    size="md"
+                    url={url}
+                />
+              </Draggable.Item>
+            ))}
+         </Flex>
+        </Draggable.Container>
+    </DraggableProvider>
     </>
   );
 };

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md

@@ -1 +1 @@
-  The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options. When `type` is set to "line", the default color is "primary" and "purple" is the only other option.
+By default, the Draggable kit sets the default color of drop zones to "neutral" (or "primary" if using the "line" style.)

data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.jsx → _draggable_with_table_react.jsx}

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 
 import Flex from '../../pb_flex/_flex'
-import { DraggableProvider } from '../context'
+import { DraggableProvider } from '../../pb_draggable/context'
 import Avatar from '../../pb_avatar/_avatar'
 import Body from '../../pb_body/_body'
 import Table from '../../pb_table/_table'

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md

@@ -2,6 +2,4 @@ The draggable kit can also be used in conjunction with the table kit to create d
 
 - Wrap the Table with the `DraggableProvider` and manage state as shown. 
 - use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
-- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here. 
-
-We recommending using the default `dropZone type` with the Table kit.
+- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here. 

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

@@ -4,17 +4,14 @@ examples:
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
-  - draggable_with_table: Draggable with Table
+  - draggable_with_table_react: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
-  - draggable_drop_zones: Draggable Drop Zones
-  - draggable_drop_zones_colors: Draggable Drop Zones Colors
-  - draggable_drop_zones_line: Draggable Drop Zones Line
 
   rails:
-  - draggable_default: Default
-  - draggable_with_list: Draggable with List Kit
-  - draggable_with_selectable_list: Draggable with SelectableList Kit
-  - draggable_with_cards: Draggable with Cards
+  - draggable_default_rails: Default
+  - draggable_with_list_rails: Draggable with List Kit
+  - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
+  - draggable_with_cards_rails: Draggable with Cards
   - draggable_with_table: Draggable with Table
-  - draggable_multiple_containers: Dragging Across Multiple Containers
+  - draggable_multiple_containers_rails: Dragging Across Multiple Containers
 

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

@@ -3,7 +3,4 @@ export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
 export { default as DraggableWithList } from './_draggable_with_list.jsx'
 export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
 export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
-export { default as DraggableWithTable } from './_draggable_with_table.jsx'
-export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
-export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
-export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
+export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx

@@ -12,7 +12,7 @@ const DropdownWithAutocomplete = (props) => {
       label: "Jasper Furniss",
       value: "Jasper Furniss",
       territory: "PHL",
-      title: "Lead UX Engineer",
+      title: "Senior UX Engineer",
       id: "jasper-furniss",
       status: "Offline"
     },
@@ -25,18 +25,18 @@ const DropdownWithAutocomplete = (props) => {
       status: "Away"
     },
     {
-      label: "Carlos Lima",
-      value: "Carlos Lima",
+      label: "Jason Cypret",
+      value: "Jason Cypret",
       territory: "PHL",
-      title: "Nitro Developer",
-      id: "carlos-lima",
+      title: "VP of User Experience",
+      id: "jason-cypret",
       status: "Online"
     },
     {
       label: "Courtney Long",
       value: "Courtney Long",
       territory: "PHL",
-      title: "Lead UX Designer",
+      title: "UX Design Mentor",
       id: "courtney-long",
       status: "Online"
     }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx

@@ -15,7 +15,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
       label: "Jasper Furniss",
       value: "Jasper Furniss",
       territory: "PHL",
-      title: "Lead UX Engineer",
+      title: "Senior UX Engineer",
       id: "jasper-furniss",
       status: "Offline"
     },
@@ -28,18 +28,18 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
       status: "Away"
     },
     {
-      label: "Carlos Lima",
-      value: "Carlos Lima",
+      label: "Jason Cypret",
+      value: "Jason Cypret",
       territory: "PHL",
-      title: "Nitro Developer",
-      id: "carlos-lima",
+      title: "VP of User Experience",
+      id: "jason-cypret",
       status: "Online"
     },
     {
       label: "Courtney Long",
       value: "Courtney Long",
       territory: "PHL",
-      title: "Lead UX Designer",
+      title: "UX Design Mentor",
       id: "courtney-long",
       status: "Online"
     }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx

@@ -15,7 +15,7 @@ const DropdownWithCustomDisplay = (props) => {
       label: "Jasper Furniss",
       value: "Jasper Furniss",
       territory: "PHL",
-      title: "Lead UX Engineer",
+      title: "Senior UX Engineer",
       id: "jasper-furniss",
       status: "Offline"
     },
@@ -28,18 +28,18 @@ const DropdownWithCustomDisplay = (props) => {
       status: "Away"
     },
     {
-      label: "Carlos Lima",
-      value: "Carlos Lima",
+      label: "Jason Cypret",
+      value: "Jason Cypret",
       territory: "PHL",
-      title: "Nitro Developer",
-      id: "carlos-lima",
+      title: "VP of User Experience",
+      id: "jason-cypret",
       status: "Online"
     },
     {
       label: "Courtney Long",
       value: "Courtney Long",
       territory: "PHL",
-      title: "Lead UX Designer",
+      title: "UX Design Mentor",
       id: "courtney-long",
       status: "Online"
     }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb

@@ -1,10 +1,10 @@
 <% 
-   options = [
+  options = [
     {
       label: "Jasper Furniss",
       value: "Jasper Furniss",
       territory: "PHL",
-      title: "Lead UX Engineer",
+      title: "Senior UX Engineer",
       id: "jasper-furniss",
       status: "Offline"
     },
@@ -17,22 +17,22 @@
       status: "Away"
     },
     {
-      label: "Carlos Lima",
-      value: "Carlos Lima",
+      label: "Jason Cypret",
+      value: "Jason Cypret",
       territory: "PHL",
-      title: "Nitro Developer",
-      id: "carlos-lima",
+      title: "VP of User Experience",
+      id: "jason-cypret",
       status: "Online"
     },
     {
       label: "Courtney Long",
       value: "Courtney Long",
       territory: "PHL",
-      title: "Lead UX Designer",
+      title: "UX Design Mentor",
       id: "courtney-long",
       status: "Online"
     }
-  ];
+  ]
 
 %>
 

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

@@ -18,5 +18,4 @@ examples:
   - layout_kanban: Kanban Layout
   - layout_content: Content Layout
   - layout_masonry: Masonry Layout
-  - layout_bracket: Bracket Layout
 

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

@@ -7,5 +7,4 @@ export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.j
 export { default as LayoutCollectionDetail } from './_layout_collection_detail.jsx'
 export { default as LayoutContent } from './_layout_content.jsx'
 export { default as LayoutMasonry } from './_layout_masonry.jsx'
-export { default as LayoutBracket } from './_layout_bracket.jsx'