playbook_ui 14.9.0.pre.alpha.PBNTR746datepickerdefaultbug4901 → 14.9.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5120

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
+
+const SortingChangeCallback = (sortOptions) => {
+  alert(JSON.stringify(sortOptions[0]))
+}
+
+const SkeletonLoadingFilter = (props) => {
+  const isLoading = true
+
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A galaxy far far away, like really far away...' },
+  ]
+
+  return (
+    <div>
+      <div>
+        {isLoading ? (
+          <Card 
+              marginBottom="lg" 
+              {...props}
+          >
+              <Flex 
+                  alignItems="center" 
+                  justify="between"
+                  orientation="row"
+              >
+                  <Flex 
+                      alignItems="center" 
+                      justify="start"
+                      orientation="row"
+                  >
+                      <SkeletonLoading
+                          borderRadius="rounded"
+                          height="40px"
+                          marginRight="sm"
+                          width="40px"
+                          {...props}
+                      />
+                      <SkeletonLoading 
+                          height="16px" 
+                          marginRight="md"
+                          width="80px"
+                          {...props}
+                      />
+                  </Flex>
+                  <Flex 
+                      alignItems="center" 
+                      justify="end"
+                      orientation="row"
+                  >
+                      <SkeletonLoading 
+                          height="18px" 
+                          width="120px"
+                          {...props}
+                      />
+                  </Flex>
+              </Flex>
+          </Card>
+        ) : (
+          <Filter
+              filters={{ 'Full Name': 'John Wick' }}
+              marginBottom="lg" 
+              minWidth="375px"
+              results={546}
+              sortOptions={{
+                popularity: 'Popularity',
+                // eslint-disable-next-line
+                manager_title: 'Manager\'s Title',
+                // eslint-disable-next-line
+                manager_name: 'Manager\'s Name',
+              }}
+              sortValue={[{ name: 'popularity', dir: 'desc' }]}
+          >
+            {({ closePopover }) => (
+              <form>
+                <TextInput 
+                    label="Example Text Field" 
+                    placeholder="Enter Text"
+                />
+                <Select
+                    blankSelection="Select One..."
+                    label="Example Collection Select"
+                    name="Collection Select"
+                    options={options}
+                />
+                <Flex spacing="between">
+                    <Button 
+                        onClick={closePopover} 
+                        text="Filter"
+                    />
+                    <Button 
+                        text="Defaults" 
+                        variant="secondary"
+                    />
+                </Flex>
+              </form>
+            )}
+          </Filter>
+        )}
+      </div>
+      <div>
+        {isLoading ? (
+          <SkeletonLoading 
+              height="127px" 
+              marginBottom="lg"
+              width="100%"
+              {...props}
+          />
+        ) : (
+          <Filter
+              double
+              filters={{
+                'Full Name': 'John Wick',
+                'City': 'San Francisco',
+              }}
+              marginBottom="xl"
+              minWidth="375px"
+              onSortChange={SortingChangeCallback}
+              results={1}
+              sortOptions={{
+                popularity: 'Popularity',
+                // eslint-disable-next-line
+                manager_title: 'Manager\'s Title',
+                // eslint-disable-next-line
+                manager_name: 'Manager\'s Name',
+              }}
+              sortValue={[{ name: 'popularity', dir: 'desc' }]}
+          >
+            {({ closePopover }) => (
+              <form>
+                <TextInput 
+                    label="Full Name" 
+                    placeholder="Enter name"
+                />
+                <Select
+                    blankSelection="Select One..."
+                    label="Territory"
+                    maxWidth="sm"
+                    name="location"
+                    options={options}
+                />
+                <Flex spacing="between">
+                    <Button 
+                        onClick={closePopover}
+                        text="Filter" 
+                    />
+                    <Button 
+                        text="Defaults"
+                        variant="secondary"
+                    />
+                </Flex>
+              </form>
+            )}
+          </Filter>
+        )}
+      </div>      
+    </div>
+  )
+}
+
+export default SkeletonLoadingFilter;

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx

