playbook_ui 11.8.1 → 11.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 66327c9e420d8969f62d18ced60491926d275b8c93e7b6629df66d2945115c59
-  data.tar.gz: 4f4b1c3a71fa5fa5bcf2031b9e62fc5b82f2755d0c18b7449ad085b7746dc3fe
+  metadata.gz: c7907cac22ab4a319dd70e7433325da9f079abbbf23808f11a98048070e86919
+  data.tar.gz: 8eadc10503563e32ef0502098d32fbda57590a6296ebace53df424b135293fcf
 SHA512:
-  metadata.gz: 3bb0ff5bf96097f877f5d981302fa7337136dfdcbd8e1a99fd6579cf9c7621ebb9d38a89ca1d86187b79b52f341e93d98b75cca1fc43d3a7f1b8eafe2ba4acce
-  data.tar.gz: 27d81a4968950de36f94278a86ccdebf2adf8bb6e15330573ac49719a36d0797f9bfb1622d0d9d1d65091198d541ad328510ed3fd5ef065079f01dc0613205c4
+  metadata.gz: 6288cbbe9397dbdf6e68f938453e5cb5211e0b56afd13fac33641c5e366a4a4116695b0da162d5cb3066ebb5a5721914af339490bd37f5150f03a3811c75cd29
+  data.tar.gz: 9c4f76436d01fb6ffad7d3be1473be696360ba68d55b9e06d82861be97d1a5cfbe8e60767989c5689b67e2dce7a35a7c098ccce66c055cd8ff119a581d2a74fd

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -87,6 +87,11 @@ $transition: $transition_cubic;
         border-color: $error_dark;
       }
     }
+    &.pb_checkbox_kit_error {
+      > .pb_checkbox_checkmark {
+        border-color: $error_dark;
+      }
+    }
   }
 
   &.error {
@@ -94,4 +99,9 @@ $transition: $transition_cubic;
       border-color: $error;
     }
   }
+  &.pb_checkbox_kit_error {
+    > .pb_checkbox_checkmark {
+      border-color: $error;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -45,7 +45,7 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
     buildCss('pb_checkbox_kit', checked ? 'checked' : null, error ? 'error' : null, indeterminate? 'indeterminate' : null),
-    globalProps(props),        
+    globalProps(props),
     className
   )
 
@@ -59,7 +59,7 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
   const checkboxChildren = () => {
     if (children)
       return (children)
-    else 
+    else
     return (
     <input
         defaultChecked={checked}

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -73,7 +73,6 @@
   }
 
   .maskContainer::after {
-    background-image: linear-gradient(to right, rgba($card_light,.3) , rgba($card_light,1));
     content: " ";
     height: 48px;
     padding-left: $space_xl;
@@ -82,7 +81,6 @@
   }
 
   .maskContainer::before {
-    background-image: linear-gradient(to right, rgba($card_light,.3) , rgba($card_light,1));
     content: " ";
     height: 48px;
     padding-right: $space_sm;

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

@@ -110,6 +110,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
         <Hashtag
             classname="home-hashtag"
             dark={dark}
+            marginRight="xxs"
             newWindow={newWindow}
             text={homeId}
             type="home"

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

@@ -19,7 +19,7 @@ $selector: ".pb_nav_list";
   }
 
   [class*=pb_nav_list_title] {
-    padding: 0 $space_md $space_sm;
+    padding: 0 $space_md $space_sm $space_sm;
   }
 
   // Normal Variant

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -95,6 +95,12 @@
     a {
       cursor: pointer;
     }
+    ol,
+    ul {
+      li {
+        margin-left: $space_sm;
+      }
+    }
   }
   trix-toolbar {
     .trix-button--icon {

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb

@@ -17,7 +17,7 @@ module Playbook
                            default: {}
 
       def classname
-        generate_classname("pb_selectable_list_item_kit")
+        generate_classname("pb_item_kit")
       end
     end
   end

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

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { type Node } from 'react'
+import React, { useEffect, type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -45,8 +45,10 @@ const Table = (props: TableProps) => {
   const dataProps = buildDataProps(data)
   const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
 
-  const instance = new PbTable()
-  instance.connect()
+  useEffect(() => {
+    const instance = new PbTable()
+    instance.connect()
+  }, [])
 
   return (
     <table

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -65,12 +65,12 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
   const borderCss = `border_${borderToChange}_${borderToggle}`
 
   const shouldShowAddOn = icon !== null
-  const addOnCss = shouldShowAddOn ? 'text_input_wrapper_add_on' : null
-  const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : null
+  const addOnCss = shouldShowAddOn ? 'text_input_wrapper_add_on' : ""
+  const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : ""
   const css = classnames([
     'pb_text_input_kit',
-    inline ? 'inline' : null,
-    error ? 'error' : null,
+    inline ? 'inline' : "",
+    error ? 'error' : "",
     globalProps(props),
     className,
   ])

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -110,9 +110,8 @@ $height_from_top: $icon_height/2 - $connector_width/2;
                 &[class*=_solid] {
                     flex-basis: 100%;
                     [class=pb_timeline_item_left_block] {
-                        @include flex_wrapper(column);
+                        display: flex;
                         height: 55px;
-                        justify-content: flex-end;
                         [class=pb_date_stacked_kit_center_sm] {
                             [class=pb_date_stacked_day_month] {
                                 [class=pb_caption_kit_md] {

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb

@@ -42,3 +42,26 @@
     <% end %>
 <% end %>
 
+<br /><br /><br />
+
+<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.new(2018, 03, 20) }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Jackson Heights",
+            detail: "37-27 74th Street"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Greenpoint",
+            detail: "81 Gate St Brooklyn"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.new(2018, 05, 20) }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Society Hill",
+            detail: "72 E St Astoria"
+        }) %>
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx

@@ -94,6 +94,53 @@ const TimelineWithDate = (props) => (
         />
       </Timeline.Item>
     </Timeline>
+
+    <br/>
+    <br/>
+    <br/>
+
+    <Timeline
+        orientation="vertical"
+        showDate
+        {...props}
+    >
+      <Timeline.Item
+          date={new Date('20 Mar 2018')}
+          icon="user"
+          iconColor="royal"
+          {...props}
+      >
+        <TitleDetail
+            detail="37-27 74th Street"
+            title="Jackson Heights"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+          lineStyle="dotted"
+          {...props}
+      >
+        <TitleDetail
+            detail="81 Gate St Brooklyn"
+            title="Greenpoint"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          date={new Date('20 May 2018')}
+          icon="map-marker-alt"
+          iconColor="purple"
+          {...props}
+      >
+        <TitleDetail
+            detail="72 E St Astoria"
+            title="Society Hill"
+            {...props}
+        />
+      </Timeline.Item>
+    </Timeline>
   </div>
 )
 

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md

@@ -0,0 +1 @@
+Use the optional `showDate` prop to render the timeline kit with a visible date. If the date is from the current year, the year will not be displayed, however if date is NOT from the current year, the kit will display the year as well.

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.8.0"
-  VERSION = "11.8.1"
+  PREVIOUS_VERSION = "11.8.1"
+  VERSION = "11.9.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.8.1
+  version: 11.9.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-10-13 00:00:00.000000000 Z
+date: 2022-10-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1949,6 +1949,7 @@ files:
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx
+- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md
 - app/pb_kits/playbook/pb_timeline/docs/example.yml
 - app/pb_kits/playbook/pb_timeline/docs/index.js
 - app/pb_kits/playbook/pb_timeline/item.html.erb