playbook_ui 14.14.0.pre.alpha.PBNTR888selectvaliditymessage6348 → 14.14.0.pre.alpha.PBNTR890typeahead6390

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

@@ -0,0 +1,61 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+
+const OVERLAY_SELECTOR = '[data-pb-overlay]'
+const OVERLAY_SCROLL_ELEMENT = '[data-overlay-scroll-element]'
+const PREVIOUS_OVERLAY_CLASSNAME = '[data-previous-overlay-classname]'
+const SUBSEQUENT_OVERLAY_CLASSNAME = '[data-subsequent-overlay-classname]'
+
+export default class PbOverlay extends PbEnhancedElement {
+    static get selector() {
+        return OVERLAY_SELECTOR
+    }
+
+    get target() {
+        return this.element.querySelector(OVERLAY_SCROLL_ELEMENT).children[0]
+    }
+
+    connect() {
+        this.handleOverlayDynamic()
+    }
+
+    handleOverlayDynamic() {
+        const isOverlayDynamic = this.element.dataset?.overlayDynamic
+
+        if (isOverlayDynamic) {
+            const previousOverlayElement = this.element.querySelector(PREVIOUS_OVERLAY_CLASSNAME)
+            const previousOverlayClassname = previousOverlayElement?.dataset?.previousOverlayClassname
+            const subsequentOverlayElement = this.element.querySelector(SUBSEQUENT_OVERLAY_CLASSNAME)
+            const subsequentOverlayClassname = subsequentOverlayElement?.dataset?.subsequentOverlayClassname
+
+            const handleScrollChange = (target) => {
+                const { scrollLeft, scrollWidth, clientWidth } = target
+                const isScrollAtStart = scrollLeft === 0
+                const isScrollAtEnd = scrollLeft + clientWidth >= scrollWidth - 1
+        
+                if (isScrollAtStart) {
+                    previousOverlayElement.classList.remove(previousOverlayClassname)
+                } else {
+                    previousOverlayElement.classList.add(previousOverlayClassname)
+                }
+        
+                if (isScrollAtEnd) {
+                    subsequentOverlayElement.classList.remove(subsequentOverlayClassname)
+                } else {
+                    subsequentOverlayElement.classList.add(subsequentOverlayClassname)
+                }
+            }
+
+            this.target.addEventListener('scroll', (event) => {
+                handleScrollChange(event.target)
+            })
+
+            handleScrollChange(this.target)
+        }
+    }
+
+    disconnect() {
+        if (this.element.dataset?.overlayDynamic) {
+            this.target.removeEventListener('scroll')
+        }
+    }
+}

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

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

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

@@ -8,6 +8,8 @@ module Playbook
                    default: "card_light"
       prop :layout, type: Playbook::Props::HashProp,
                     default: { "bottom": "full" }
+      prop :dynamic, type: Playbook::Props::Boolean,
+                     default: false
 
       def classname
         generate_classname("pb_overlay")
@@ -105,6 +107,13 @@ 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
     end
   end
 end

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -31,6 +31,41 @@
     @include pb_title_thin;
   }
 
