playbook_ui 14.7.0.pre.alpha.dependabotnpmandyarnintltelinput24704448 → 14.7.0.pre.alpha.revert3916revert3893PBNTR667railstypeaheadformintegration4523

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/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/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;
   },
 

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