playbook_ui 14.12.0.pre.alpha.PLAY1888initializeOncereactdatepickerslowdown5956 → 14.12.0.pre.alpha.PLAY18565866

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7ce26ea4ae1198511f9c6a804ac3eec019188d988ddb66b30f1a6ceabfc9e589
-  data.tar.gz: 0f2e7f4cf50aab69444666dff81daf2732ec181f117ae90208a59c987367f8d9
+  metadata.gz: 2036447bc24867ea60730bcd2106f70198ab5d0b0469fcf4536e95bc467d0438
+  data.tar.gz: 49c1a74a43759e755c88ff965447295cb4beb5ed1e8f6da6d049d4dac840feee
 SHA512:
-  metadata.gz: 1efdf76471fd6db0e49fd5b9f39dc27089b7ad8d60c6429a4cfcaf9fe0fd743461d1b208a0cbf038ef6275c632b93601afca00de6d24a890c12fedaf25eb2929
-  data.tar.gz: b445830027fd9114880207b3cc33c1fb3df745ef23a2d84b078306a38d57eb319a21e8f6537448e4636698f2806d236425a89577eb99cd8de7242d7fb3559394
+  metadata.gz: f2c5119a00e999065041fe72546b5236642efc0131902b659f3e89d3b4c381bd747f107bc9142858cd05ff8907716c642e7b8ef3c5ef6717b0f19894874afde9
+  data.tar.gz: 249ba89e0cbd98113f0d0e913fd039608d585e9f5ae1c9b4d1f5002c4b3dded98964692616c341ff476f2a5602e7a29c45cd5287459182fa3c145fedf3ebe5fc

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -39,15 +39,8 @@ export const TableHeaderCell = ({
   sortIcon,
   table
 }: TableHeaderCellProps) => {
-  const {
-    sortControl,
-    responsive,
-    selectableRows,
-    hasAnySubRows,
-    showActionsBar,
-    inlineRowLoading,
-    isActionBarVisible,
-  } = useContext(AdvancedTableContext);
+  const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar, inlineRowLoading } =
+    useContext(AdvancedTableContext);
 
   type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
   
