playbook_ui 13.24.0.pre.alpha.play1305drycontenttag2689 → 13.24.0

data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <%= pb_rails("body", props: { status: object.status }) do %>
         <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
         <%= "#{object.value}%" if object.value %>

data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <div class="pb_stat_value_wrapper">
     <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",

data/app/pb_kits/playbook/pb_table/table.html.erb

@@ -1,6 +1,10 @@
 <%= content_tag(:div) do %>
   <% if object.tag == "table" %>
-    <%= pb_content_tag(:table,
+    <%= content_tag(:table,
+      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_table/table_body.html.erb

@@ -1,9 +1,19 @@
 <% if object.tag == "table" %>
-  <%= pb_content_tag(:tbody, **combined_html_options) do %>
-    <%= content.presence %>
-  <% end %>
+    <%= content_tag(:tbody,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
+      <%= content.presence %>
+    <% end %>
 <% else %>
-  <%= pb_content_tag(:div, **combined_html_options) do %>
-    <%= content.presence %>
-  <% end %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
+      <%= content.presence %>
+    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table_cell.html.erb

@@ -1,9 +1,19 @@
 <% if object.tag == "table" %>
-  <%= pb_content_tag(:td, **combined_html_options) do %>
-    <%= content.presence || object.text %>
-  <% end %>
+    <%= content_tag(:td,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
+      <%= content.presence || object.text %>
+    <% end %>
 <% else %>
-  <%= pb_content_tag(:div, **combined_html_options) do %>
-    <%= content.presence || object.text %>
-  <% end %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
+      <%= content.presence || object.text %>
+    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table_head.html.erb

@@ -1,9 +1,19 @@
 <% if object.tag == "table" %>
-  <%= pb_content_tag(:thead, **combined_html_options) do %>
-    <%= content.presence %>
-  <% end %>
+    <%= content_tag(:thead,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
+      <%= content.presence %>
+    <% end %>
 <% else %>
-  <%= pb_content_tag(:div, **combined_html_options) do %>
-    <%= content.presence %>
-  <% end %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
+      <%= content.presence %>
+    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -1,6 +1,9 @@
 <% if object.tag == "table" %>  
-  <%= pb_content_tag(:th,
+  <%= content_tag(:th,
       colspan: object.colspan,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
       id: "pb-th#{object.id}",
       **combined_html_options) do %>
     <% unless sorting_style? %>
@@ -45,7 +48,12 @@
     <% end %>
   <% end %>
 <% else %>
-  <%= pb_content_tag(:div, **combined_html_options) do %>
-    <%= content.presence || object.text %>
+  <%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
+      <%= content.presence || object.text %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table_row.html.erb

@@ -1,9 +1,19 @@
 <% if object.tag == "table" %>
-  <%= pb_content_tag(:tr, **combined_html_options) do %>
-    <%= content.presence %>
-  <% end %>
+    <%= content_tag(:tr,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
+      <%= content.presence %>
+    <% end %>
 <% else %>
-  <%= pb_content_tag(:div, **combined_html_options) do %>
-    <%= content.presence %>
-  <% end %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
+      <%= content.presence %>
+    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    **combined_html_options) do %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
   <% end %>

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
   <% end %>

data/app/pb_kits/playbook/pb_time/time.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%
     # convert deprecated prop values
     size = object.size

data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <div class="pb_time_range_inline_wrapper">
         <% if object.icon == true %>
           <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "clock", dark: object.dark, classname:"pb_time_range_inline_icon", fixed_width: true, size: object.size }) }) %>

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <%= pb_rails("body", props: { color: "light", dark: object.dark, classname: "pb_time_stacked time-spacing" }) do %>
       <time>

data/app/pb_kits/playbook/pb_timeline/item.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
 
   <div class="pb_timeline_item_left_block">
     <% if object.date.present? %>
@@ -7,7 +11,7 @@
         size: "sm",
         align: "center"
       }) %>
-  <% end %>
+    <% end %>
   </div>
 
   <div class="pb_timeline_item_step">
@@ -16,7 +20,7 @@
       variant: object.icon_color,
       size: "xs"
     }) %>
-  <div class="pb_timeline_item_connector"></div>
+    <div class="pb_timeline_item_connector"></div>
   </div>
 
   <div class="pb_timeline_item_right_block">

data/app/pb_kits/playbook/pb_timeline/timeline.html.erb

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

data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
 
   <% if object.unstyled %>
     <div><%= object.timestamp_text %></div>

data/app/pb_kits/playbook/pb_title/title.html.erb

@@ -1,4 +1,7 @@
-<%= pb_content_tag(object.tag, **combined_html_options) do %>
-  <%= content.presence || object.text %>
-<% end %>
+<%= content_tag(object.tag,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %><%= content.presence || object.text %><% end %>
     

data/app/pb_kits/playbook/pb_title_count/title_count.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: {
     dark: object.dark,
     size: object.title_size,

data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: { text: object.title, size: 4 }) %>
   <%= pb_rails("body", props: { text: object.detail, color: "light" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_toggle/toggle.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    aria: object.aria,
+    class: object.classname,
+    **combined_html_options) do %>
   <label class="pb_toggle_wrapper">
     <%= content.presence || object.input %>
     <div class="pb_toggle_control"></div>

data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
   <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
     <%= content.presence %>
     <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -7,21 +7,17 @@ import { get, isString, uniqueId } from 'lodash'
 import { globalProps } from '../utilities/globalProps'
 import classnames from 'classnames'
 
-import {
-  Control,
-  ClearIndicator,
-  IndicatorsContainer,
-  MenuList,
-  MultiValue,
-  Option,
-  Placeholder,
-  ValueContainer,
-} from "./components"
-
-import * as kitComponents from "./components"
+import Control from './components/Control'
+import ClearIndicator from './components/ClearIndicator'
+import IndicatorsContainer from './components/IndicatorsContainer'
+import MenuList from './components/MenuList'
+import MultiValue from './components/MultiValue'
+import Option from './components/Option'
+import Placeholder from './components/Placeholder'
+import ValueContainer from './components/ValueContainer'
 
 import { noop, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GenericObject, Noop } from '../types'
+import { Noop } from '../types'
 
 /**
  * @typedef {object} Props
@@ -33,7 +29,7 @@ import { GenericObject, Noop } from '../types'
 type TypeaheadProps = {
   async?: boolean,
   className?: string,
-  components?: GenericObject,
+  components?: object,
   createable?: boolean,
   dark?: boolean,
   data?: { [key: string]: string },
@@ -104,7 +100,7 @@ const Typeahead = ({
     multiKit: '',
     onCreateOption: null as null,
     plusIcon: false,
-    onMultiValueClick: (_option: SelectValueType): any => undefined,
+    onMultiValueClick: (_option: SelectValueType) => { },
     ...props,
   }
 
@@ -141,23 +137,19 @@ const Typeahead = ({
   const inlineClass = selectProps.inline ? 'inline' : null
 
   return (
-    <div
-        {...dataProps}
-        {...htmlProps}
-        className={classnames(classes, inlineClass)}
+    <div 
+      {...dataProps}
+      {...htmlProps}
+      className={classnames(classes, inlineClass)}
     >
       <Tag
-          classNamePrefix="typeahead-kit-select"
-          error={error}
-          onChange={handleOnChange}
-          {...selectProps}
+        classNamePrefix="typeahead-kit-select"
+        error={error}
+        onChange={handleOnChange}
+        {...selectProps}
       />
     </div>
   )
 }
 
-Object.keys(kitComponents).forEach((k) => {
-  (Typeahead as GenericObject)[k] = (kitComponents as {[key: string]: unknown})[k]
-})
-
 export default Typeahead

data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx

@@ -1,12 +1,10 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const MenuList = (props: any) => {
-  return (
+const MenuList = (props: any) => (
   <components.MenuList {...props}>
     {props.children}
-    {props.footer}
   </components.MenuList>
-)}
+)
 
 export default MenuList

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -46,7 +46,7 @@ const TypeaheadWithHighlight = (props) => {
       if (!inputValue.length) return text
       return text.replace(
         new RegExp(inputValue, 'gi'),
-        (highlighted) => `<mark>${highlighted}</mark>`
+        highlighted => `<mark>${highlighted}</mark>`
       )
     }
     return (

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

@@ -22,4 +22,3 @@ examples:
     - typeahead_createable: Createable
     - typeahead_async_createable: Createable (+ Async Data)
     - typeahead_error_state: Error State
-    - typeahead_custom_menu_list: Custom MenuList

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

@@ -9,4 +9,3 @@ export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
 export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
 export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
 export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
-export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'

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

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <% if object.avatar_url.present? || object.avatar %>
     <%= pb_rails("avatar", props: {
       name: object.name,

data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb

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

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
     <%= pb_rails("caption", props: {dark: object.dark, text: object.day_of_week}) %>
     <%= pb_rails("title", props: {dark: object.dark, size: 4, tag: "span", text: object.formatted_month_and_day}) %>
 <% end %>

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -213,7 +213,7 @@ $status_color_text: (
   warning:            darken($warning, 10%),
   error:              $error,
   info:               $info,
-  neutral:            $text_lt_light,
+  neutral:            darken($neutral, 15%),
   primary:            $primary
 );