playbook_ui 10.2.1 → 10.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8b178f062785d89be15c032908f55e96f3d1fe70f18af9818fd074b2a3e18008
-  data.tar.gz: 7ebd1388f01b4235d8cee6932bd5ad66c5f99b2a23cb7587e5f0f7603e96a7cb
+  metadata.gz: 92a63c7a34002ee474379b924fac531199e11e3d5976bf78b6fe97e5537110e5
+  data.tar.gz: eb19246bf1a95c6bafb81e752a897a92fc8dd7b7e128c08c05e7ce3d24b8b6d8
 SHA512:
-  metadata.gz: 246f7e177b640539519d0e4a48c375afd08a5a0c836345d8ab6054cd3efbbdf937d404d8ba5f68811708c267da34156df9662d3a89b06498dd6ce5a5d25da28b
-  data.tar.gz: a75a04eda5a1a142cb7517909bf0db0ad2ffd60bad691776741b55bff90e34e8d03cb24bf420de385e5a9243d109eb5b44fcb3b65021bc589f87c48038d8e977
+  metadata.gz: 1c76fe545fd05b58ea4e449cbfaed640329cae428bb317203ba41d6b82ff3881cce0beb55ee5e289ca83752490515aa2263b13f4975a94925f955ceee93d6fa6
+  data.tar.gz: a2c4878dbfa7e00663dddba7c265fa8ab7bef5250ddee8bc7b694dcafa2a56185b6dcc0af7611717cf33ad976193594366ce55ce0570c9fe90f27c92af3f76dd

data/app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js

@@ -1,5 +1,5 @@
 import { commonSettings } from '../pb_dashboard/commonSettings.js'
-import typography from '../tokens/_typography.scss'
+import typography from '../tokens/exports/_typography.scss'
 
 const sizeColumns = function(highchart) {
   const column = highchart.plotOptions.column

data/app/pb_kits/playbook/pb_dashboard_value/dashboardValueSettings.js

@@ -1,5 +1,5 @@
-import colors from '../tokens/_colors.scss'
-import typography from '../tokens/_typography.scss'
+import colors from '../tokens/exports/_colors.scss'
+import typography from '../tokens/exports/_typography.scss'
 
 const pbIndicator = {
   title: {

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_line_graph/lineGraphSettings.js

@@ -1,5 +1,5 @@
 import { commonSettings } from '../pb_dashboard/commonSettings.js'
-import typography from '../tokens/_typography.scss'
+import typography from '../tokens/exports/_typography.scss'
 
 const markerStyles = (highchart) => {
   highchart.plotOptions.line.marker.enabled = true

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_nav/_horizontal_nav.scss

@@ -99,7 +99,7 @@ $selector: ".pb_nav_list";
         border-color: rgba($white, $opacity_3);
       }
       &[class*=_active] [class*=_link]{
-        border-color: $white;
+        border-color: $active_dark;
         [class*=_text],[class*=_icon]{
           color: $text_dk_default;
         }

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/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.2.0"
-  VERSION = "10.2.1"
+  PREVIOUS_VERSION = "10.5.0"
+  VERSION = "10.6.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.2.1
+  version: 10.6.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-07-22 00:00:00.000000000 Z
+date: 2021-08-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -221,22 +221,22 @@ dependencies:
   name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.8'
     - - ">="
       - !ruby/object:Gem::Version
         version: 3.8.0
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.8'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.8'
     - - ">="
       - !ruby/object:Gem::Version
         version: 3.8.0
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.8'
 - !ruby/object:Gem::Dependency
   name: rubocop
   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
@@ -1505,6 +1506,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
@@ -2080,7 +2085,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.4
+rubygems_version: 3.0.3
 signing_key:
 specification_version: 4
 summary: Playbook Design System