playbook_ui 14.14.0.pre.alpha.PBNTR866finalizecssendlessscroll6486 → 14.14.0.pre.alpha.PBNTR888selectvaliditymessage6348

data/app/pb_kits/playbook/pb_drawer/drawer.rb

@@ -2,55 +2,7 @@
 
 module Playbook
   module PbDrawer
-    class Drawer < Playbook::KitBase
-      prop :size, type: Playbook::Props::Enum,
-                  values: %w[xs sm md lg xl full],
-                  default: "md"
-      prop :placement, type: Playbook::Props::Enum,
-                       values: %w[left right bottom],
-                       default: "left"
-      prop :behavior, type: Playbook::Props::Enum,
-                      values: %w[floating push],
-                      default: "floating"
-      prop :overlay, type: Playbook::Props::Boolean,
-                     default: true
-      prop :within_element, type: Playbook::Props::Boolean,
-                            default: false
-      prop :border, type: Playbook::Props::Enum,
-                    values: %w[full none right left],
-                    default: "none"
-      prop :breakpoint, type: Playbook::Props::Enum,
-                        values: %w[none xs sm md lg xl],
-                        default: "none"
-
-      def classname
-        generate_classname("pb_drawer pb_drawer_#{size}_#{placement} #{within_class} #{border_classes}")
-      end
-
-      def border_classes
-        case border
-        when "full"
-          "drawer_border-full"
-        when "right"
-          "drawer_border-right"
-        when "left"
-          "drawer_border-left"
-        else
-          ""
-        end
-      end
-
-      def overlay_close
-        !should_close_on_overlay_click ? "overlay_close" : ""
-      end
-
-      def within_class
-        within_element ? "pb_drawer_within_element_rails" : ""
-      end
-
-      def overlay_classes
-        "pb_drawer_#{overlay ? '' : 'no_'}overlay drawer_content_#{placement} pb_drawer_overlay_after_open #{overlay ? '' : 'no-background'}"
-      end
+    class Drawer < ::Playbook::KitBase
     end
   end
 end

data/app/pb_kits/playbook/pb_overlay/_overlay.scss

@@ -69,17 +69,4 @@ $overlay_colors: (
     pointer-events: none;
     z-index: 1;
   }
-  
-  &.overlay-hide-scrollbar {
-    & [class*="overflow_x_auto"],
-    & [class*="overflow_y_auto"],
-    & [class*="overflow_auto"] {
-      &::-webkit-scrollbar {
-        display: none !important;
-      }
-      
-      -ms-overflow-style: none !important;
-      scrollbar-width: none !important;
-    }
-  }
 }

data/app/pb_kits/playbook/pb_overlay/_overlay.tsx

@@ -11,7 +11,6 @@ export type OverlayChildrenProps = {
     dynamic?: boolean,
     position: string,
     size: string,
-    scrollBarNone?: boolean,
 }
 
 type OverlayProps = {
@@ -24,8 +23,6 @@ type OverlayProps = {
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     layout: { [key: string]: string },
-    scrollBarNone?: boolean,
-    
 }
 
 const Overlay = (props: OverlayProps) => {
@@ -39,12 +36,11 @@ const Overlay = (props: OverlayProps) => {
         htmlOptions = {},
         id,
         layout = { "bottom": "full" },
-        scrollBarNone = false,
     } = props
 
     const ariaProps = buildAriaProps(aria)
     const dataProps = buildDataProps(data)
-    const classes = classnames(buildCss('pb_overlay'), { 'overlay-hide-scrollbar': scrollBarNone }, globalProps(props), className )
+    const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
     const htmlProps = buildHtmlProps(htmlOptions)
     const dynamicInlineProps = globalInlineProps(props)
 
@@ -72,14 +68,12 @@ const Overlay = (props: OverlayProps) => {
                     children,
                     color,
                     position: getPosition(),
-                    scrollBarNone,
                     size: getSize()
                 }) : OverlayToken({
                     children,
                     color,
                     dynamic: dynamic,
                     position: getPosition(),
-                    scrollBarNone,
                     size: getSize()
                 })
             }

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