@@ -72,7 +65,7 @@ export const TableHeaderCell = ({
  
 const cellClassName = classnames(
   "table-header-cells",
-  `${showActionsBar && isActionBarVisible && "header-cells-with-actions"}`,
+  `${showActionsBar && "header-cells-with-actions"}`,
   `${isChrome() ? "chrome-styles" : ""}`,
   `${enableSorting ? "table-header-cells-active" : ""}`,
   { "pinned-left": responsive === "scroll" && isPinnedLeft },

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -31,12 +31,12 @@
     width: 100%;
   }
 
-    .row-selection-actions-card {
-      border-bottom-right-radius: 0px !important;
-      border-bottom-left-radius: 0px !important;
-      border-bottom-color: transparent;
-      transition: height 300ms ease;
-    }
+  .row-selection-actions-card {
+    border-bottom-right-radius: 0px !important;
+    border-bottom-left-radius: 0px !important;
+    border-bottom-color: transparent;
+  }
+
   .table-header-cells:first-child {
     min-width: 180px;
   }

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef } from "react"
+import React, { useState, useEffect, useCallback } from "react"
 import classnames from "classnames"
 
 import { GenericObject } from "../types"
@@ -27,7 +27,6 @@ import FlexItem from "../pb_flex/_flex_item"
 import AdvancedTableContext from "./Context/AdvancedTableContext"
 
 import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers"
-import { showActionBar, hideActionBar } from "./Utilities/ActionBarAnimationHelper"
 
 import { CustomCell } from "./Components/CustomCell"
 import { TableHeader } from "./SubKits/TableHeader"
@@ -296,20 +295,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const onPageChange = (page: number) => {
     table.setPageIndex(page - 1)
   }
-//When to show the actions bar as a whole
-  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0
-
-  //Ref and useEffect for animating the actions bar
-  const cardRef = useRef(null);
-  useEffect(() => {
-    if (cardRef.current) {
-      if (isActionBarVisible) {
-        showActionBar(cardRef.current);
-      } else {
-        hideActionBar(cardRef.current);
-      }
-    }
-  }, [isActionBarVisible]);
 
   return (
     <div {...ariaProps} 
@@ -326,7 +311,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             expandedControl,
             handleExpandOrCollapse,
             inlineRowLoading,
-            isActionBarVisible,
             loading,
             responsive,
             setExpanded,
@@ -349,24 +333,27 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                   total={table.getPageCount()}
                   />
           }
-          <Card
-              borderNone={!isActionBarVisible}
-              className={`${isActionBarVisible && "show-action-card row-selection-actions-card"}`}
-              htmlOptions={{ ref: cardRef as any }}
-              padding={`${isActionBarVisible ? "xs" : "none"}`}
-          >
-            <Flex alignItems="center" 
-                justify="between"
-            >
-              <Caption color="light" 
-                  paddingLeft="xs" 
-                  size="xs"
+          {
+            selectableRows && showActionsBar && (
+              <Card className="row-selection-actions-card"
+                  padding="xs"
               >
-                {selectedRowsLength} Selected
-              </Caption>
-              <FlexItem>{actions}</FlexItem>
-            </Flex>
-          </Card>
+                <Flex alignItems="center"
+                    justify="between"
+                >
+                    <Caption color="light"
+                        paddingLeft="xs"
+                        size="xs"
+                    >
+                      {selectedRowsLength} Selected
+                    </Caption>
+                    <FlexItem>
+                    {actions}
+                    </FlexItem>
+                </Flex>
+              </Card>
+            )
+          }
           <Table
               className={`${loading ? "content-loading" : ""}`}
               dark={dark}

data/app/pb_kits/playbook/pb_copy_button/_copy_button.scss

@@ -1,4 +1,3 @@
 .pb_copy_button_kit {
-  width: fit-content;
-  height: fit-content;
+
 }

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

@@ -1,8 +1,8 @@
 examples:
-  rails:
-  - copy_button_default: Default
-  - copy_button_from: Copy From
+  
   
   react:
   - copy_button_default: Default
   - copy_button_from: Copy From
+  
+  

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -29,7 +29,6 @@ type DatePickerProps = {
   hideLabel?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  initializeOnce?: boolean,
   inLine?: boolean,
   inputAria?: { [key: string]: string },
   inputData?: { [key: string]: string },
@@ -74,7 +73,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     hideLabel = false,
     htmlOptions = {},
     id,
-    initializeOnce = false,
     inLine = false,
     inputAria = {},
     inputData = {},
@@ -136,7 +134,7 @@ useEffect(() => {
     yearRange,
     required: false,
   }, scrollContainer)
-}, initializeOnce ? [] : undefined)
+})
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx

@@ -1,42 +1,77 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+import React, { useState, useEffect } from "react"
+import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
 
