playbook_ui 14.9.0.pre.alpha.play17004992 → 14.9.0.pre.rc.0

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

@@ -49,11 +49,10 @@
   }
 
   &.dark {
-    @include title_dark;
-    @each $name, $color in $pb_dark_title_colors {
-      &[class*="_#{$name}"] {
-        color: $color;
-      }
-    }
+    @include pb_title_dark; 
+  }
+
+  &.dark[class*=_link] { 
+    @include pb_title_dark_link; 
   }
 }

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

@@ -9,15 +9,6 @@ $pb_title_colors: (
   link: $primary
 );
 
-$pb_dark_title_colors: (
-  default: $text_dk_default,
-  light: $text_dk_light,
-  lighter: $text_dk_lighter,
-  success: $success,
-  error: $error_dark,
-  link: $active_dark
-);
-
 @mixin title_colors {
   @each $name, $color in $pb_title_colors {
     &[class*=_#{$name}] {
@@ -25,7 +16,3 @@ $pb_dark_title_colors: (
     }
   }
 }
-
-@mixin title_dark {
-  color: $text_dk_default;
-}

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

@@ -2,7 +2,6 @@
 @import "../tokens/border_radius";
 @import "../tokens/spacing";
 @import "../tokens/shadows";
-@import "../tokens/positioning";
 
 [class^=pb_typeahead_kit] {
   .typeahead-kit-select__option {
@@ -100,7 +99,6 @@
     .typeahead-kit-select__menu {
       background-color: $bg_dark;
       color: $white;
-      z-index: $z_1;
     }
     .typeahead-kit-select__option:hover {
       background-color: $active_dark;
@@ -184,7 +182,6 @@
   }
  
   .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,12 +4,11 @@ import { debounce } from 'lodash'
 export default class PbTypeahead extends PbEnhancedElement {
   _searchInput: HTMLInputElement
   _resultsElement: HTMLElement
-  _debouncedSearch: () => void
+  _debouncedSearch: Function
   _resultsLoadingIndicator: HTMLElement
   _resultOptionTemplate: HTMLElement
   _resultsOptionCache: Map<string, Array<DocumentFragment>>
   _searchContext: string
-  _validSelection: boolean
 
   static get selector() {
     return '[data-pb-typeahead-kit]'
@@ -87,9 +86,6 @@ 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()
@@ -97,28 +93,6 @@ 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 = ''
   }
@@ -227,8 +201,8 @@ export default class PbTypeahead extends PbEnhancedElement {
   }
 
   toggleResultsLoadingIndicator(visible: boolean) {
-    let visibilityProperty = '0'
+    var visibilityProperty = '0'
     if (visible) visibilityProperty = '1'
     this.resultsLoadingIndicator.style.opacity = visibilityProperty
   }
-}
+}

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

@@ -17,14 +17,11 @@
       <%= 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 %>
@@ -36,4 +33,4 @@
       <% end %>
     </template>
   <% end %>
-<% end %>
+<% end %>

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

@@ -40,10 +40,6 @@ 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/_titles.scss

@@ -33,6 +33,14 @@
   @include pb_title($heading_4, $bolder, $letterSpacing: $lspace_normal);
 }
 
+@mixin pb_title_dark {
+    color: $text_dk_default;
+} 
+
+@mixin pb_title_dark_link {
+    color: $active_dark;
+}
+
 @mixin pb_title_bold {
   font-weight: $bolder;
 }

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

@@ -20,13 +20,6 @@
   }
 }
 
-@mixin hover-underline {
-  .hover_underline:hover {
-    text-decoration: underline;
-    transition: text-decoration $transition-speed ease;
-  }
-}
-
 @mixin hover-color-classes($colors-list) {
     @each $name, $color in $colors-list {
       .hover_background-#{"" + $name}:hover {
@@ -39,9 +32,7 @@
       }
     }
   }
-
-
-  @include hover-underline;
+  
   @include hover-scale-classes($scales);
   @include hover-shadow-classes($box_shadows);
   @include hover-color-classes($product_colors);
@@ -73,4 +64,4 @@
   .group_hover.hover_visibility {
     opacity: 1;
   }
-}
+}

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

@@ -1,49 +1,29 @@
-@import "../tokens/container";
-
+.max_width_xs {
+  max-width: 360px;
+}
 .max_width_0 {
-  max-width: map-get($containers, 'none');
+  max-width: 0;
 }
-
 .max_width_none {
   max-width: none;
 }
 
