playbook_ui 14.7.0 → 14.8.0.pre.alpha.PBNTR713dropdowncustomtriggerbug4696

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx

@@ -62,6 +62,65 @@ const TimelineWithChildren = (props) => (
         </Timeline.Detail>
       </Timeline.Item>
     </Timeline>
+
+    <br />
+    <br />
+    <br />
+
+    <Timeline orientation="vertical"
+        showDate
+        {...props}
+    >
+      <Timeline.Item lineStyle="solid"
+          {...props}
+      >
+        <Timeline.Label>
+          <Title size={4}
+              text='Any Kit'
+          />
+        </Timeline.Label>
+        <Timeline.Step icon="user"
+            iconColor="royal"
+        />
+        <Timeline.Detail>
+          <TitleDetail detail="37-27 74th Street"
+              title="Jackson Heights"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+
+      <Timeline.Item lineStyle="dotted"
+          {...props}
+      >
+        <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
+        <Timeline.Step icon="map-marker-alt"
+            iconColor="purple"
+        />
+        <Timeline.Detail>
+          <TitleDetail detail="72 E St Astoria"
+              title="Society Hill"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+
+      <Timeline.Item lineStyle="solid"
+          {...props}
+      >
+        <Timeline.Step>
+          <Pill text="3"
+              variant="success"
+          />
+        </Timeline.Step>
+        <Timeline.Detail>
+          <TitleDetail detail="81 Gate St Brooklyn"
+              title="Greenpoint"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+    </Timeline>
   </div>
 )
 

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb

@@ -0,0 +1,94 @@
+<%= pb_rails("flex", props: { justify: "evenly" }) do %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "xs"}) do %>
+            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Conversation started",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Trip #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Refund issue #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "sm"}) do %>
+            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Conversation started",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Trip #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Refund issue #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "md"}) do %>
+            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Conversation started",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Trip #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Refund issue #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "lg"}) do %>
+            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Conversation started",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Trip #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Refund issue #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx

@@ -0,0 +1,180 @@
+import React from 'react'
+
+import Timeline from '../_timeline'
+import Flex from "../../pb_flex/_flex"
+import FlexItem from "../../pb_flex/_flex_item"
+import Body from '../../pb_body/_body'
+
+const TimelineWithGap = (props) => (
+  <div>
+    <Flex justify="evenly">
+    <FlexItem>
+        <Timeline
+            gap="xs"
+            orientation="vertical"
+        >
+          <Timeline.Item
+              icon="user"
+              iconColor="royal"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Conversation started"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="check"
+              iconColor="teal"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Trip #12422"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="credit-card"
+              iconColor="red"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Refund issue #12422"
+                {...props}
+            />
+          </Timeline.Item>
+        </Timeline>
+      </FlexItem>
+      <FlexItem>
+        <Timeline
+            gap="sm"
+            orientation="vertical"
+        >
+          <Timeline.Item
+              icon="user"
+              iconColor="royal"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Conversation started"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="check"
+              iconColor="teal"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Trip #12422"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="credit-card"
+              iconColor="red"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Refund issue #12422"
+                {...props}
+            />
+          </Timeline.Item>
+        </Timeline>
+      </FlexItem>
+      <FlexItem>
+        <Timeline
+            gap="md"
+            orientation="vertical"
+        >
+          <Timeline.Item
+              icon="user"
+              iconColor="royal"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Conversation started"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="check"
+              iconColor="teal"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Trip #12422"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="credit-card"
+              iconColor="red"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Refund issue #12422"
+                {...props}
+            />
+          </Timeline.Item>
+        </Timeline>
+      </FlexItem>
+      <FlexItem>
+        <Timeline
+            gap="lg"
+            orientation="vertical"
+        >
+          <Timeline.Item
+              icon="user"
+              iconColor="royal"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Conversation started"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="check"
+              iconColor="teal"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Trip #12422"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="credit-card"
+              iconColor="red"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Refund issue #12422"
+                {...props}
+            />
+          </Timeline.Item>
+        </Timeline>
+      </FlexItem>
+    </Flex>
+  </div>
+)
+
+export default TimelineWithGap

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md

@@ -0,0 +1 @@
+Use the optional `gap` prop to render the timeline kit with adjusted spacing between nodes. The `gap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.

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

@@ -1,14 +1,16 @@
 examples:
-  
+
   rails:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
-  
-  
+  - timeline_with_gap: With Gap
+
+
   react:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
+  - timeline_with_gap: With Gap

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

@@ -2,3 +2,5 @@ export { default as TimelineDefault } from './_timeline_default.jsx'
 export { default as TimelineVertical } from './_timeline_vertical.jsx'
 export { default as TimelineWithDate } from './_timeline_with_date.jsx'
 export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
+export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
+

data/app/pb_kits/playbook/pb_timeline/timeline.rb

@@ -8,9 +8,15 @@ module Playbook
                          default: "horizontal"
       prop :show_date, type: Playbook::Props::Boolean,
                        default: false
+      prop :gap, type: Playbook::Props::Enum,
+                 values: %w[xs sm md lg none],
+                 default: "none"
 
       def classname
-        generate_classname("pb_timeline_kit", orientation, date_class)
+        generate_classname("pb_timeline_kit",
+                           orientation,
+                           date_class,
+                           gap_class)
       end
 
     private
@@ -18,6 +24,10 @@ module Playbook
       def date_class
         show_date ? "with_date" : nil
       end
+
+      def gap_class
+        gap == "none" ? nil : "gap_#{gap}"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_timeline/timeline.test.js

@@ -147,26 +147,26 @@ test('should pass id prop', () => {
 test('should have horizontal orientation by default', () => {
     render(<TimelineDefault />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit__horizontal')
+    expect(kit).toHaveClass('pb_timeline_kit_horizontal')
 })
 
 test('should pass vertical orientation', () => {
     const props = { orientation: 'vertical' }
     render(<TimelineDefault {...props} />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit__vertical')
+    expect(kit).toHaveClass('pb_timeline_kit_vertical')
 })
 
 test('should pass showDate prop', () => {
     const props = { showDate: true }
     render(<TimelineDefault {...props} />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
+    expect(kit).toHaveClass('pb_timeline_kit_horizontal__with_date')
 })
 
 test('should pass showDate prop with Children', () => {
     const props = { showDate: true }
     render(<TimelineWithChildren {...props} />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
+    expect(kit).toHaveClass('pb_timeline_kit_horizontal__with_date')
 })

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

@@ -2,6 +2,7 @@
 @import "../tokens/border_radius";
 @import "../tokens/spacing";
 @import "../tokens/shadows";
+@import "../tokens/positioning";
 
 [class^=pb_typeahead_kit] {
   .typeahead-kit-select__option {
@@ -99,6 +100,7 @@
     .typeahead-kit-select__menu {
       background-color: $bg_dark;
       color: $white;
+      z-index: $z_1;
     }
     .typeahead-kit-select__option:hover {
       background-color: $active_dark;
@@ -182,6 +184,7 @@
   }
  
   .typeahead-kit-select__menu {
+    z-index: $z_1;
     .typeahead-kit-select__menu-list {
       padding: 0;
     }

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

@@ -4,11 +4,12 @@ import { debounce } from 'lodash'
 export default class PbTypeahead extends PbEnhancedElement {
   _searchInput: HTMLInputElement
   _resultsElement: HTMLElement
-  _debouncedSearch: Function
+  _debouncedSearch: () => void
   _resultsLoadingIndicator: HTMLElement
   _resultOptionTemplate: HTMLElement
   _resultsOptionCache: Map<string, Array<DocumentFragment>>
   _searchContext: string
+  _validSelection: boolean
 
   static get selector() {
     return '[data-pb-typeahead-kit]'
@@ -86,6 +87,9 @@ export default class PbTypeahead extends PbEnhancedElement {
     const resultOption = (event.target as Element).closest('[data-result-option-item]')
     if (!resultOption) return
 
+    this._validSelection = true
+    this.removeValidationError()
+
     this.resultsCacheClear()
     this.searchInputClear()
     this.clearResults()
@@ -93,6 +97,28 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-result-option-selected', { bubbles: true, detail: { selected: resultOption, typeahead: this } }))
   }
 
+  removeValidationError() {
+    const inputWrapper = this.searchInput.closest('.text_input_wrapper')
+    if (inputWrapper) {
+      const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement
+      if (errorMessage) {
+        errorMessage.style.display = 'none'
+      }
+      this.searchInput.classList.remove('error')
+    }
+  }
+
+  showValidationError() {
+    const inputWrapper = this.searchInput.closest('.text_input_wrapper')
+    if (inputWrapper) {
+      const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement
+      if (errorMessage) {
+        errorMessage.style.display = 'block'
+      }
+      this.searchInput.classList.add('error')
+    }
+  }
+
   clearResults() {
     this.resultsElement.innerHTML = ''
   }
@@ -201,8 +227,8 @@ export default class PbTypeahead extends PbEnhancedElement {
   }
 
   toggleResultsLoadingIndicator(visible: boolean) {
-    var visibilityProperty = '0'
+    let visibilityProperty = '0'
     if (visible) visibilityProperty = '1'
     this.resultsLoadingIndicator.style.opacity = visibilityProperty
   }
-}
+}

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

@@ -17,11 +17,14 @@
       <%= pb_rails("text_input", props: {
         type: "search",
         input_options: object.input_options,
-        label: object.label,
         name: object.name,
         value: object.value,
         placeholder: object.placeholder,
         margin_bottom: "none",
+        required: object.required,
+        validation: object.validation,
+        label: object.label,
+        id: object.input_options[:id],
       }) %>
       <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
       <% end %>
@@ -33,4 +36,4 @@
       <% end %>
     </template>
   <% end %>
-<% end %>
+<% end %>

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

@@ -40,6 +40,10 @@ module Playbook
       prop :pill_color, type: Playbook::Props::Enum,
                         values: %w[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],
                         default: "primary"
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
+      prop :validation, type: Playbook::Props::HashProp,
+                        default: {}
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

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

@@ -0,0 +1,19 @@
+
+$height_auto: auto !default;
+$height_xs: 320px !default;
+$height_sm: 480px !default;
+$height_md: 768px !default;
+$height_lg: 1024px !default;
+$height_xl: 1280px !default;
+$height_2xl: 1440px !default;
+$height_3xl: 1920px !default;
+$heights: (
+  height_auto: $height_auto,
+  height_xs: $height_xs,
+  height_sm: $height_sm,
+  height_md: $height_md,
+  height_lg: $height_lg,
+  height_xl: $height_xl,
+  height_xxl: $height_2xl,
+  height_xxxl: $height_3xl
+);

data/app/pb_kits/playbook/tokens/exports/_height.module.scss

@@ -0,0 +1,37 @@
+@import "../height";
+
+:export {
+  @mixin export_height($height_list) {
+    @each $name, $value in $height_list {
+      .#{$name} {
+        height: $value;
+      }
+    }
+  }
+
+  @include export_height($heights);
+}
+
+:export {
+  @mixin export_max_height($height_list) {
+    @each $name, $value in $height_list {
+      .max_#{$name} {
+        max-height: $value;
+      }
+    }
+  }
+
+  @include export_max_height($heights);
+}
+
+:export {
+  @mixin export_min_height($height_list) {
+    @each $name, $value in $height_list {
+      .min_#{$name} {
+        min-height: $value;
+      }
+    }
+  }
+
+  @include export_min_height($heights);
+}

data/app/pb_kits/playbook/utilities/_height.scss

@@ -0,0 +1,33 @@
+@import "../tokens/exports/height.module";
+
+@mixin export_height($height_list) {
+  @each $name, $value in $height_list {
+    .#{$name} {
+      height: $value;
+    }
+  }
+}
+
+@mixin export_max_height($height_list) {
+  @each $name, $value in $height_list {
+    .max_#{$name} {
+      max-height: $value;
+    }
+  }
+}
+
+@mixin export_min_height($height_list) {
+  @each $name, $value in $height_list {
+    .min_#{$name} {
+      min-height: $value;
+    }
+  }
+}
+
+@include export_height($heights);
+@include export_max_height($heights);
+@include export_min_height($heights);
+
+.height-resize {
+  resize: vertical;
+}