playbook_ui 14.9.0.pre.alpha.pbntr700newresettodefaultprop4736 → 14.9.0.pre.alpha.play1703errorstatealignment4991

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -45,12 +45,11 @@
     class: "checkbox-class"
   %>
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
-  <%= form.date_picker :example_date_picker_2,  props: { label: true,  reset_to_default: true, default_date: "06/09/1994" } %>
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>
-    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary", onclick: "resetDates()"  } %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
   <% end %>
 <% end %>
 

data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss

@@ -0,0 +1,49 @@
+@mixin error-state-flex-start-selectors {
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit),
+  &:has(.pb_text_input_kit):has(.pb_date_picker_kit.error),
+  &:has(.pb_text_input_kit):has(.pb_select_kit_wrapper.error),
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error) {
+    align-items: flex-start;
+  }
+}
+
+@mixin error-state-center-selectors {
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input),
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has([class^=pb_button_kit]) {
+    align-items: center;
+  }
+}
+
+@mixin error-state-flex-end-selectors {
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+    align-items: flex-end;
+  }
+}
+
+@mixin error-state-left-side-select-kit {
+  &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
+    align-items: flex-start;
+
+    .pb_select_kit_wrapper,
+    .pb_select_kit_wrapper.error {
+      padding-top: $space_md;
+      margin-top: 2px;
+
+      .pb_select_kit_caret {
+        padding-top: $space_xl;
+      }
+    }
+  }
+}
+
+@mixin error-state-right-side-select-kit {
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+    align-items: flex-start;
+
+    .pb_text_input_kit.error {
+      padding-top: $space_md;
+      margin-top: 2px;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -1,3 +1,6 @@
+@import "../tokens/spacing";
+@import "./error_state_mixin";
+
 [class^=pb_form_group_kit] {
   display: inline-flex;
   flex-direction: row;
@@ -12,6 +15,49 @@
     }
   }
 
+@include error-state-flex-start-selectors;
+@include error-state-center-selectors;
+@include error-state-flex-end-selectors;
+@include error-state-left-side-select-kit;
+@include error-state-right-side-select-kit;
+
+  // &:has(.pb_text_input_kit.error):has(.pb_text_input_kit),
+  // &:has(.pb_text_input_kit):has(.pb_date_picker_kit.error),
+  // &:has(.pb_text_input_kit):has(.pb_select_kit_wrapper.error),
+  // &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error) {
+  //   align-items: flex-start;
+  // }
+
+  // &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
+  // &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
+  //   align-items: flex-start;
+  //   .pb_select_kit_wrapper,
+  //   .pb_select_kit_wrapper.error {
+  //     padding-top: $space_md;
+  //     margin-top: 2px;
+  //     .pb_select_kit_caret {
+  //       padding-top: $space_xl;
+  //     }
+  //   }
+  // }
+
+  // &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input),
+  // &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has([class^=pb_button_kit]) {
+  //   align-items: center;
+  // }
+
+  // &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+  //   align-items: flex-end;
+  // }
+
+  // &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+  //   align-items: flex-start;
+  //   .pb_text_input_kit.error {
+  //     padding-top: $space_md;
+  //     margin-top: 2px;
+  //   }
+  // }
+
   & [class^=pb_text_input_kit] .text_input_wrapper,
   & [class^=pb_date_picker_kit] .input_wrapper,
   & [class^=pb_select] {
@@ -27,7 +73,7 @@
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
-    
+
       &:focus {
         outline: $primary solid 1px;
         outline-offset: -1px;
@@ -150,7 +196,7 @@
   & > [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked) ~ label {
     &:hover {
       border-right-color: $slate;
-    } 
+    }
   }
 
   & > [class^=pb_selectable_card_kit]:not(:first-child) label {

data/app/pb_kits/playbook/pb_link/_link.scss

@@ -17,7 +17,7 @@
     outline-offset: 2px;
   }
   &:visited {
-    color: $data_3;
+    color: darken($primary_action, 10%);
   }
   &.dark  {
     @include pb_link($active_dark);
@@ -34,7 +34,7 @@
       }
 
       &:visited {
-        color: $data_3;
+        color: darken($primary_action, 10%);
       }
     }
   }
@@ -48,7 +48,7 @@
       }
 
       &:visited {
-        color: $data_3;
+        color: darken($primary_action, 10%);
       }
     }
   }

data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss

@@ -19,6 +19,16 @@
           font-weight: $bolder;
         }
       }
-   }
+    }
+  }
+
+  .dark & {
+    [class*=pb_nav_list_kit_item][class*=pb_nav_list_item] {
+      &[class*=_link] {
+        &[class*=_active] {
+          box-shadow: 0 2px 10px 0 $shadow_dark;
+        }
+      }
+    }
   }
 }

data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss

@@ -223,6 +223,7 @@
         }
       }
       [class*="pb_collapsible_nav_item"][class*="pb_nav_list_item_link_collapsible"][class*="pb_nav_list_kit_item"] {
+        box-shadow: unset !important;
         .pb_nav_list_item_text_collapsible {
           color: $white !important;
         }
@@ -240,11 +241,17 @@
 
       .pb_collapsible_main_kit:hover {
         background-color: mix($white, $card_dark, 20%);
-        .pb_nav_list_item_text_collapsible,
-        svg {
+        .pb_nav_list_item_text_collapsible {
           color: $white !important;
         }
       }
+
+      .pb_collapsible_main_kit {
+        svg {
+          color: $text_dk_default !important;
+        }
+      }
+
       .icon_wrapper:hover {
         background-color: mix($white, $card_dark, 40%);
       }
@@ -256,6 +263,13 @@
           }
         }
       }