@@ -20,6 +20,7 @@ const SkeletonLoadingHeightWidth = (props) => (
     <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
         marginBottom="md"
         padding="none" 
+        {...props}
     >
       <SkeletonLoading
           borderRadius="md"
@@ -31,6 +32,7 @@ const SkeletonLoadingHeightWidth = (props) => (
     </Card>
     <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
         padding="none"
+        {...props}
     >
       <SkeletonLoading
           borderRadius="md"

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Flex, SkeletonLoading, User } from "playbook-ui";
+
+const SkeletonLoadingUser = (props) => {
+  const isLoading = true
+
+  return (
+    <div>
+      <div>
+        {isLoading ? (
+          <Flex alignItems="center">
+              <SkeletonLoading 
+                  borderRadius="rounded" 
+                  height="38px" 
+                  paddingRight="sm"
+                  width="38px" 
+                  {...props} 
+              />
+                <SkeletonLoading 
+                    gap="xxs"
+                    height="18px" 
+                    stack="2"
+                    width="161px"
+                    {...props}
+                />
+          </Flex>
+        ) : (
+          <User
+              align="left"
+              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+              name="Anna Black"
+              orientation="horizontal"
+              title="Remodeling Consultant"
+              {...props}
+          />
+        )}
+      </div>
+      <div>
+        {isLoading ? (
+          <Flex 
+              alignItems="start"
+              paddingTop="md"
+          >
+              <Flex 
+                  alignItems="center" 
+                  flexDirection="column"
+              >
+                  <SkeletonLoading 
+                      borderRadius="rounded" 
+                      height="80px" 
+                      paddingBottom="xs" 
+                      width="80px" 
+                      {...props}
+                  />
+                  <SkeletonLoading 
+                      height="32px" 
+                      paddingBottom="xxs" 
+                      width="144px" 
+                      {...props} 
+                  />
+                  <SkeletonLoading 
+                      height="21px" 
+                      width="164px" 
+                      {...props}
+                  />
+              </Flex>
+          </Flex>
+        ) : (
+          <Flex
+              alignItems="start" 
+              paddingTop="md"
+          >
+              <User
+                  align="center"
+                  avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+                  name="Anna Black"
+                  orientation="vertical"
+                  size="lg"
+                  title="Remodeling Consultant"
+                  {...props}
+              />
+          </Flex>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonLoadingUser;

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

@@ -10,4 +10,5 @@ examples:
   - skeleton_loading_layout: Layout
   - skeleton_loading_border_radius: Border Radius
   - skeleton_loading_height_width: Height & Width
-  
+  - skeleton_loading_user: User Component Example
+  - skeleton_loading_filter: Filter Component Example

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

@@ -3,3 +3,5 @@ export { default as SkeletonLoadingColor } from './_skeleton_loading_color.jsx'
 export { default as SkeletonLoadingLayout } from './_skeleton_loading_layout.jsx'
 export { default as SkeletonLoadingBorderRadius } from './_skeleton_loading_border_radius.jsx'
 export { default as SkeletonLoadingHeightWidth } from './_skeleton_loading_height_width.jsx'
+export { default as SkeletonLoadingUser } from './_skeleton_loading_user.jsx'
+export { default as SkeletonLoadingFilter } from './_skeleton_loading_filter.jsx'

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

@@ -92,16 +92,16 @@ const Table = (props: TableProps): React.ReactElement => {
     useEffect(() => {
         const handleStickyColumns = () => {
             let accumulatedWidth = 0;
-    
+
             stickyLeftcolumn.forEach((colId, index) => {
                 const isLastColumn = index === stickyLeftcolumn.length - 1;
                 const header = document.querySelector(`th[id="${colId}"]`);
                 const cells = document.querySelectorAll(`td[id="${colId}"]`);
-    
+
                 if (header) {
                     header.classList.add('sticky');
                     (header as HTMLElement).style.left = `${accumulatedWidth}px`;
-    
+
                     if (!isLastColumn) {
                         header.classList.add('with-border');
                         header.classList.remove('sticky-shadow');
@@ -109,14 +109,14 @@ const Table = (props: TableProps): React.ReactElement => {
                         header.classList.remove('with-border');
                         header.classList.add('sticky-shadow');
                     }
-    
+
                     accumulatedWidth += (header as HTMLElement).offsetWidth;
                 }
-    
+
                 cells.forEach((cell) => {
                     cell.classList.add('sticky');
                     (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
-                    
+
                     if (!isLastColumn) {
                         cell.classList.add('with-border');
                         cell.classList.remove('sticky-shadow');

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb

@@ -25,16 +25,16 @@
       <td id="3">Value 3</td>
       <td>Value 4</td>
       <td>Value 5</td>
-      <td>Column 6</td>
-      <td>Column 7</td>
-      <td>Column 8</td>
-      <td>Column 9</td>
-      <td>Column 10</td>
-      <td>Column 11</td>
-      <td>Column 12</td>
-      <td>Column 13</td>
-      <td>Column 14</td>
-      <td>Column 15</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td>Value 15</td>
 
     </tr>
     <tr>
@@ -43,16 +43,16 @@
       <td id="3">Value 3</td>
       <td>Value 4</td>
       <td>Value 5</td>
-      <td>Column 6</td>
-      <td>Column 7</td>
-      <td>Column 8</td>
-      <td>Column 9</td>
-      <td>Column 10</td>
-      <td>Column 11</td>
-      <td>Column 12</td>
-      <td>Column 13</td>
-      <td>Column 14</td>
-      <td>Column 15</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td>Value 15</td>
 
     </tr>
     <tr>
@@ -61,34 +61,16 @@
       <td id="3">Value 3</td>
       <td>Value 4</td>
       <td>Value 5</td>
-      <td>Column 6</td>
-      <td>Column 7</td>
-      <td>Column 8</td>
-      <td>Column 9</td>
-      <td>Column 10</td>
-      <td>Column 11</td>
-      <td>Column 12</td>
-      <td>Column 13</td>
-      <td>Column 14</td>
-      <td>Column 15</td>
-
-    </tr>
-    <tr>
-      <td id="1">Value 1</td>
-      <td id="2">Value 2</td>
-      <td id="3">Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-      <td>Column 6</td>
-      <td>Column 7</td>
-      <td>Column 8</td>
-      <td>Column 9</td>
-      <td>Column 10</td>
-      <td>Column 11</td>
-      <td>Column 12</td>
-      <td>Column 13</td>
-      <td>Column 14</td>
-      <td>Column 15</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td>Value 15</td>
 
     </tr>
   </tbody>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md

@@ -0,0 +1 @@
+The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Table, Icon, Body, Card } from 'playbook-ui'
+
+const TableWithCollapsible = (props) => {
+
+  const Content = () => {
+    return (
+      <Card 
+          borderNone
+          borderRadius="none"
+          padding="md"
+          {...props}
+      >
+        <Body {...props}>Nested content inside a Table Row</Body>
+      </Card>
+    );
+  };
+
+return (
+      <Table
+          size="sm"
+          {...props}
+      >
+        <Table.Head>
+          <Table.Row>
+            <Table.Header>{'Column 1'}</Table.Header>
+            <Table.Header>{'Column 2'}</Table.Header>
+            <Table.Header>{'Column 3'}</Table.Header>
+            <Table.Header>{'Column 4'}</Table.Header>
+            <Table.Header>{'Column 5'}</Table.Header>
+            <Table.Header>{''}</Table.Header>
+          </Table.Row>
+
+        </Table.Head>
+        <Table.Body>
+          <Table.Row collapsible 
+              collapsibleContent={<Content/>}
+              {...props}
+          >
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell textAlign="right">{ 
+              <Icon
+                  color="primary"
+                  fixedWidth
+                  icon="chevron-down"
+              />}
+            </Table.Cell>
+
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell>{''}</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell>{''}</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+  )
+}
+
+export default TableWithCollapsible

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md

@@ -0,0 +1 @@
+The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import { Table, Card, Icon, Body } from 'playbook-ui'
+
+const TableWithCollapsibleWithCustomClick = (props) => {
+
+  const Content = () => {
+    return (
+      <Card 
+          borderNone
+          borderRadius="none"
+          padding="md"
+          {...props}
+      >
+        <Body {...props}>Nested content inside a Table Row</Body>
+      </Card>
+    );
+  };
+
+
+return (
+      <Table
+          size="sm"
+          {...props}
+      >
+        <Table.Head>
+          <Table.Row>
+            <Table.Header>{'Column 1'}</Table.Header>
+            <Table.Header>{'Column 2'}</Table.Header>
+            <Table.Header>{'Column 3'}</Table.Header>
+            <Table.Header>{'Column 4'}</Table.Header>
+            <Table.Header>{'Column 5'}</Table.Header>
+            <Table.Header>{''}</Table.Header>
+          </Table.Row>
+
+        </Table.Head>
+        <Table.Body>
+          <Table.Row collapsible 
+              collapsibleContent={<Content/>}
+              toggleCellId="cell-1"
+              {...props}
+          >
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell cursor="pointer" 
+                id="cell-1"
+                textAlign="right"
+            >
+              <Icon
+                  color="primary"
+                  fixedWidth
+                  icon="chevron-down"
+              />
+            </Table.Cell>
+
+          </Table.Row>
+          <Table.Row collapsible 
+              collapsibleContent={<Content/>}
+              toggleCellId="cell-2"
+              {...props}
+          >
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell cursor="pointer" 
+                id="cell-2"
+                textAlign="right"
+            >
+              <Icon
+                  color="primary"
+                  fixedWidth
+                  icon="chevron-down"
+              />
+            </Table.Cell>
+
+          </Table.Row>
+          <Table.Row collapsible 
+              collapsibleContent={<Content/>}
+              toggleCellId="cell-3"
+              {...props}
+          >
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell cursor="pointer" 
+                id="cell-3"
+                textAlign="right"
+            >
+              <Icon
+                  color="primary"
+                  fixedWidth
+                  icon="chevron-down"
+              />
+            </Table.Cell>
+
+          </Table.Row>
+        </Table.Body>
+      </Table>
+  )
+}
+
+export default TableWithCollapsibleWithCustomClick

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md

@@ -0,0 +1,2 @@
+When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggleCellId` prop to pass in the id of the Cell you want to use as the trigger.
+__NOTE__: `toggleCellId` and the id on the Cell you want to use as the trigger MUST be the same.