+  &[class*=_display] {
+    font-size: clamp(
+      24px, 
+      calc(24px + (128 - 24) * ((100vw - 320px) / (1920 - 320))), 
+      128px
+    );
+  }
+
+  &[class*=_dynamic] {
+    &[class*=_xs] {
+      font-size: min(2vw, 5rem);
+    }
+
+    &[class*=_sm] {
+      font-size: min(2.5vw, 6rem);
+    }
+
+    &[class*=_md] {
+      font-size: min(4vw, 10rem);
+    }
+
+    &[class*=_lg] {
+      font-size: min(5vw, 12rem);
+    }
+
+    &[class*=_xl] {
+      font-size: min(6vw, 14rem);
+    }
+
+    &[class*=_xxl] {
+      font-size: min(8vw, 16rem);
+    }
+  }
+
+
   @each $size, $size_value in $breakpoints_grid {
     @for $title_size_value from 1 through 4 {
       $min_size: map-get($size_value, "min");

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
 
-type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4"
+type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4" | "display"
 type SizeResponsiveType = {[key: string]: SizeType}
 
 type TitleProps = {
@@ -16,6 +16,7 @@ type TitleProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   size?: SizeType | SizeResponsiveType,
+  displaySize?: null | "xs" | "sm" | "md" | "lg" | "xl" | "xxl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",
@@ -32,6 +33,7 @@ const Title = (props: TitleProps): React.ReactElement => {
     htmlOptions = {},
     id,
     size = 3,
+    displaySize = null,
     bold = true,
     tag = 'h3',
     text,
@@ -56,9 +58,16 @@ const Title = (props: TitleProps): React.ReactElement => {
     return css.trim()
   }
 
+  const buildDisplaySize = () => {
+    if (displaySize) {
+      return `pb_title_kit_dynamic_${displaySize}`
+    }
+  }
+
   const classes = classnames(
     buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold),
     globalProps(props),
+    buildDisplaySize(),
     buildResponsiveSizeCss(),
     className
   )

data/app/pb_kits/playbook/pb_title/docs/_title_default.html.erb

@@ -1,10 +1,9 @@
 <%= pb_rails("title", props: {
+    margin_bottom: "md"
 })  do %>
     Default Title
 <% end %>
 
-<br/>
-
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
 <%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_default.jsx

@@ -6,10 +6,10 @@ const TitleDefault = (props) => {
   return (
     <div>
       <Title
+          marginBottom='md'
           text="Default Title"
           {...props}
       />
-      <br />
       <Title
           size={1}
           tag="h1"

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("title", props: { text: "Display Size xs", tag: "h1", display_size: "xs" }) %>
+<%= pb_rails("title", props: { text: "Display Size sm", tag: "h1", display_size: "sm" }) %>
+<%= pb_rails("title", props: { text: "Display Size md", tag: "h1", display_size: "md" }) %>
+<%= pb_rails("title", props: { text: "Display Size lg", tag: "h1", display_size: "lg" }) %>
+<%= pb_rails("title", props: { text: "Display Size xl", tag: "h1", display_size: "xl" }) %>
+<%= pb_rails("title", props: { text: "Display Size xxl", tag: "h1", display_size: "xxl" }) %>
+<%= pb_rails("title", props: { text: "This is a size of display", tag: "h1", size: "display"}) %>

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import Title from '../_title'
+
+const TitleDisplaySize = (props) => {
+  return (
+    <div>
+      <Title
+          displaySize="xs"
+          tag="h1"
+          text="Display Size xs"
+          {...props}
+      />
+      <Title
+          displaySize="sm"
+          tag="h1"
+          text="Display Size sm"
+          {...props}
+      />
+      <Title
+          displaySize="md"
+          tag="h1"
+          text="Display Size md"
+          {...props}
+      />
+      <Title
+          displaySize="lg"
+          tag="h1"
+          text="Display Size lg"
+          {...props}
+      />
+      <Title
+          displaySize="xl"
+          tag="h1"
+          text="Display Size xl"
+          {...props}
+      />
+      <Title
+          displaySize="xxl"
+          tag="h1"
+          text="Display Size xxl"
+          {...props}
+      />
+      <Title
+          size="display"
+          tag="h1"
+          text="This is a size of display"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TitleDisplaySize

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.md

@@ -0,0 +1 @@
+Responsive sizes for large screens and tablets, perfect for digital signage.

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

@@ -5,6 +5,7 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
+  - title_display_size: Display Size
 
   react:
   - title_default: Default UI
@@ -12,3 +13,4 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
+  - title_display_size: Display Size

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

@@ -3,3 +3,4 @@ export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'
 export { default as TitleResponsive } from './_title_responsive.jsx'
 export { default as TitleTruncate } from './_title_truncate.jsx'
+export { default as TitleDisplaySize } from './_title_display_size.jsx'

data/app/pb_kits/playbook/pb_title/title.rb

@@ -16,12 +16,15 @@ module Playbook
                      default: nil,
                      deprecated: true
       prop :bold, type: Playbook::Props::Boolean, default: true
+      prop :display_size, type: Playbook::Props::Enum,
+                          values: [nil, "xs", "sm", "md", "lg", "xl", "xxl"],
+                          default: nil
 
       def classname
         if is_size_responsive
           generate_classname("pb_title_kit", variant, color, is_bold) + generate_responsive_size_classname
         else
-          generate_classname("pb_title_kit", size, variant, color, is_bold)
+          generate_classname("pb_title_kit", size, variant, color, is_bold) + generate_display_size
         end
       end
 
@@ -29,6 +32,12 @@ module Playbook
         bold ? nil : "thin"
       end
 
+      def generate_display_size
+        return "" if display_size.nil?
+
+        " pb_title_kit_dynamic_#{display_size}"
+      end
+
       def is_size_responsive
         try(:size).is_a?(::Hash)
       end

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

@@ -141,7 +141,6 @@ $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;
@@ -156,7 +155,6 @@ $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;
@@ -169,7 +167,6 @@ $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/_tooltip_delay_rails.html.erb

@@ -0,0 +1,39 @@
+<%= pb_rails("flex", props: { orientation: "row", gap: "md" }) do %>
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <%= pb_rails("button", props: {classname: "tooltip-delay", text: "1s delay"}) %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <%= pb_rails("button", props: {classname: "tooltip-open-delay", text: "Open only"}) %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <%= pb_rails("button", props: {classname: "tooltip-close-delay", text: "Close only"}) %>
+  <% end %>
+
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: ".tooltip-delay",
+      tooltip_id: "delay-tooltip",
+      position: 'top',
+      delay_open: 1000,
+      delay_close: 1000
+    }) do %>
+        1s open/close delay 
+  <% end %>
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: ".tooltip-open-delay",
+      tooltip_id: "open-tooltip",
+      position: 'top',
+      delay_open: 1000
+    }) do %>
+        1s open delay 
+  <% end %>
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: ".tooltip-close-delay",
+      tooltip_id: "close-tooltip",
+      position: 'top',
+      delay_close: 1000
+    }) do %>
+        1s close delay 
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md

@@ -0,0 +1,3 @@
+Waits for the specified time when the event listener runs before triggering the tooltip.
+
+The `delay_open` and `delay_close` accept numbers in milliseconds. 1 second is 1000 milliseconds.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb

@@ -0,0 +1,26 @@
+<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
+  <%= pb_rails("flex/flex_item") do %>
+    <%= pb_rails("button", props: { text: "With Interaction", id: "tooltip-interaction"}) %>
+
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#tooltip-interaction",
+      tooltip_id: "tooltip-with-interaction",
+      position: 'top',
+      interaction: true
+    }) do %>
+        You can copy me
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item") do %>
+    <%= pb_rails("button", props: { text: "No Interaction", id: "tooltip-no-interaction"}) %>
+
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#tooltip-no-interaction",
+      tooltip_id: "tooltip-without-interaction",
+      position: 'top',
+    }) do %>
+        I'm just a regular tooltip
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -2,8 +2,10 @@ 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: