playbook_ui 10.4.0 → 10.6.2.pre.alpha.dep

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 38eeece3fb68d6227c36abeb088a2552e235d10eb997f01c144f50082a797b36
-  data.tar.gz: d861222b9b7916886d94fe39887275811192f8619e6e248133706f415ea2dee8
+  metadata.gz: 361df619e970d5e3d935da11689effd50fda787b550e94a0b2ffa918d6d4e558
+  data.tar.gz: 725ccf3c38f4cb117bf8845bc7d5cdf852f1146b70e632e3cc2456a354d3301b
 SHA512:
-  metadata.gz: ec248835829f696b9957c544dd4d8b96d5180c1a5bb7799fd8a283678f7f99cbc54f355f47ed1f5a2a9a8c5d2d6cc80e790b37a7a23067bf8c0e228fb03c9dd9
-  data.tar.gz: 3ac794d64bf862f35351784e1efced6de5c38bfbc5d2c38d2e9388cfdb5a3f1756abcc8082275a33e59745e2ce355c97f65c9ef7a750c329c54d732381d02252
+  metadata.gz: 00f7c8a62559d90263a71aaeba3f837c37448e170eff51eee848964321028a6fc7ac1e19a9341a98140d474adc7c9081ab40f8a004335058e6a3549602b4b3d1
+  data.tar.gz: 07d4883c55d61a9e8e2ced35c43d738995a4bb7fe3f8625e7d2b2744bbf0bac181846216676cf5f5e2e598a9496063ff0c476a1356e538b78e922803391b4120

data/app/pb_kits/playbook/pb_date/docs/_description.md

@@ -1,3 +1,11 @@
 Use to display the date. Year will not display if it is the current year.
 
 `DateTime` defaults to the "America/New_York" timezone. `Date` ignores timezone.
+
+**Please note**: this kit could potentially change the dates on you!
+
+This is because the Javascript `Date` class does not have the concept of a date without time. If you pass a Ruby `Date` string to JavaScript, you will receive a date *and* a time which makes use of the timezone it infers from your browser based on your virtual geolocation or custom browser settings.
+
+For example, if you pass a date like "7/2/2022" and your browser is on London time, Javascript will convert this to "7/2/2022 at 0:00 BST".
+
+Subsequently, if you have not passed in a timezone to this kit, it will convert that time into US Eastern Time (default), making the resulting date and time "7/1/2022 at 19:00 EST". In this case the expected July 2 date will now be presented as July 1.

data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx

@@ -14,12 +14,14 @@ import Card from '../pb_card/_card'
 type FileUploadProps = {
   accept?: array<string>,
   className?: string,
+  acceptedFilesDescription?: string,
   onFilesAccepted: Callback,
 }
 
 const FileUpload = (props: FileUploadProps) => {
   const {
-    accept = ['image/png', 'image/jpg', 'image/jpeg', 'image/svg+xml'],
+    accept = ['*'],
+    acceptedFilesDescription = '',
     className,
     onFilesAccepted = noop,
   } = props
@@ -32,6 +34,14 @@ const FileUpload = (props: FileUploadProps) => {
     onDrop,
   })
 