-const useDrawer = (visible = false) => {
-  const [opened, setOpened] = useState(visible);
-  const toggle = () => setOpened(!opened);
+const DrawerMenu = () => {
+  const [isSmallScreen, setIsSmallScreen] = useState(false)
+  const navItems = ["Overview", "Albums", "Similar Artists"]
 
-  return [opened, toggle];
-};
-
-const DrawerBreakpoints = () => {
-  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 992px)")
+    const updateScreen = (e) => setIsSmallScreen(e.matches)
+    updateScreen(mediaQuery)
+    mediaQuery.addEventListener('change', updateScreen)
+    return () => mediaQuery.removeEventListener('change', updateScreen)
+  }, [])
 
   return (
-    <>
-      <Flex wrap>
-        <Button
-            id="sm"
-            marginRight="md"
-            onClick={toggleSmallDrawer}
-        >
-          {"Will open at small breakpoint"}
-        </Button>
-      </Flex>
-      <Flex>
-        <Drawer
-            behavior={"push"}
-            breakpoint="sm"
-            onClose={toggleSmallDrawer}
-            opened={smallDrawerOpened}
-            overlay={false}
-            placement={"right"}
-            size={"lg"}
+    <div>
+      <Button id='sidebar'
+          padding='xs'
+      >
+        <Icon icon='bars'
+            size='2x'
+        />
+      </Button>
+      <Drawer
+          behavior={"push"}
+          breakpoint='md'
+          overlay={isSmallScreen ? true : false}
+          placement='left'
+          size='md'
+          triggerId='sidebar'
+      >
+        <Nav
+            link='#'
+            orientation='vertical'
+            padding={isSmallScreen ? "none" : "sm"}
+            variant='bold'
         >
-          Open because small breakpoint 
-        </Drawer>
-      </Flex>
-    </>
-  );
-};
+          {navItems.map((text, index) => {
+            return (
+              <NavItem
+                  collapsible
+                  collapsibleTrail
+                  fontWeight='bolder'
+                  iconLeft='city'
+                  iconRight={["plus", "minus"]}
+                  key={index}
+                  link='#'
+                  text={text}
+              >
+                <NavItem fontSize='small'
+                    link='#'
+                    marginY='none'
+                    text='City'
+                />
+                <NavItem
+                    fontSize='small'
+                    link='#'
+                    marginY='none'
+                    text='People'
+                />
+                <NavItem
+                    fontSize='small'
+                    link='#'
+                    marginY='none'
+                    text='Business'
+                />
+              </NavItem>
+            )
+          })}
+        </Nav>
+      </Drawer>
+    </div>
+  )
+}
 
-export default DrawerBreakpoints;
+export default DrawerMenu

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx

@@ -8,8 +8,8 @@ const DrawerMenu = () => {
     const mediaQuery = window.matchMedia("(max-width: 600px)")
     setIsSmallScreen(mediaQuery.matches)
     const handler = (e) => setIsSmallScreen(e.matches)
-    mediaQuery.addEventListener('change', handler)
-    return () => mediaQuery.removeEventListener('change', handler)
+    mediaQuery.addEventListener("change", handler)
+    return () => mediaQuery.removeEventListener("change", handler)
   }, [])
 
   return (
@@ -22,17 +22,17 @@ const DrawerMenu = () => {
         />
       </Button>
       <Drawer
-          breakpoint="md"
+          breakpoint='md'
           placement='bottom'
           size='full'
           triggerId='menuButton'
           withinElement
       >
-        <Nav 
+        <Nav
             highlight={false}
             link='#'
-            orientation={isSmallScreen ? 'vertical' : 'horizontal'} 
-            padding={isSmallScreen ? 'none' : 'sm'}
+            orientation={isSmallScreen ? "vertical" : "horizontal"}
+            padding={isSmallScreen ? "none" : "sm"}
         >
           <NavItem link='#'
               text='About'

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

@@ -10,4 +10,5 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders 

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -18,6 +18,7 @@ type HomeAddressStreetProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
+  preserveCase?: boolean,
   emphasis: "street" | "city" | "none",
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   homeId: string,
@@ -43,6 +44,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     htmlOptions = {},
     homeId,
     homeUrl,
+    preserveCase = false,
     target,
     newWindow,
     houseStyle,
@@ -77,6 +79,8 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     return null
   }
 
+  const formatStreetAdr = (address: string): string => preserveCase ? address : titleize(address)
+
   return (
     <div
         className={classes(className, dark)}
@@ -91,7 +95,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
               dark={dark}
               size={4}
           >
-            {joinPresent([titleize(address), houseStyle], ' · ')}
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
           </Title>
           <Title
               className="pb_home_address_street_address"
@@ -101,14 +105,14 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             {titleize(addressCont)}
           </Title>
           <Body color="light">
-            {`${titleize(city)}, ${state} ${zipcode}`}
+            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
           </Body>
         </div>
       }
       {emphasis == 'city' &&
         <div>
           <Body color="light">
-            {joinPresent([titleize(address), houseStyle], ' · ')}
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
           </Body>
           <Body color="light">{titleize(addressCont)}</Body>
           <div>
@@ -118,7 +122,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 size={4}
                 tag="span"
             >
-              {`${titleize(city)}, ${state}`}
+              {`${titleize(city)}, ${state.toUpperCase()}`}
             </Title>
             <Body
                 color="light"
@@ -132,15 +136,15 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       {emphasis == 'none' &&
         <div>
           <Body dark={dark}>
-            {joinPresent([titleize(address), houseStyle], ' · ')}
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
           </Body>
-          <Body dark={dark}>{titleize(addressCont)}</Body>
+          <Body dark={dark}>{formatStreetAdr(addressCont)}</Body>
           <div>
             <Body
                 color="light"
                 dark={dark}
               >
-            {`${titleize(city)}, ${state} ${zipcode}`}
+            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
           </Body>
           </div>
         </div>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("home_address_street", props: {
+  address: "70 pRoSpEcT ave",
+  address_cont: "Apt M18",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  preserve_case: true,
+  state: "pa",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import HomeAddressStreet from '../_home_address_street'
+
+const HomeAddressStreetFormatting = (props) => {
+  return (
+    <HomeAddressStreet
+        address="70 pRoSpEcT ave"
+        addressCont="Apt M18"
+        city="West Chester"
+        homeId="8250263"
+        homeUrl="https://powerhrg.com/"
+        preserveCase
+        state="pa"
+        territory="PHL"
+        zipcode="19382"
+        {...props}
+    />
+  )
+}
+
+export default HomeAddressStreetFormatting

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md

@@ -0,0 +1 @@
+The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserve_case: true`, the street address will be rendered exactly as entered, without automatic title capitalization.

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md

@@ -0,0 +1 @@
+The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserveCase`, the street address will be rendered exactly as entered, without automatic title capitalization.

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

@@ -5,12 +5,14 @@ examples:
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
+  - home_address_street_formatting: Formatting
 
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
+  - home_address_street_formatting: Formatting
 
   swift:
   - home_address_street_default_swift: Default

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

@@ -2,3 +2,4 @@ export { default as HomeAddressStreetDefault } from './_home_address_street_defa
 export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
 export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
 export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'
+export { default as HomeAddressStreetFormatting } from './_home_address_street_formatting.jsx'

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -18,6 +18,7 @@ module Playbook
       prop :state
       prop :zipcode
       prop :territory
+      prop :preserve_case, default: false
       prop :dark, type: Playbook::Props::Boolean, default: false
 
       def classname
@@ -29,7 +30,7 @@ module Playbook
       end
 
       def city_state
-        [city&.titleize, state].join(", ")
+        [city&.titleize, state&.upcase].join(", ")
       end
 
       def zip
@@ -37,7 +38,7 @@ module Playbook
       end
 
       def address_house_style
-        [address&.titleize, house_style].join(separator)
+        [format_street_address, house_style].join(separator)
       end
 
       def address_house_style2
@@ -48,6 +49,14 @@ module Playbook
         house_style ? " \u00b7 " : ""
       end
 
+      def format_street_address
+        preserve_case ? address : custom_titleize(address)
+      end
+
+      def custom_titleize(str)
+        str.split(" ").map(&:capitalize).join(" ")
+      end
+
       def city_emphasis_props
         {
           address_house_style: address_house_style,

data/app/pb_kits/playbook/pb_lightbox/lightbox.scss

@@ -2,7 +2,6 @@
 @import "../tokens/screen_sizes";
 
 $slides-margin: $space-md;
-$lightbox-z-index-floor: $z_10 !default;
 
  .carousel {
 
@@ -14,7 +13,7 @@ $lightbox-z-index-floor: $z_10 !default;
     top: 0;
     left: 0;
     right: 0;
-    z-index: $lightbox-z-index-floor + 99;
+    z-index: 9999999;
     align-items: center;
     transition: all .5s;
 
@@ -56,7 +55,7 @@ $lightbox-z-index-floor: $z_10 !default;
   justify-content: space-between;
   flex-direction: column;
   background-color: black;
-  z-index: $lightbox-z-index-floor + 1;
+  z-index: 1;
   overflow: hidden;
 }
 
@@ -64,7 +63,7 @@ $lightbox-z-index-floor: $z_10 !default;
   display: flex;
   height: calc(100% - 120px);
   width: 100%;
-  z-index: $lightbox-z-index-floor + 1;
+  z-index: 1;
 
   [class^="react-transform-wrapper"] {
     flex-shrink: 0;
@@ -88,7 +87,7 @@ $lightbox-z-index-floor: $z_10 !default;
   .carousel-arrow-left {
     display: block;
     position: absolute;
-    z-index: $lightbox-z-index-floor + 4;
+    z-index: 4;
     top: 50%;
     @media only screen and (max-width: $screen-xs-max) {
       display: none;
@@ -98,7 +97,7 @@ $lightbox-z-index-floor: $z_10 !default;
   .carousel-arrow-right {
     display: block;
     position: absolute;
-    z-index: $lightbox-z-index-floor + 4;
+    z-index: 4;
     top: 50%;
     right: 0;
     @media only screen and (max-width: $screen-xs-max) {
@@ -141,7 +140,7 @@ $lightbox-z-index-floor: $z_10 !default;
   width: 100vw;
   padding: 3px;
   overflow: scroll;
-  z-index: $lightbox-z-index-floor + 20;
+  z-index: 20;
   &.centered {
     justify-content: center;
   }

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

@@ -19,9 +19,7 @@ type LinkProps = {
   icon?: string,
   iconRight?: string,
   id?: string,
-  tabIndex?: number,
   tag?: 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
-  target?: string,
   text?: string,
   underline?: boolean,
 } & GlobalProps
@@ -39,9 +37,7 @@ const Link = (props: LinkProps): React.ReactElement => {
     icon = '',
     iconRight = '',
     id = '',
-    tabIndex,
     tag = 'a',
-    target = '',
     text = '',
     underline = false,
   } = props
@@ -56,14 +52,6 @@ const Link = (props: LinkProps): React.ReactElement => {
   )
   const Tag = tag as keyof JSX.IntrinsicElements
 
-  const getTargetAttribute = () => {
-    if (target && href) {
-      return target
-    }
-
-    return undefined
-  }
-
   const renderContent = () => (
     <>
       {icon && (
@@ -99,9 +87,6 @@ const Link = (props: LinkProps): React.ReactElement => {
       <a
           {...commonProps}
           href={href}
-          rel={target !== 'child' ? 'noreferrer' : undefined}
-          tabIndex={tabIndex}
-          target={getTargetAttribute()}
       >
         {renderContent()}
       </a>
@@ -111,9 +96,6 @@ const Link = (props: LinkProps): React.ReactElement => {
       <a
           {...commonProps}
           href={href}
-          rel={target !== 'child' ? 'noreferrer' : undefined}
-          tabIndex={tabIndex}
-          target={getTargetAttribute()}
       >
         <Tag>{renderContent()}</Tag>
       </a>

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

@@ -1,18 +1,16 @@
 examples:
-
+  
   rails:
   - link_color: Color
   - link_underline: Underline
   - link_icon: Icon
   - link_disabled: Disabled
   - link_tag: Tag
-  - link_target: Target
-
-
+  
+  
   react:
   - link_color: Color
   - link_underline: Underline
   - link_icon: Icon
   - link_disabled: Disabled
   - link_tag: Tag
-  - link_target: Target