@@ -4,11 +4,8 @@ examples:
   - overlay_multi_directional: Multi-directional
   - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
-  - overlay_hide_scroll_bar: Hide Scroll Bar
 
   rails:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
-  - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
-  - overlay_hide_scroll_bar: Hide Scroll Bar

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

@@ -2,4 +2,3 @@ export { default as OverlayDefault } from './_overlay_default.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
 export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'
-export { default as OverlayHideScrollBar } from './_overlay_hide_scroll_bar.jsx'

data/app/pb_kits/playbook/pb_overlay/overlay.html.erb

@@ -16,14 +16,12 @@ id: object.id,
         <% end %>
 
     <% else %>
-        <div class="<%= previous_overlay_class_name %>" data-previous-overlay-classname="<%= previous_overlay_class_name %>"></div>
+        <div class="<%= previous_overlay_class_name %>"></div>
 
-        <div data-overlay-scroll-element="true">
-            <%= content.presence %>
-        </div>
+        <%= content.presence %>
 
         <% if has_subsequent_overlay %>
-            <div class="<%= subsequent_overlay_class_name %>" data-subsequent-overlay-classname="<%= subsequent_overlay_class_name %>"></div>
+            <div class="<%= subsequent_overlay_class_name %>"></div>
         <% end %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_overlay/overlay.rb

@@ -8,13 +8,9 @@ module Playbook
                    default: "card_light"
       prop :layout, type: Playbook::Props::HashProp,
                     default: { "bottom": "full" }
-      prop :dynamic, type: Playbook::Props::Boolean,
-                     default: false
-      prop :scroll_bar_none, type: Playbook::Props::Boolean,
-                             default: false
 
       def classname
-        generate_classname("pb_overlay", hide_scroll_bar_class)
+        generate_classname("pb_overlay")
       end
 
       def position
@@ -109,17 +105,6 @@ module Playbook
           "bg_dark": "#0a0527",
         }
       end
-
-      def data_attributes
-        data ||= {}
-        data.merge!("data-pb-overlay" => true)
-        data.merge!("data-overlay-dynamic" => true) if dynamic
-        data
-      end
-
-      def hide_scroll_bar_class
-        scroll_bar_none ? " overlay-hide-scrollbar" : ""
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx

@@ -64,15 +64,3 @@ test('should render children', () => {
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveTextContent(props.children)
 })