+  const acceptedFileTypes = accept.map((fileType) => {
+    if (fileType.startsWith('image/')) {
+      return fileType.replace('image/', ' ')
+    } else {
+      return fileType
+    }
+  })
+
   return (
     <div
         className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
@@ -43,7 +53,7 @@ const FileUpload = (props: FileUploadProps) => {
           <If condition={isDragActive}>
             <p>{'Drop the files here ...'}</p>
             <Else />
-            <p>{'Drag & drop some files here, or click to select files'}</p>
+            <p>{`Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes}`}</p>
           </If>
         </Body>
       </Card>

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -1,3 +1,8 @@
-[class^=pb_icon_kit]{
-
+// Rails custom icon styles
+svg.pb_custom_icon {
+  width: 1em;
+  fill: currentColor;
+  path {
+    fill: currentColor;
+  }
 }

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb

@@ -0,0 +1,16 @@
+<%# SVG fill color inherited from css color property %>
+<div class="icon-wrapper">
+
+  <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
+  <p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
+  <p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
+  <p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
+
+  <%= pb_rails("body", props: {
+    text: "Custom icons are compatible with other icon props (size, rotation,
+    spin, flip, etc). Their SVG fill colors will be inherited from
+    parent element's css color properties."
+  } ) %>
+</div>

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md

@@ -1,4 +1,4 @@
-### Experimental: Not currently available in the Rails version!
+# Tips for Custom Icons
 
 When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
 
@@ -8,4 +8,12 @@ Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <cod
 
 Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
 
-You must source *your own SVG into the React component/view* you are working in. This can easily be done in a programmatic and maintainable way. So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
+You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
+
+### React
+
+So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
+
+### Rails
+
+Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.

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

@@ -7,6 +7,7 @@ examples:
   - icon_pull: Icon Pull
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
+  - icon_custom: Icon Custom
 
   react:
   - icon_default: Icon Default

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -1,7 +1,13 @@
-<%= content_tag(:i, nil,
-    id: object.id,
-    data: object.data,
-    class: object.classname ) %>
-<%= content_tag(:span, nil,
-    aria: { label: "#{object.icon} icon" }.merge(object.aria),
-    hidden: true ) %>
+<% if object.custom_icon %>
+  <%= object.render_svg(object.custom_icon) %>
+<% else %>
+  <%= content_tag(:i, nil,
+      id: object.id,
+      data: object.data,
+      class: object.classname
+  ) %>
+  <%= content_tag(:span, nil,
+      aria: { label: "#{object.icon} icon" }.merge(object.aria),
+      hidden: true
+  ) %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "open-uri"
+
 module Playbook
   module PbIcon
     class Icon < Playbook::KitBase
@@ -10,7 +12,9 @@ module Playbook
       prop :flip, type: Playbook::Props::Enum,
                   values: ["horizontal", "vertical", "both", nil],
                   default: nil
-      prop :icon, required: true
+      prop :icon
+      prop :custom_icon, type: Playbook::Props::String,
+                         default: nil
       prop :inverse, type: Playbook::Props::Boolean,
                      default: false
       prop :list_item, type: Playbook::Props::Boolean,
@@ -48,6 +52,34 @@ module Playbook
         )
       end
 
+      def custom_icon_classname
+        generate_classname(
+          "pb_icon_kit",
+          border_class,
+          fixed_width_class,
+          flip_class,
+          inverse_class,
+          list_item_class,
+          pull_class,
+          pulse_class,
+          rotation_class,
+          size_class,
+          spin_class,
+          separator: " "
+        )
+      end
+
+      def render_svg(path)
+        if File.extname(path) == ".svg"
+          doc = Nokogiri::XML(open(path)) # rubocop:disable Security/Open
+          svg = doc.at_css "svg"
+          svg["class"] = "pb_custom_icon " + object.custom_icon_classname
+          raw doc
+        else
+          raise("Custom icon must be an svg. Please check your path and file type.")
+        end
+      end
+
     private
 
       def border_class

data/app/pb_kits/playbook/pb_message/_message.jsx

@@ -25,6 +25,7 @@ type MessageProps = {
   message: string,
   timestamp?: string,
   timestampObject?: string,
+  timezone?: string,
   alignTimestamp?: string,
 }
 
@@ -42,6 +43,7 @@ const Message = (props: MessageProps) => {
     message,
     timestamp,
     timestampObject,
+    timezone,
     alignTimestamp = 'right',
   } = props
   const ariaProps = buildAriaProps(aria)
@@ -87,11 +89,13 @@ const Message = (props: MessageProps) => {
           <Timestamp
               className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
               text={timestamp}
+              timezone={timezone}
           />
           <If condition={timestampObject}>
             <Timestamp
                 className={`pull-${alignTimestamp} message_timestamp`}
                 timestamp={timestampObject}
+                timezone={timezone}
             />
           </If>
         </Flex>

data/app/pb_kits/playbook/pb_message/message.html.erb

@@ -23,11 +23,13 @@
 
         <%= pb_rails("timestamp", props: {
           text: object.timestamp,
+          timezone: object.timezone,
           classname: "pull-#{object.align_timestamp} #{object.timestamp_object.present? ? 'message_humanized_time' : nil}"
         }) %>
         <% if object.timestamp_object.present? %>
           <%= pb_rails("timestamp", props: {
             timestamp: object.timestamp_object,
+            timezone: object.timezone,
             classname: "pull-#{object.align_timestamp} message_timestamp"
           }) %>
         <% end %>

data/app/pb_kits/playbook/pb_message/message.rb

@@ -10,6 +10,7 @@ module Playbook
       prop :message
       prop :timestamp
       prop :timestamp_object
+      prop :timezone, default: "America/New_York"
       prop :align_timestamp, type: Playbook::Props::Enum, values: %w[left right], default: "right"
 
       def classname

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

@@ -2,6 +2,7 @@
 
 import React, { useEffect, useRef } from 'react'
 import classnames from 'classnames'
+import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
 import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
@@ -107,6 +108,26 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     useFocus())
     : null
 
+  document.addEventListener('trix-focus', inlineFocus)
+  document.addEventListener('trix-blur', inlineFocus)
+
+  const handleAnchorElementClick = (clickedElement) => {
+    const trixEditorContainer = clickedElement.closest('.pb_rich_text_editor_kit')
+    if (!trixEditorContainer) return
+
+    if (clickedElement.nodeName === 'A' && clickedElement.hasAttribute('href')) {
+      window.open(clickedElement.href)
+    }
+  }
+
+  const handleClick = (event) => {
+    handleAnchorElementClick(event.target)
+  }
+
+  useEffect(() => {
+    trixRef.current.addEventListener('click', handleClick)
+  }, [])
+
   const RichTextEditorClass = 'pb_rich_text_editor_kit'
   const SimpleClass = simple ? 'simple' : ''
   const FocusClass = focus ? 'focus-editor-targets' : ''

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

@@ -89,6 +89,12 @@
     @include pb_textarea_light;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
+    &:empty:not(:focus)::before {
+      color: $text_lt_light;
+    }
+    a {
+      cursor: pointer;
+    }
   }
   trix-toolbar {
     .trix-button--icon {
@@ -116,7 +122,7 @@
             background: $bg_light;
           }
         }