+
+      &[class*="_active"] {
+        > .pb_collapsible_main_kit {
+          background-color: $primary;
+          box-shadow: 0 2px 10px 0 $shadow_dark;
+        }
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -115,7 +115,7 @@ $selector: ".pb_nav_list";
       }
       [class*="_item_text"],
       [class*="_item_icon"] {
-        color: $text_dk_lighter !important;
+        color: $text_dk_light !important;
       }
       &[class*="_link"] {
         &:hover {

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import Icon from '../pb_icon/_icon';
 
@@ -14,7 +14,7 @@ type PaginationProps = {
   onChange?: (pageNumber: number) => void;
   range?: number;
   total?: number;
-};
+} & GlobalProps;
 
 const Pagination = ( props: PaginationProps) => {
   const {

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -151,7 +151,7 @@ $pb_selectable_paddings: (
       input[type="radio"] {
         &:checked ~ label {
           border-width: $pb_card_border_width;
-          outline: 1px solid $primary;
+          outline: 1px solid $primary_action_dark;
         }
       }
     }
@@ -161,11 +161,11 @@ $pb_selectable_paddings: (
     color: $white;
     > label {
       @include pb_card_dark;
-      background: transparent;
+      background: $bg_dark_card;
 
       .pb_selectable_card_circle {
         border-color: $bg_dark;
-        background: $primary-action;
+        background: $primary_action_dark;
       }
     }
 
@@ -173,7 +173,7 @@ $pb_selectable_paddings: (
     input[type="radio"] {
       &:checked ~ label {
         @include pb_card_selected_dark;
-        background: transparent;
+        background: $bg_dark_card;
       }
     }
 

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -35,7 +35,7 @@
         <% end %>
       <% else %>
         <% if content.nil? %>
-          <%= pb_rails("body", props: { text: object.text }) %>
+          <%= pb_rails("body", props: { text: object.text, dark: object.dark }) %>
         <% else %>
           <%= content %>
         <% end %>

data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx

@@ -1,40 +1,46 @@
-import React from 'react'
-import classnames from 'classnames'
+import React from "react"
+import classnames from "classnames"
 
-import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { buildCss, buildHtmlProps } from "../utilities/props"
+import { globalProps } from "../utilities/globalProps"
 
-import Body from '../pb_body/_body'
-import Icon from '../pb_icon/_icon'
+import Body from "../pb_body/_body"
+import Icon from "../pb_icon/_icon"
 
-const statusMap: {neutral: 'neutral', decrease: 'negative' ,increase: 'positive'} = {
-  increase: 'positive',
-  decrease: 'negative',
-  neutral: 'neutral',
+const statusMap: {
+  neutral: "neutral"
+  decrease: "negative"
+  increase: "positive"
+} = {
+  increase: "positive",
+  decrease: "negative",
+  neutral: "neutral",
 }
 
 const iconMap = {
-  increase: 'arrow-up',
-  decrease: 'arrow-down',
+  increase: "arrow-up",
+  decrease: "arrow-down",
 }
 
 type StatChangeProps = {
-  change?: 'increase' | 'decrease' | 'neutral',
-  className?: string,
-  icon?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string,
-  value?: string | number,
+  change?: "increase" | "decrease" | "neutral"
+  className?: string
+  dark?: boolean
+  icon?: string
+  id?: string
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
+  value?: string | number
 }
 
 const StatChange = (props: StatChangeProps): React.ReactElement => {
-  const { 
-    change = 'neutral', 
-    className, 
+  const {
+    change = "neutral",
+    className,
+    dark = false,
     htmlOptions = {},
-    icon, 
-    id, 
-    value 
+    icon,
+    id,
+    value,
   } = props
 
   const status = statusMap[change as keyof typeof statusMap]
@@ -47,30 +53,32 @@ const StatChange = (props: StatChangeProps): React.ReactElement => {
 
   return (
     <>
-      {value &&
+      {value && (
         <div
             className={classnames(
-              buildCss('pb_stat_change_kit', status),
-              globalProps(props),
-              className
-              )}
+            buildCss("pb_stat_change_kit", status),
+            globalProps(props),
+            className
+          )}
             id={id}
             {...htmlProps}
         >
-          <Body status={status}>
-            {returnedIcon &&
+          <Body dark={dark}
+              status={status}
+          >
+            {" "}
+            {returnedIcon && (
               <>
-                <Icon
+                <Icon dark={dark}
                     fixed_width
                     icon={returnedIcon}
-                />
-                {' '}
+                />{" "}
               </>
-            }
+            )}
             {`${value}%`}
           </Body>
         </div>
-      }
+      )}
     </>
   )
 }

data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb

@@ -1,6 +1,6 @@
 <%= pb_content_tag do %>
-      <%= pb_rails("body", props: { status: object.status }) do %>
-        <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
-        <%= "#{object.value}%" if object.value %>
-      <% end %>
+  <%= pb_rails("body", props: { status: object.status, dark: object.dark }) do %>
+    <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon, dark: object.dark }) if object.returned_icon %>
+    <%= "#{object.value}%" if object.value %>
+  <% end %>
 <% end %>

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

@@ -0,0 +1,95 @@
+<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["1", "2", "3"] }) do %>
+  <thead>
+    <tr>
+      <th id="1">Column 1</th>
+      <th id="2">Column 2</th>
+      <th id="3">Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+      <th>Column 6</th>
+      <th>Column 7</th>
+      <th>Column 8</th>
+      <th>Column 9</th>
+      <th>Column 10</th>
+      <th>Column 11</th>
+      <th>Column 12</th>
+      <th>Column 13</th>
+      <th>Column 14</th>
+      <th>Column 15</th>
+    </tr>
+  </thead>
+  <tbody>
+    <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>
+
+    </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>
+
+    </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>
+
+    </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>
+
+    </tr>
+  </tbody>
+<% end %>

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.