-
-test('should add overlay-hide-scrollbar class when scrollBarNone is true', () => {
-    const props = {
-      children,
-      data: { testid: testId },
-      scrollBarNone: true
-    }
-  
-    render(<Overlay {...props} />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('overlay-hide-scrollbar')
-})

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

@@ -141,6 +141,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="right"] {
     box-shadow: -8px 0 28px 0 $tooltip_shadow;
+    margin: 0 0 0 $space_sm;
     .arrow {
       left: -18px;
       right: auto;
@@ -155,6 +156,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="bottom"] {
     box-shadow: 0 -12px 28px 0 $tooltip_shadow;
+    margin: $space_sm 0 0 0;
     .arrow {
       top: -18px;
       margin-bottom: 0;
@@ -167,6 +169,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="left"] {
     box-shadow: 8px 0 28px 0 $tooltip_shadow;
+    margin: 0 $space_sm 0 0;
     .arrow {
       margin-bottom: 0;
       right: -18px;

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

@@ -2,10 +2,8 @@ examples:
 
   rails:
   - tooltip_default: Default
-  - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
   - tooltip_with_icon_circle: Icon Circle Tooltip
-  - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
 
   react:

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

@@ -11,7 +11,7 @@ const TOOLTIP_TIMEOUT = 250
 
 export default class PbTooltip extends PbEnhancedElement {
   static get selector() {
-    return '[data-pb-tooltip-kit="true"][data-pb-tooltip-interaction="false"]:not([data-pb-tooltip-delay-open]):not([data-pb-tooltip-delay-close])'
+    return '[data-pb-tooltip-kit]'
   }
 
   connect() {

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -7,10 +7,6 @@ module Playbook
       prop :trigger_element_selector
       prop :trigger_element_id, deprecated: true
       prop :tooltip_id
-      prop :interaction, type: Playbook::Props::Boolean,
-                         default: false
-      prop :delay_open
-      prop :delay_close
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
       prop :trigger_method, type: Playbook::Props::Enum,
@@ -22,19 +18,15 @@ module Playbook
       end
 
       def data
-        data = Hash(values[:data]).merge(
+        Hash(values[:data]).merge(
           pb_tooltip_kit: true,
           pb_tooltip_position: position,
           pb_tooltip_trigger_element_selector: trigger_element_selector,
           pb_tooltip_trigger_element_id: trigger_element_id,
           pb_tooltip_tooltip_id: tooltip_id,
           pb_tooltip_show_tooltip: true,
-          pb_tooltip_trigger_method: trigger_method,
-          pb_tooltip_interaction: interaction
+          pb_tooltip_trigger_method: trigger_method
         )
-        data = data.merge(pb_tooltip_delay_open: delay_open) if delay_open
-        data = data.merge(pb_tooltip_delay_close: delay_close) if delay_close
-        data
       end
 
     private

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect} from 'react'
+import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
@@ -45,12 +45,8 @@ type TypeaheadProps = {
   getOptionLabel?: string | (() => string),
   getOptionValue?: string | (() => string),
   name?: string,
-  options?: Array<{ label: string; value?: string }>,
   marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
-  optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
-  searchContextSelector?: string,
-  clearOnContextChange?: boolean,
 } & GlobalProps
 
 export type SelectValueType = {
@@ -85,9 +81,6 @@ const Typeahead = ({
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
-  optionsByContext = {},
-  searchContextSelector,
-  clearOnContextChange = false,
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
@@ -122,32 +115,6 @@ const Typeahead = ({
     ...props,
   }
 
-  const [contextValue, setContextValue] = useState("")
-
-  useEffect(() => {
-    if (searchContextSelector) {
-      const searchContextElement = document.getElementById(searchContextSelector)
-
-      setContextValue((searchContextElement as HTMLInputElement)?.value)
-      const handleContextChange = (e: Event) => {
-        const target = e.target as HTMLInputElement;
-        setContextValue(target.value);
-        if (clearOnContextChange) document.dispatchEvent(new CustomEvent(`pb-typeahead-kit-${selectProps.id}:clear`))
-      }
-
-      if (searchContextElement) searchContextElement.addEventListener('change', handleContextChange)
-
-      return () => {
-        if (searchContextElement) searchContextElement.removeEventListener('change', handleContextChange)
-      }
-    }
-  }, [searchContextSelector])
-
-  const contextArray = optionsByContext[contextValue]
-  if (Array.isArray(contextArray) && contextArray.length > 0) {
-    selectProps.options = contextArray
-  }
-
   const Tag = (
     createable
       ? (async ? AsyncCreateableSelect : CreateableSelect)

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

@@ -12,8 +12,6 @@ examples:
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
-    - typeahead_dynamic_options: Dynamic Options
-    - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
 
   react:
     - typeahead_default: Default

data/app/pb_kits/playbook/pb_typeahead/index.ts

@@ -20,34 +20,6 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.searchInput.addEventListener('focus', () => this.debouncedSearch())
     this.searchInput.addEventListener('input', () => this.debouncedSearch())
     this.resultsElement.addEventListener('click', (event: MouseEvent) => this.optionSelected(event))
-
-    if (this.clearOnContextChange && this.searchContextElement) {
-      this.searchContextElement.addEventListener('change', () => {
-        this.searchInputClear()
-        this.resultsCacheClear()
-        this.clearResults()
-      })
-    }
-  }
-
-  get optionsByContext() {
-    return (this.element as HTMLElement).dataset.pbTypeaheadKitOptionsByContext
-      ? JSON.parse((this.element as HTMLElement).dataset.pbTypeaheadKitOptionsByContext)
-      : null
-  }
-
-  get searchContextElement() {
-    const selector = (this.element as HTMLElement).dataset.pbTypeaheadKitSearchContextSelector
-    if (!selector) return null
-
-    const found = this.element.parentNode?.querySelector(`#${selector}`)
-      || this.element.closest(selector)
-
-    return found || null
-  }
-
-  get clearOnContextChange() {
-    return (this.element as HTMLElement).dataset.pbTypeaheadKitClearOnContextChange === 'true'
   }
 
   handleKeydown(event: KeyboardEvent) {
@@ -68,32 +40,14 @@ export default class PbTypeahead extends PbEnhancedElement {
 
     const searchTerm = this.searchTerm
     const searchContext = this.searchContext
-
-    if (this.optionsByContext && Object.keys(this.optionsByContext).length > 0) {
-      const contextArray = this.optionsByContext[searchContext] || []
-
-      const filteredResults = contextArray.filter((obj: { label: string, value: string }) => {
-        return obj.label
-          && obj.label.toLowerCase().includes(searchTerm.toLowerCase())
-      })
-
-       const optionFragments = filteredResults.map((obj: { label: string, value: string }) => {
-      const singleOption = document.createDocumentFragment()
-      singleOption.appendChild(document.createTextNode(obj.label))
-      return singleOption
-    })
-
-      this.resultsCacheUpdate(searchTerm, searchContext, optionFragments)
-    } else {
-      const search = {
-        searchingFor: searchTerm,
-        searchingContext: searchContext,
-        setResults: (results: Array<DocumentFragment>) => {
-          this.resultsCacheUpdate(searchTerm, searchContext, results)
-        },
-      }
-      this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }))
+    const search = {
+      searchingFor: searchTerm,
+      searchingContext: searchContext,
+      setResults: (results: Array<DocumentFragment>) => {
+        this.resultsCacheUpdate(searchTerm, searchContext, results)
+      },
     }
+    this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }))
   }
 
   resultsCacheUpdate(searchTerm: string, searchContext: string, results: Array<DocumentFragment>) {
@@ -133,15 +87,11 @@ export default class PbTypeahead extends PbEnhancedElement {
     const resultOption = (event.target as Element).closest('[data-result-option-item]')
     if (!resultOption) return
 
-    const selectedText = resultOption.textContent.trim()
-
     this._validSelection = true
     this.removeValidationError()
 
-    if (this.searchContextElement) this.searchInput.value = selectedText
-
     this.resultsCacheClear()
-    if (!this.searchContextElement) this.searchInputClear()
+    this.searchInputClear()
     this.clearResults()
 
     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-result-option-selected', { bubbles: true, detail: { selected: resultOption, typeahead: this } }))
@@ -223,9 +173,6 @@ export default class PbTypeahead extends PbEnhancedElement {
       this.element.parentNode.querySelector(selector) ||
       this.element.closest(selector)
     ) as HTMLInputElement).value
-    else if (this.searchContextElement) {
-      return (this.searchContextElement as HTMLInputElement).value
-    }
 
     return null
   }

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

@@ -44,12 +44,6 @@ module Playbook
                       default: false
       prop :validation, type: Playbook::Props::HashProp,
                         default: {}
-      prop :clear_on_context_change, type: Playbook::Props::Boolean,
-                                     default: true
-      prop :options_by_context, type: Playbook::Props::HashProp,
-                                default: {}
-      prop :search_context_selector, type: Playbook::Props::String,
-                                     default: nil
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -64,10 +58,7 @@ module Playbook
         Hash(values[:data]).merge(
           pb_typeahead_kit: true,
           pb_typeahead_kit_search_term_minimum_length: search_term_minimum_length,
-          pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout,
-          pb_typeahead_kit_clear_on_context_change: clear_on_context_change,
-          pb_typeahead_kit_search_context_selector: search_context_selector,
-          pb_typeahead_kit_options_by_context: options_by_context.to_json
+          pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout
         )
       end
 
@@ -94,9 +85,6 @@ module Playbook
           placeholder: placeholder,
           plusIcon: plus_icon,
           truncate: truncate,
-          searchContextSelector: search_context_selector,
-          optionsByContext: options_by_context,
-          clearOnContextChange: clear_on_context_change,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?