-      } 
+      }
     }
     button.trix-button.trix-button--icon.trix-button {
       &:hover{
@@ -124,21 +130,21 @@
       }
     }
   }
-  // Trix doesn't provide customization to their icons. 
+  // Trix doesn't provide customization to their icons.
   // https://github.com/basecamp/trix/issues/464#issuecomment-564683997
   &[class*=dark] {
     // Dark SVG Icon Styles
     .trix-button--icon-bold::before {
-      background-image: url("data:image/svg+xml,%3Csvg width='11px' height='14px' viewBox='0 0 11 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-19.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M20.6,16.79 C21.565,16.115 22.25,15.025 22.25,14 C22.25,11.745 20.505,10 18.25,10 L12,10 L12,24 L19.04,24 C21.135,24 22.75,22.3 22.75,20.21 C22.75,18.69 21.885,17.395 20.6,16.79 Z M15,12.5 L18,12.5 C18.83,12.5 19.5,13.17 19.5,14 C19.5,14.83 18.83,15.5 18,15.5 L15,15.5 L15,12.5 L15,12.5 Z M18.5,21.5 L15,21.5 L15,18.5 L18.5,18.5 C19.33,18.5 20,19.17 20,20 C20,20.83 19.33,21.5 18.5,21.5 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");    
+      background-image: url("data:image/svg+xml,%3Csvg width='11px' height='14px' viewBox='0 0 11 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-19.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M20.6,16.79 C21.565,16.115 22.25,15.025 22.25,14 C22.25,11.745 20.505,10 18.25,10 L12,10 L12,24 L19.04,24 C21.135,24 22.75,22.3 22.75,20.21 C22.75,18.69 21.885,17.395 20.6,16.79 Z M15,12.5 L18,12.5 C18.83,12.5 19.5,13.17 19.5,14 C19.5,14.83 18.83,15.5 18,15.5 L15,15.5 L15,12.5 L15,12.5 Z M18.5,21.5 L15,21.5 L15,18.5 L18.5,18.5 C19.33,18.5 20,19.17 20,20 C20,20.83 19.33,21.5 18.5,21.5 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     }
     .trix-button--icon-italic::before {
-      background-image: url("data:image/svg+xml,%3Csvg width='12px' height='14px' viewBox='0 0 12 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-52.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpolygon id='Shape' points='49 10 49 13 51.215 13 47.785 21 45 21 45 24 53 24 53 21 50.785 21 54.215 13 57 13 57 10'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");    
+      background-image: url("data:image/svg+xml,%3Csvg width='12px' height='14px' viewBox='0 0 12 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-52.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpolygon id='Shape' points='49 10 49 13 51.215 13 47.785 21 45 21 45 24 53 24 53 21 50.785 21 54.215 13 57 13 57 10'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     }
     .trix-button--icon-strike::before {
-      background-image: url("data:image/svg+xml,%3Csvg width='18px' height='15px' viewBox='0 0 18 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-83.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M90.938,19.2 C90.979,19.439 91,19.69 91,19.954 C91,20.823 90.753,21.594 90.259,22.268 C89.765,22.942 89.052,23.466 88.121,23.84 C87.19,24.213 86.098,24.4 84.845,24.4 C83.799,24.4 82.9219,24.335 82.2129,24.204 C81.5039,24.073 80.7663,23.844 80,23.519 L80,23.519 L80,20.146 C80.8092,20.517 81.6507,20.806 82.5244,21.013 C83.398,21.221 84.2,21.325 84.931,21.325 C85.561,21.325 86.023,21.227 86.316,21.032 C86.61,20.838 86.757,20.587 86.757,20.28 C86.757,20.089 86.698,19.921 86.58,19.777 C86.461,19.634 86.272,19.488 86.01,19.341 C85.944,19.304 85.85,19.257 85.728,19.2 L85.728,19.2 Z M94,16.2 L94,18.2 L76,18.2 L76,16.2 L94,16.2 Z M86.026,10 C87.652,10 89.31,10.3353 91,11.006 L89.7,13.9281 C88.232,13.3277 86.965,13.0275 85.897,13.0275 C85.346,13.0275 84.945,13.1138 84.694,13.2862 C84.444,13.4587 84.318,13.6727 84.318,13.9281 C84.318,14.2028 84.478,14.4487 84.796,14.6659 C84.975,14.7877 85.326,14.9657 85.848,15.2 L80.2303,15.2 C80.1484,14.8642 80.1074,14.4978 80.1074,14.1006 C80.1074,12.8104 80.6338,11.8044 81.6865,11.0826 C82.7393,10.3609 84.186,10 86.026,10 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");    
+      background-image: url("data:image/svg+xml,%3Csvg width='18px' height='15px' viewBox='0 0 18 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-83.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M90.938,19.2 C90.979,19.439 91,19.69 91,19.954 C91,20.823 90.753,21.594 90.259,22.268 C89.765,22.942 89.052,23.466 88.121,23.84 C87.19,24.213 86.098,24.4 84.845,24.4 C83.799,24.4 82.9219,24.335 82.2129,24.204 C81.5039,24.073 80.7663,23.844 80,23.519 L80,23.519 L80,20.146 C80.8092,20.517 81.6507,20.806 82.5244,21.013 C83.398,21.221 84.2,21.325 84.931,21.325 C85.561,21.325 86.023,21.227 86.316,21.032 C86.61,20.838 86.757,20.587 86.757,20.28 C86.757,20.089 86.698,19.921 86.58,19.777 C86.461,19.634 86.272,19.488 86.01,19.341 C85.944,19.304 85.85,19.257 85.728,19.2 L85.728,19.2 Z M94,16.2 L94,18.2 L76,18.2 L76,16.2 L94,16.2 Z M86.026,10 C87.652,10 89.31,10.3353 91,11.006 L89.7,13.9281 C88.232,13.3277 86.965,13.0275 85.897,13.0275 C85.346,13.0275 84.945,13.1138 84.694,13.2862 C84.444,13.4587 84.318,13.6727 84.318,13.9281 C84.318,14.2028 84.478,14.4487 84.796,14.6659 C84.975,14.7877 85.326,14.9657 85.848,15.2 L80.2303,15.2 C80.1484,14.8642 80.1074,14.4978 80.1074,14.1006 C80.1074,12.8104 80.6338,11.8044 81.6865,11.0826 C82.7393,10.3609 84.186,10 86.026,10 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     }
     .trix-button--icon-link::before {
-      background-image: url("data:image/svg+xml,%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-117.000000, -15.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M120.695234,15.0178906 C122.367547,16.6902031 122.367547,19.4110156 120.695234,21.0833281 L117.320234,24.4583281 C116.510234,25.2683281 115.433047,25.7143906 114.287234,25.7143906 C113.141422,25.7143906 112.064234,25.2683281 111.254234,24.4583281 C109.581922,22.7860156 109.581922,20.0652031 111.254234,18.3928906 L113.178729,16.4902344 C113.535917,16.1330469 114.114729,16.1330469 114.471354,16.4902344 C114.827979,16.8474219 114.828542,17.4256719 114.471354,17.7828594 L112.546859,19.6855156 C111.587234,20.6451406 111.587234,22.2060781 112.546859,23.1657031 C113.011484,23.6303281 113.629672,23.8862656 114.287234,23.8862656 C114.944797,23.8862656 115.562422,23.6303281 116.027609,23.1657031 L119.402609,19.7907031 C120.362234,18.8310781 120.362234,17.2701406 119.402609,16.3105156 C119.045422,15.9533281 119.045422,15.3750781 119.402609,15.0178906 C119.759797,14.6607031 120.338047,14.6607031 120.695234,15.0178906 Z M123.287234,8 C124.433047,8 125.509672,8.4460625 126.320234,9.2560625 C127.992547,10.928375 127.992547,13.6491875 126.320234,15.3215 L124.358055,17.0365667 C124.000867,17.3937542 123.422617,17.3937542 123.06543,17.0365667 C122.708242,16.6793792 122.708242,16.1011292 123.06543,15.7439417 L125.027609,14.028875 C125.987234,13.06925 125.987234,11.5083125 125.027609,10.5486875 C124.562984,10.0840625 123.944797,9.828125 123.287234,9.828125 C122.629672,9.828125 122.012047,10.0840625 121.546859,10.5486875 L118.171859,13.9236875 C117.212234,14.8833125 117.212234,16.44425 118.171859,17.403875 C118.529047,17.7610625 118.529047,18.3393125 118.171859,18.6965 C117.993547,18.8748125 117.759547,18.96425 117.525547,18.96425 C117.291547,18.96425 117.057547,18.8748125 116.879234,18.6965 C115.206922,17.0241875 115.206922,14.303375 116.879234,12.6310625 L120.254234,9.2560625 C121.064234,8.4460625 122.141422,8 123.287234,8 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");    
+      background-image: url("data:image/svg+xml,%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-117.000000, -15.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M120.695234,15.0178906 C122.367547,16.6902031 122.367547,19.4110156 120.695234,21.0833281 L117.320234,24.4583281 C116.510234,25.2683281 115.433047,25.7143906 114.287234,25.7143906 C113.141422,25.7143906 112.064234,25.2683281 111.254234,24.4583281 C109.581922,22.7860156 109.581922,20.0652031 111.254234,18.3928906 L113.178729,16.4902344 C113.535917,16.1330469 114.114729,16.1330469 114.471354,16.4902344 C114.827979,16.8474219 114.828542,17.4256719 114.471354,17.7828594 L112.546859,19.6855156 C111.587234,20.6451406 111.587234,22.2060781 112.546859,23.1657031 C113.011484,23.6303281 113.629672,23.8862656 114.287234,23.8862656 C114.944797,23.8862656 115.562422,23.6303281 116.027609,23.1657031 L119.402609,19.7907031 C120.362234,18.8310781 120.362234,17.2701406 119.402609,16.3105156 C119.045422,15.9533281 119.045422,15.3750781 119.402609,15.0178906 C119.759797,14.6607031 120.338047,14.6607031 120.695234,15.0178906 Z M123.287234,8 C124.433047,8 125.509672,8.4460625 126.320234,9.2560625 C127.992547,10.928375 127.992547,13.6491875 126.320234,15.3215 L124.358055,17.0365667 C124.000867,17.3937542 123.422617,17.3937542 123.06543,17.0365667 C122.708242,16.6793792 122.708242,16.1011292 123.06543,15.7439417 L125.027609,14.028875 C125.987234,13.06925 125.987234,11.5083125 125.027609,10.5486875 C124.562984,10.0840625 123.944797,9.828125 123.287234,9.828125 C122.629672,9.828125 122.012047,10.0840625 121.546859,10.5486875 L118.171859,13.9236875 C117.212234,14.8833125 117.212234,16.44425 118.171859,17.403875 C118.529047,17.7610625 118.529047,18.3393125 118.171859,18.6965 C117.993547,18.8748125 117.759547,18.96425 117.525547,18.96425 C117.291547,18.96425 117.057547,18.8748125 116.879234,18.6965 C115.206922,17.0241875 115.206922,14.303375 116.879234,12.6310625 L120.254234,9.2560625 C121.064234,8.4460625 122.141422,8 123.287234,8 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     }
     .trix-button--icon-heading-1::before {
       background-image: url("data:image/svg+xml,%3Csvg width='19px' height='15px' viewBox='0 0 19 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-171.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling2' transform='translate(163.000000, 7.000000)'%3E%3Cpath d='M17,15.016 L17,18.016 L14,18.016 L14,25 L11,25 L11,18.016 L8,18.016 L8,15.016 L17,15.016 L17,15.016 Z M13.968,10 L26.999,10 L26.999,13 L21.983,13 L21.983,25 L18.983,25 L18.983,13 L13.967,13 L13.967,10 L13.968,10 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
@@ -170,9 +176,9 @@
     .trix-button--icon-redo::before {
       background-image: url("data:image/svg+xml,%3Csvg width='21px' height='9px' viewBox='0 0 21 9' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-700.000000, -20.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Undo/Redo' transform='translate(659.000000, 7.000000)'%3E%3Cpath d='M57.855,16.6 C56.015,14.985 53.605,14 50.96,14 C46.31,14 42.375,17.03 41,21.22 L43.365,22 C44.415,18.805 47.415,16.5 50.96,16.5 C52.915,16.5 54.69,17.22 56.075,18.385 L52.46,22 L61.46,22 L61.46,13 L57.855,16.6 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     }
-    // Dark Mode Placeholder 
+    // Dark Mode Placeholder
     trix-editor:empty:not(:focus)::before {
-      color: $focus_input_dark;
+      color: rgba(255, 255, 255, .15);
     }
     trix-editor {
       background-color: rgba($white, 0.1);
@@ -236,9 +242,6 @@
       border-bottom: none;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
-      &:empty:not(:focus)::before {
-        color: $neutral !important;
-      }
     }
     trix-toolbar .trix-button-row {
       border-top: none;
@@ -259,14 +262,28 @@
     }
   }
   &.inline {
+    trix-toolbar {
+      opacity: 0;
+      transition: all 0.3s ease-in-out 0s;
+    }
+    &.focused trix-toolbar {
+      opacity: 100;
+    }
     &:hover {
+      trix-toolbar {
+        opacity: 100;
+      }
       trix-editor {
         @include transition_default;
         border-color: $border_light;
         background-color: $white;
-        &+ trix-toolbar .trix-button-row {
-          transition: all 0.3s ease-in-out 0s;
-          opacity: 100;
+      }
+      // This fixes the border color when the link dialog input is focused
+      &:focus-within {
+        trix-editor {
+          @include transition_default;
+          border-color: $primary;
+          background-color: $focus_input_light;
         }
       }
     }
@@ -274,18 +291,24 @@
       @include transition_default;
       border-color: transparent;
       background-color: transparent;
-      &+ trix-toolbar .trix-button-row  {
-        transition: all 0.3s ease-in-out 0s;
-        opacity: 0;
-      }
       &:focus {
         @include transition_default;
         border-color: $primary;
         background-color: $focus_input_light;
-        &+ trix-toolbar .trix-button-row  {
-          transition: all 0.3s ease-in-out 0s;
-          opacity: 100;
-        }
+      }
+    }
+    &[class*=dark]:hover {
+      .trix-button-row,
+      trix-editor {
+        background-color: rgba($white, 0.1);
+        border-color: rgba($white, 0.15);
+      }
+    }
+    &[class*=dark]:focus-within {
+      .trix-button-row,
+      trix-editor {
+        background-color: rgba($white, 0.03);
+        border-color: $active_dark !important;
       }
     }
   }

data/app/pb_kits/playbook/pb_rich_text_editor/inlineFocus.js

@@ -0,0 +1,10 @@
+const inlineFocus = () => {
+  const trixEditorElement = event.target
+  const trixEditorContainer = trixEditorElement.closest('.pb_rich_text_editor_kit')
+
+  if (!trixEditorContainer.classList.contains('inline')) return
+
+  trixEditorContainer.classList.toggle('focused')
+}
+
+export default inlineFocus

data/app/pb_kits/playbook/pb_select/_select.jsx

@@ -21,6 +21,7 @@ type SelectProps = {
   aria?: object,
   blankSelection?: string,
   children?: React.Node,
+  compact?: boolean,
   className?: string,
   data?: object,
   disabled?: boolean,
@@ -29,6 +30,7 @@ type SelectProps = {
   options: SelectOption[],
   id?: string,
   includeBlank?: string,
+  inline?: boolean,
   label?: string,
   margin: string,
   marginBottom: string,
@@ -53,10 +55,12 @@ const Select = ({
   blankSelection,
   children,
   className,
+  compact = false,
   data = {},
   disabled = false,
   error,
   label,
+  inline = false,
   multiple = false,
   name,
   onChange = () => {},
@@ -69,13 +73,18 @@ const Select = ({
   const dataProps = buildDataProps(data)
   const optionsList = createOptions(options)
 
+  const inlineClass = inline ? 'inline' : null
+  const compactClass = compact ? 'compact' : null
   const classes = classnames(
     buildCss('pb_select'),
     globalProps({
       ...props,
       marginBottom: props.marginBottom || props.margin || 'sm',
     }),
-    className)
+    className,
+    inlineClass,
+    compactClass
+  )
 
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
 

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -64,6 +64,37 @@
     transform: translateY(-50%);
     pointer-events: none;
   }
+  &.inline {
+    &:not(:hover) {
+      svg {
+        display: none;
+      }
+    }
+    &:hover {
+      select {
+        color: $primary !important;
+        background: rgba(0,130,255,0.1);
+      }
+      svg {
+        color: $primary !important;
+        font-size: 16px;
+      }
+    }
+    select {
+      box-shadow: none;
+      border-color: transparent;
+      padding: 4px 8px;
+      border-radius: 4px;
+      option {
+        background-color: $white;
+      }
+    }
+    &.compact {
+      select {
+        font-size: 12px;
+      }
+    }
+  }
 }
 
 [class^=pb_select].dark {
@@ -96,4 +127,36 @@
       }
     }
   }
-}
+  &.inline {
+    &:not(:hover) {
+      svg {
+        display: none;
+      }
+    }
+    &:hover {
+      select {
+        color: $white !important;
+        background: rgba(0,130,255,0.1);
+      }
+      svg {
+        color: $primary !important;
+        font-size: 16px;
+      }
+    }
+    select {
+      box-shadow: none;
+      border-color: transparent;
+      background: transparent;
+      padding: 4px 8px;
+      border-radius: 4px;
+      option {
+        background-color: $white;
+      }
+    }
+    &.compact {
+      select {
+        font-size: 12px;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_select/docs/_select_inline.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "food",
+  inline: true,
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Body, Select } from '../..'
+
+const SelectInline = (props) => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          inline
+          label="Favorite Food"
+          name="food"
+          options={options}
+          {...props}
+      />
+      <Body
+          status="negative"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SelectInline

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "food",
+  inline: true,
+  compact: true,
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Body, Select } from '../..'
+
+const SelectInlineCompact = (props) => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          compact
+          inline
+          label="Favorite Food"
+          name="food"
+          options={options}
+          {...props}
+      />
+      <Body
+          status="negative"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SelectInlineCompact

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

@@ -9,6 +9,8 @@ examples:
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
   - select_error: Select w/ Error
+  - select_inline: Select Inline
+  - select_inline_compact: Select Inline Compact
 
 
 
@@ -21,3 +23,5 @@ examples:
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
   - select_error: Select w/ Error
+  - select_inline: Select Inline
+  - select_inline_compact: Select Inline Compact

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

@@ -6,3 +6,5 @@ export { default as SelectRequired } from './_select_required.jsx'
 export { default as SelectCustomSelect } from './_select_custom_select.jsx'
 export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
 export { default as SelectError } from './_select_error.jsx'
+export { default as SelectInline } from './_select_inline.jsx'
+export { default as SelectInlineCompact } from './_select_inline_compact.jsx'

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -1,7 +1,7 @@
 <%= content_tag(:div,
   data: object.data,
   aria: object.aria,
-  class: object.classname) do %>
+  class: object.classnames) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
       <%= pb_rails("caption", props: { text: object.label }) %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -6,9 +6,11 @@ module Playbook
   module PbSelect
     class Select < Playbook::KitBase
       prop :blank_selection
+      prop :compact, type: Playbook::Props::Boolean, default: false
       prop :disabled, type: Playbook::Props::Boolean, default: false
       prop :error
       prop :include_blank
+      prop :inline, type: Playbook::Props::Boolean, default: false
       prop :label
       prop :multiple, type: Playbook::Props::Boolean, default: false
       prop :name
@@ -16,10 +18,22 @@ module Playbook
       prop :options, type: Playbook::Props::HashArray, required: false, default: []
       prop :required, type: Playbook::Props::Boolean, default: false
 
+      def classnames
+        classname + inline_class + compact_class
+      end
+
       def classname
         generate_classname("pb_select", select_margin_bottom, separator: " ")
       end
 
+      def inline_class
+        inline ? " inline " : " "
+      end
+
+      def compact_class
+        compact ? "compact" : ""
+      end
+
       def select_wrapper_class
         "pb_select_kit_wrapper" + error_class
       end

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -10,6 +10,8 @@ module Playbook
       prop :error
       prop :inline, type: Playbook::Props::Boolean,
                     default: false
+      prop :input_options, type: Playbook::Props::Hash,
+                           default: {}
       prop :label
       prop :name
       prop :placeholder
@@ -27,7 +29,7 @@ module Playbook
       end
 
       def input_tag
-        tag(:input, input_options)
+        tag(:input, all_input_options)
       end
 
       def has_add_on?
@@ -44,13 +46,13 @@ module Playbook
 
     private
 
-      def input_options
+      def all_input_options
         {
           autocomplete: autocomplete ? nil : "off",
-          class: "text_input",
+          class: "text_input #{input_options.dig(:classname) || ''}",
           data: validation_data,
           disabled: disabled,
-          id: id,
+          id: input_options.dig(:id) || id,
           name: name,
           pattern: validation_pattern,
           placeholder: placeholder,
@@ -69,7 +71,7 @@ module Playbook
       end
 
       def validation_data
-        fields = {}
+        fields = input_options.dig(:data) || {}
         fields[:message] = validation_message unless validation_message.blank?
         fields
       end

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb

@@ -1,4 +1,15 @@
-<%= pb_rails("typeahead", props: { label: "user", name: :foo, data: { typeahead_example: true } }) %>
+<%= pb_rails("typeahead", props: {
+  label: "user",
+  name: :foo,
+  data: { typeahead_example: true },
+  input_options: {
+    classname: "my-typeahead-class",
+    data: {
+      typeahead_testing: "data field test"
+    },
+    id: "typeahead-input-id-test",
+  },
+})%>
 
 <br><br><br>
 

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -15,6 +15,7 @@
       </div>
       <%= pb_rails("text_input", props: {
         type: "search",
+        input_options: object.input_options,
         label: object.label,
         name: object.name,
         value: object.value,

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -17,6 +17,8 @@ module Playbook
       prop :name
       prop :options, type: Playbook::Props::HashArray,
                      default: []
+      prop :input_options, type: Playbook::Props::Hash,
+                           default: {}
       prop :pills, type: Playbook::Props::Boolean,
                    default: false
 

data/dist/reset.css

@@ -1,2 +1,61 @@
-*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
+/* CLEAN UP AND REMOVE */
+/* Headings */
+/* Standard Font Weights */
+/* Non_Standard Font Weights */
+/*=====================================
+Base colors should not be documented.
+Only document color use.
+
+Colors -----------------------------*/
+/* Specialty Gradient -----------------*/
+/* Interface colors -------------------*/
+/* Main colors ------------------------*/
+/*=====================================
+
+Background colors ------------------*/
+/* Card colors ------------------*/
+/* Active colors ----------------------*/
+/* Hover colors -----------------------*/
+/* Focus colors -----------------------*/
+/* Border colors ----------------------*/
+/* Shadow colors ----------------------*/
+/* Text colors ------------------------*/
+/* Data colors ------------------------*/
+/* Status colors ----------------------*/
+/* Link colors ------------------------*/
+/* Product colors ---------------------*/
+/* Category colors ---------------------*/
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0; }
+  *:before, *:after {
+    box-sizing: border-box; }
+
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  height: 100vh;
+  overflow-x: hidden; }
+
+body {
+  font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
+  font-size: 16px;
+  line-height: 1.5;
+  background-color: #F3F7FB;
+  height: 100%;
+  letter-spacing: 0;
+  font-weight: 400;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  -moz-font-feature-settings: "liga" on;
+  color: #242B42;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 50px; }
+
+a {
+  text-decoration: none;
+  color: #0056CF; }
 

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.3.0"
-  VERSION = "10.4.0"
+  PREVIOUS_VERSION = "10.5.0"
+  VERSION = "10.6.2.pre.alpha.dep"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.4.0
+  version: 10.6.2.pre.alpha.dep
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-07-28 00:00:00.000000000 Z
+date: 2021-08-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -20,7 +20,7 @@ dependencies:
         version: 5.2.4.5
     - - "<"
       - !ruby/object:Gem::Version
-        version: '7.0'
+        version: '6.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -30,7 +30,7 @@ dependencies:
         version: 5.2.4.5
     - - "<"
       - !ruby/object:Gem::Version
-        version: '7.0'
+        version: '6.0'
 - !ruby/object:Gem::Dependency
   name: actionview
   requirement: !ruby/object:Gem::Requirement
@@ -40,7 +40,7 @@ dependencies:
         version: 5.2.4.5
     - - "<"
       - !ruby/object:Gem::Version
-        version: '7.0'
+        version: '6.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -50,7 +50,7 @@ dependencies:
         version: 5.2.4.5
     - - "<"
       - !ruby/object:Gem::Version
-        version: '7.0'
+        version: '6.0'
 - !ruby/object:Gem::Dependency
   name: activesupport
   requirement: !ruby/object:Gem::Requirement
@@ -60,7 +60,7 @@ dependencies:
         version: 5.2.4.5
     - - "<"
       - !ruby/object:Gem::Version
-        version: '7.0'
+        version: '6.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -70,7 +70,7 @@ dependencies:
         version: 5.2.4.5
     - - "<"
       - !ruby/object:Gem::Version
-        version: '7.0'
+        version: '6.0'
 - !ruby/object:Gem::Dependency
   name: react-rails
   requirement: !ruby/object:Gem::Requirement
@@ -192,7 +192,7 @@ dependencies:
         version: 5.2.4.5
     - - "<"
       - !ruby/object:Gem::Version
-        version: '7.0'
+        version: '6.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -202,7 +202,7 @@ dependencies:
         version: 5.2.4.5
     - - "<"
       - !ruby/object:Gem::Version
-        version: '7.0'
+        version: '6.0'
 - !ruby/object:Gem::Dependency
   name: rspec-html-matchers
   requirement: !ruby/object:Gem::Requirement
@@ -1004,6 +1004,7 @@ files:
 - app/pb_kits/playbook/pb_icon/docs/_icon_animate.md
 - app/pb_kits/playbook/pb_icon/docs/_icon_border.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx
+- app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx
 - app/pb_kits/playbook/pb_icon/docs/_icon_custom.md
 - app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb
@@ -1467,6 +1468,7 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml
 - app/pb_kits/playbook/pb_rich_text_editor/docs/index.js
 - app/pb_kits/playbook/pb_rich_text_editor/docs/templates.js
+- app/pb_kits/playbook/pb_rich_text_editor/inlineFocus.js
 - app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb
 - app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js
@@ -1505,6 +1507,10 @@ files:
 - app/pb_kits/playbook/pb_select/docs/_select_error.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_error.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_error.md
+- app/pb_kits/playbook/pb_select/docs/_select_inline.html.erb
+- app/pb_kits/playbook/pb_select/docs/_select_inline.jsx
+- app/pb_kits/playbook/pb_select/docs/_select_inline_compact.html.erb
+- app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_required.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_required.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_value_text_same.html.erb
@@ -2076,9 +2082,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.0.3
 signing_key: