playbook_ui 14.12.0.pre.alpha.PLAY18565866 → 14.12.0.pre.alpha.advancedtablealignmentfixes5693

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

@@ -1,77 +1,42 @@
-import React, { useState, useEffect } from "react"
-import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
 
-const DrawerMenu = () => {
-  const [isSmallScreen, setIsSmallScreen] = useState(false)
-  const navItems = ["Overview", "Albums", "Similar Artists"]
+const useDrawer = (visible = false) => {
+  const [opened, setOpened] = useState(visible);
+  const toggle = () => setOpened(!opened);
 
-  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 [opened, toggle];
+};
+
+const DrawerBreakpoints = () => {
+  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
 
   return (
-    <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'
+    <>
+      <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"}
         >
-          {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>
-  )
-}
+          Open because small breakpoint 
+        </Drawer>
+      </Flex>
+    </>
+  );
+};
 
-export default DrawerMenu
+export default DrawerBreakpoints;

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,5 +10,4 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
-  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders 

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div) do %>
+<%= content_tag("div",
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
         <label
           for="upload-<%= object.id %>"

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= object.wrapper do %>
       <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
         <% if (object.template != "sort_only") %>

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

@@ -5,7 +5,6 @@ examples:
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
-  - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
   

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js

@@ -2,18 +2,16 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbFixedConfirmationToast extends PbEnhancedElement {
   static get selector() {
-    return '[class*="pb_fixed_confirmation_toast_kit"]'
+    return '.remove_toast'
   }
 
   connect() {
     this.self = this.element
     this.autoCloseToast(this.self)
 
-    if (this.self.classList.contains('remove_toast')) {
-      this.self.addEventListener('click', () => {
-        this.removeToast(this.self)
-      })
-    }
+    this.self.addEventListener('click', () => {
+      this.removeToast(this.self)
+    })
   }
 
   removeToast(elem) {
@@ -34,4 +32,4 @@ export default class PbFixedConfirmationToast extends PbEnhancedElement {
       }, autoCloseIntValue)
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_form_group/form_group.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag(:div) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,4 +1,4 @@
-<%= pb_content_tag(:div, class: object.classname + object.size_class, tabindex: object.tabindex) do %>
+<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
     <% if object.truncate %>

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

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

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

@@ -5,14 +5,12 @@ 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,4 +2,3 @@ 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,7 +18,6 @@ module Playbook
       prop :state
       prop :zipcode
       prop :territory
-      prop :preserve_case, default: false
       prop :dark, type: Playbook::Props::Boolean, default: false
 
       def classname
@@ -30,7 +29,7 @@ module Playbook
       end
 
       def city_state
-        [city&.titleize, state&.upcase].join(", ")
+        [city&.titleize, state].join(", ")
       end
 
       def zip
@@ -38,7 +37,7 @@ module Playbook
       end
 
       def address_house_style
-        [format_street_address, house_style].join(separator)
+        [address&.titleize, house_style].join(separator)
       end
 
       def address_house_style2
@@ -49,14 +48,6 @@ 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_table/docs/_table_with_background_kit.html.erb

@@ -39,17 +39,20 @@
     </tr>
   </tbody>
 <% end %>
+
 <%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
   <colgroup>
     <%= pb_rails("background", props: { background_color: "error_subtle", tag: "col" }) %>
-    <%= pb_rails("background", props: { background_color: "info_subtle", tag: "col" }) %>
+    <%= pb_rails("background", props: { background_color: "card_light", tag: "col" }) %>
     <%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %>
   </colgroup>
-  <thead>
-    <th>Column 1</th>
-    <th>Column 2</th>
-    <th>Column 3</th>
-  </thead>
+  <%= pb_rails("background", props: { background_color: "card_light", tag: "thead" }) do %>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+    </tr>
+  <% end %>
   <tbody>
     <tr>
       <td>Value 1</td>

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

@@ -68,7 +68,7 @@ const TableWithBackgroundKit = (props) => {
                 tag='col'
             />
             <Background
-                backgroundColor="info_subtle"
+                backgroundColor="card_light"
                 tag='col'
             />
             <Background
@@ -76,13 +76,16 @@ const TableWithBackgroundKit = (props) => {
                 tag='col'
             />
           </colgroup>
-          <thead>
+          <Background
+              backgroundColor="card_light"
+              tag='thead'
+          >
             <tr>
-              <th>{'Column 1'}</th>
-              <th>{'Column 2'}</th>
-              <th>{'Column 3'}</th>
+                <th>{'Column 1'}</th>
+                <th>{'Column 2'}</th>
+                <th>{'Column 3'}</th>
             </tr>
-          </thead>
+          </Background>
           <tbody>
             <tr>
               <td>{'Value 1'}</td>

data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss

@@ -74,31 +74,6 @@
       &.table-card {
         background: none !important;
 
-        &.dark {
-          tbody, .pb_table_tbody {
-            tr, .pb_table_tr {
-              td, .pb_table_td {
-                background: $bg_dark_card !important;
-                border-color: $border_dark !important;
-                &:before {
-                  color: $text_dk_light !important;
-                }
-                &:after {
-                  height: 0;
-                  background-color: transparent;
-                }
-  
-                &:first-child {
-                  border-radius: $border_rad_light $border_rad_light 0 0 !important;
-                }
-                &:last-child {
-                  border-radius: 0 0 $border_rad_light $border_rad_light !important;
-                }
-              }
-            }
-          }
-        }
-
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {
@@ -106,7 +81,6 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
-
               &:after {
                 height: 0;
                 background-color: transparent;

data/app/pb_kits/playbook/pb_table/styles/_mobile.scss

@@ -77,6 +77,7 @@
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {
+              background: $white !important;
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;

data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss

@@ -74,31 +74,6 @@
       &.table-card {
         background: none !important;
 
-        &.dark {
-          tbody, .pb_table_tbody {
-            tr, .pb_table_tr {
-              td, .pb_table_td {
-                background: $bg_dark_card !important;
-                border-color: $border_dark !important;
-                &:before {
-                  color: $text_dk_light !important;
-                }
-                &:after {
-                  height: 0;
-                  background-color: transparent;
-                }
-  
-                &:first-child {
-                  border-radius: $border_rad_light $border_rad_light 0 0 !important;
-                }
-                &:last-child {
-                  border-radius: 0 0 $border_rad_light $border_rad_light !important;
-                }
-              }
-            }
-          }
-        }
-
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {

data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss

@@ -74,31 +74,6 @@
       &.table-card {
         background: none !important;
 
-        &.dark {
-          tbody, .pb_table_tbody {
-            tr, .pb_table_tr {
-              td, .pb_table_td {
-                background: $bg_dark_card !important;
-                border-color: $border_dark !important;
-                &:before {
-                  color: $text_dk_light !important;
-                }
-                &:after {
-                  height: 0;
-                  background-color: transparent;
-                }
-  
-                &:first-child {
-                  border-radius: $border_rad_light $border_rad_light 0 0 !important;
-                }
-                &:last-child {
-                  border-radius: 0 0 $border_rad_light $border_rad_light !important;
-                }
-              }
-            }
-          }
-        }
-
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -32,7 +32,6 @@ type TooltipProps = {
   position?: "absolute" | "fixed";
   text: string,
   showTooltip?: boolean,
-  forceOpenTooltip?: boolean,
 } & GlobalProps
 
 const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): React.ReactElement => {
@@ -50,7 +49,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     text,
     showTooltip = true,
     zIndex,
-    forceOpenTooltip = false,
     ...rest
   } = props
 
@@ -137,7 +135,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
       >
         {children}
       </div>
-      {(open || forceOpenTooltip) && (
+      {open && (
         <div
             {...getFloatingProps({
               className: `tooltip_tooltip ${placement} visible`,

data/app/pb_kits/playbook/pb_user/_user.tsx

@@ -13,7 +13,6 @@ type UserProps = {
   aria?: {[key: string]: string},
   avatar?: boolean,
   avatarUrl?: string,
-  bold?: boolean,
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
@@ -33,7 +32,6 @@ const User = (props: UserProps): React.ReactElement => {
     aria = {},
     avatar = false,
     avatarUrl,
-    bold = true,
     className,
     dark = false,
     data = {},
@@ -77,7 +75,6 @@ const User = (props: UserProps): React.ReactElement => {
       }
       <div className="content_wrapper">
         <Title
-            bold={bold}
             dark={dark}
             size={size == 'lg' ? 3 : 4}
             text={name}

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

@@ -2,7 +2,6 @@ examples:
 
   rails:
   - user_default: Default
-  - user_light_weight: Light Weight
   - user_with_territory: With Territory
   - user_text_only: Text Only
   - user_size: Horizontal Size
@@ -12,7 +11,6 @@ examples:
 
   react:
   - user_default: Default
-  - user_light_weight: Light Weight
   - user_with_territory: With Territory
   - user_text_only: Text Only
   - user_size: Horizontal Size

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

@@ -1,5 +1,4 @@
 export { default as UserDefault } from './_user_default.jsx'
-export { default as UserLightWeight } from './_user_light_weight.jsx'
 export { default as UserWithTerritory } from './_user_with_territory.jsx'
 export { default as UserTextOnly } from './_user_text_only.jsx'
 export { default as UserSize } from './_user_size.jsx'

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -12,7 +12,7 @@
     }) %>
   <% end %>
   <%= content_tag(:div, class: "content_wrapper") do %>
-    <%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark, bold: object.bold }) %>
+    <%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark }) %>
     <%= pb_rails("body", props: {
       text: "#{object.details}",
       dark: object.dark,

data/app/pb_kits/playbook/pb_user/user.rb

@@ -9,7 +9,6 @@ module Playbook
       prop :avatar, type: Playbook::Props::Boolean,
                     default: false
       prop :avatar_url
-      prop :bold, type: Playbook::Props::Boolean, default: true
       prop :name
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],

data/app/pb_kits/playbook/pb_user/user.test.js

@@ -26,17 +26,3 @@ test('subtitle prop accepts a node', () => {
 
   expect(screen.getByTestId('test-subtitle-block')).toHaveTextContent('test caption')
 })
-
-test('bold prop applies correct styling when false', () => {
-  render(
-    <User
-        bold={false}
-        data={{ testid: 'test-bold-false' }}
-        name="Anna Black"
-    />
-  )
-  const titleElement = screen.getByText("Anna Black")
-  expect(titleElement).toBeInTheDocument()
-
-  expect(titleElement).toHaveClass('pb_title_kit_size_4_thin')
-})