playbook_ui 14.7.0 → 14.8.0.pre.alpha.PLAY1598floatinguiupgrade4617

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;
+}

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

@@ -21,34 +21,47 @@
 }
 
 @mixin hover-color-classes($colors-list) {
-  @each $name, $color in $colors-list {
-    .hover_background_#{"" + $name}:hover,
-    .group_hover:hover .group_hover.hover_background_#{"" + $name} {
-      background-color: $color !important;
-      transition: background-color $transition-speed ease;
-    }
-    .hover_color_#{"" + $name}:hover,
-    .group_hover:hover .group_hover.hover_color_#{"" + $name} {
-      color: $color !important;
-      transition: color $transition-speed ease;
+    @each $name, $color in $colors-list {
+      .hover_background-#{"" + $name}:hover {
+        background-color: $color !important;
+        transition: background-color $transition-speed ease;
+      }
+      .hover_color-#{"" + $name}:hover {
+        color: $color !important;
+        transition: color $transition-speed ease;
+      }
     }
   }
+  
+  @include hover-scale-classes($scales);
+  @include hover-shadow-classes($box_shadows);
+  @include hover-color-classes($product_colors);
+  @include hover-color-classes($status_colors);
+  @include hover-color-classes($data_colors);
+  @include hover-color-classes($shadow_colors);
+  @include hover-color-classes($colors);
+  @include hover-color-classes($interface_colors);
+  @include hover-color-classes($main_colors);
+  @include hover-color-classes($background_colors);
+  @include hover-color-classes($card_colors);
+  @include hover-color-classes($active_colors);
+  @include hover-color-classes($action_colors);
+  @include hover-color-classes($hover_colors);
+  @include hover-color-classes($border_colors);
+  @include hover-color-classes($text_colors);
+  @include hover-color-classes($category_colors);
+
+.hover_visibility {
+  opacity: 0;
+  transition: opacity $transition-speed ease;
+
+  &:hover {
+    opacity: 1;
+  }
 }
 
-@include hover-scale-classes($scales);
-@include hover-shadow-classes($box_shadows);
-@include hover-color-classes($product_colors);
-@include hover-color-classes($status_colors);
-@include hover-color-classes($data_colors);
-@include hover-color-classes($shadow_colors);
-@include hover-color-classes($colors);
-@include hover-color-classes($interface_colors);
-@include hover-color-classes($main_colors);
-@include hover-color-classes($background_colors);
-@include hover-color-classes($card_colors);
-@include hover-color-classes($active_colors);
-@include hover-color-classes($action_colors);
-@include hover-color-classes($hover_colors);
-@include hover-color-classes($border_colors);
-@include hover-color-classes($text_colors);
-@include hover-color-classes($category_colors);
+.group_hover:hover {
+  .group_hover.hover_visibility {
+    opacity: 1;
+  }
+}

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

@@ -27,3 +27,7 @@
 .max_width_xxl {
   max-width: 1320px;
 }
+
+.width-resize {
+  resize: horizontal;
+}

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

@@ -40,6 +40,6 @@
   min-width: $container_100;
 }
 
-.minwidth-resize {
+.width-resize {
   resize: horizontal;
 }

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -7,7 +7,6 @@ export default [
   "right",
   "top",
   "hover",
-  "groupHover",
   "zIndex",
   "verticalAlign",
   "truncate",

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -63,7 +63,8 @@ type FlexWrap = {
 type Hover = Shadow & {
   background?: string,
   color?: string,
-  scale?: "sm" | "md" | "lg"
+  scale?: "sm" | "md" | "lg",
+  visibility?: boolean,
 }
 
 type GroupHover  = {
@@ -230,9 +231,10 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       let css = '';
       if (!hover) return css;
       css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
-      css += hover.background ? `hover_background_${hover.background } ` : '';
+      css += hover.background ? `hover_background-${hover.background } ` : '';
       css += hover.scale ? `hover_scale_${hover.scale} ` : '';
-      css += hover.color ? `hover_color_${hover.color } ` : '';
+      css += hover.color ? `hover_color-${hover.color } ` : '';
+      css += hover.visibility ? `hover_visibility` : '';
       return css;
   },
 
@@ -359,6 +361,30 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += maxWidth ? `max_width_${filterClassName(maxWidth)} ` : ''
     return css.trimEnd()
   },
+  minHeightProps: ({ minHeight }: MinHeight) => {
+    const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
+    if (heightValues.includes(minHeight)) {
+      let css = ''
+      css += minHeight ? `min_height_${filterClassName(minHeight)} ` : ''
+      return css.trimEnd()
+    }
+  },
+  maxHeightProps: ({ maxHeight }: MaxHeight) => {
+    const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
+    if (heightValues.includes(maxHeight)) {
+      let css = ''
+      css += maxHeight ? `max_height_${filterClassName(maxHeight)} ` : ''
+      return css.trimEnd()
+    }
+  },
+  heightProps: ({ height }: Height) => {
+    const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
+    if (heightValues.includes(height)) {
+      let css = ''
+      css += height ? `height_${filterClassName(height)} ` : ''
+      return css.trimEnd()
+    }
+  },
   zIndexProps: (zIndex: ZIndex) => {
     let css = ''
     Object.entries(zIndex).forEach((zIndexEntry) => {

data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { render, screen } from '../../test-utils';
+import Body from '../../../pb_body/_body';
+
+const testSubject = 'body';
+
+test('Hover Props: returns proper class name', () => {
+  const testIdColor = `${testSubject}-hover-color-red`;
+  render(
+    <Body
+        data={{ testid: testIdColor }}
+        hover={{ color: 'red' }}
+        text="Hi"
+    />
+  );
+
+  let kit = screen.getByTestId(testIdColor);
+  let expectedClassName = `hover_color-red`;
+  expect(kit).toHaveClass(expectedClassName);
+
+  const testIdBackground = `${testSubject}-hover-background-blue`;
+  render(
+    <Body
+        data={{ testid: testIdBackground }}
+        hover={{ background: 'blue' }}
+        text="Hi"
+    />
+  );
+
+  kit = screen.getByTestId(testIdBackground);
+  expectedClassName = `hover_background-blue`;
+  expect(kit).toHaveClass(expectedClassName);
+
+  const testIdShadow = `${testSubject}-hover-shadow-deep`;
+  render(
+    <Body
+        data={{ testid: testIdShadow }}
+        hover={{ shadow: 'deep' }}
+        text="Hi"
+    />
+  );
+
+  kit = screen.getByTestId(testIdShadow);
+  expectedClassName = `hover_shadow_deep`;
+  expect(kit).toHaveClass(expectedClassName);
+
+  const testIdScale = `${testSubject}-hover-scale`;
+  render(
+    <Body
+        data={{ testid: testIdScale }}
+        hover={{ scale: 'xl' }}
+        text="Test"
+    />
+  );
+
+  kit = screen.getByTestId(testIdScale);
+  expectedClassName = `hover_scale_xl`;
+  expect(kit).toHaveClass(expectedClassName);
+
+  const testIdMultiple = `${testSubject}-hover-multiple`;
+  render(
+    <Body
+        data={{ testid: testIdMultiple }}
+        hover={{
+        color: 'green',
+        background: 'error',
+        shadow: 'deeper',
+        scale: 'xl',
+      }}
+        text="Hi"
+    />
+  );
+
+  kit = screen.getByTestId(testIdMultiple);
+  expect(kit).toHaveClass('hover_color-green');
+  expect(kit).toHaveClass('hover_background-error');
+  expect(kit).toHaveClass('hover_shadow_deeper');
+  expect(kit).toHaveClass('hover_scale_xl');
+});