-.max_width_0_percent {
-  max-width: $container_0;
-}
-
-.max_width_xxs {
-  max-width: $container_xxs;
-}
-
-.max_width_xs {
-  max-width: $container_xs;
-}
-
 .max_width_sm {
-  max-width: $container_sm;
+  max-width: 540px;
 }
 
 .max_width_md {
-  max-width: $container_md;
+  max-width: 720px;
 }
 
 .max_width_lg {
-  max-width: $container_lg;
+  max-width: 960px;
 }
 
 .max_width_xl {
-  max-width: $container_xl;
+  max-width: 1140px;
 }
 
 .max_width_xxl {
-  max-width: $container_xxl;
-}
-
-.max_width_100_percent {
-  max-width: $container_100;
-}
-
-.width-resize {
-  resize: horizontal;
+  max-width: 1320px;
 }

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

@@ -4,11 +4,7 @@
   min-width: map-get($containers, 'none');
 }
 
-.min_width_none {
-  min-width: none;
-}
-
-.min_width_0_percent {
+.min_with_0_percent {
   min-width: $container_0;
 }
 
@@ -44,6 +40,6 @@
   min-width: $container_100;
 }
 
-.width-resize {
+.minwidth-resize {
   resize: horizontal;
 }

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

@@ -7,6 +7,7 @@ export default [
   "right",
   "top",
   "hover",
+  "groupHover",
   "zIndex",
   "verticalAlign",
   "truncate",
@@ -29,7 +30,6 @@ export default [
   "numberSpacing",
   "maxWidth",
   "minWidth",
-  "width",
   "marginRight",
   "marginLeft",
   "marginTop",

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

@@ -64,7 +64,6 @@ type Hover = Shadow & {
   background?: string,
   color?: string,
   scale?: "sm" | "md" | "lg",
-  underline?: boolean,
   visibility?: boolean,
 }
 
@@ -96,16 +95,12 @@ type Margin = {
   default?: string
 }
 
-type Width = {
-  width?: string
-}
-
 type MaxWidth = {
-  maxWidth?: string,
+  maxWidth?: Sizes,
 }
 
 type MinWidth = {
-  minWidth?: string,
+  minWidth?: Sizes,
 }
 
 type NumberSpacing = {
@@ -181,7 +176,7 @@ type ZIndex = {
 } | ZIndexResponsiveType
 
 type Height = {
-  height?: string
+  height?: string 
 }
 
 type MaxHeight = {
@@ -196,7 +191,7 @@ type MinHeight = {
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
-  LineHeight & Margin & Width & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
+  LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
   Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
@@ -237,7 +232,6 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       if (!hover) return css;
       css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
       css += hover.background ? `hover_background-${hover.background } ` : '';
-      css += hover.underline ? `hover_underline ` : '';
       css += hover.scale ? `hover_scale_${hover.scale} ` : '';
       css += hover.color ? `hover_color-${hover.color } ` : '';
       css += hover.visibility ? `hover_visibility` : '';
@@ -357,11 +351,6 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += numberSpacing ? `ns_${numberSpacing} ` : ''
     return css
   },
-  widthProps: ({ width }: Width) => {
-    let css = ''
-    css += width ? `width_${filterClassName(width)} ` : ''
-    return css.trimEnd()
-  },
   minWidthProps: ({ minWidth }: MinWidth) => {
     let css = ''
     css += minWidth ? `min_width_${filterClassName(minWidth)} ` : ''
@@ -372,30 +361,6 @@ 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

@@ -57,19 +57,6 @@ test('Hover Props: returns proper class name', () => {
   expectedClassName = `hover_scale_xl`;
   expect(kit).toHaveClass(expectedClassName);
 
-  const testIdUnderline = `${testSubject}-hover-underline`;
-  render(
-    <Body
-        data={{ testid: testIdUnderline }}
-        hover={{ underline: true }}
-        text="Hi"
-    />
-  );
-
-  kit = screen.getByTestId(testIdUnderline);
-  expectedClassName = `hover_underline`;
-  expect(kit).toHaveClass(expectedClassName);
-
   const testIdMultiple = `${testSubject}-hover-multiple`;
   render(
     <Body
@@ -79,7 +66,6 @@ test('Hover Props: returns proper class name', () => {
         background: 'error',
         shadow: 'deeper',
         scale: 'xl',
-        underline: true,
       }}
         text="Hi"
     />
@@ -90,5 +76,4 @@ test('Hover Props: returns proper class name', () => {
   expect(kit).toHaveClass('hover_background-error');
   expect(kit).toHaveClass('hover_shadow_deeper');
   expect(kit).toHaveClass('hover_scale_xl');
-  expect(kit).toHaveClass('hover_underline');
 });