playbook_ui 18.1.0 → 18.2.0.pre.alpha.PLAY3330requiredtypeaheadvalidationbug20501

data/app/pb_kits/playbook/pb_container/_container.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 type ContainerProps = {
   aria?: { [key: string]: string },
@@ -11,7 +12,7 @@ type ContainerProps = {
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) | ((event: any) => void) | any },
   tag?: "div" | "span" | "a" | "button" | "option" | "table" | "tbody" | "thead" | "tfoot" | "tr" | "td" | "th" | "img" | "section" | "article" | "main" | "header" | "footer" | "nav" | "aside"
   id?: string,
-} & GlobalProps
+} & GlobalProps & GlobalEventProps
 
 const Container = (props: ContainerProps): React.ReactElement => {
   const {
@@ -36,6 +37,7 @@ const Container = (props: ContainerProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_container/kit.schema.json

@@ -39,6 +39,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Container } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import Body from '../pb_body/_body'
@@ -28,7 +29,7 @@ type CurrencyProps = {
   unit?: string,
   unstyled?: boolean,
   commaSeparator?: boolean,
-}
+} & GlobalEventProps
 
 const sizes: {lg: 1, md: 3, sm: 4} = {
   lg: 1,
@@ -132,6 +133,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_currency/kit.schema.json

@@ -137,6 +137,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Currency } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Body from '../pb_body/_body'
 import StatChange from '../pb_stat_change/_stat_change'
@@ -23,7 +24,7 @@ type DashboardValueProps = {
     unit?: string,
     value?: string | number
   }
-}
+} & GlobalEventProps
 
 const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
   const {
@@ -52,6 +53,7 @@ const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_dashboard_value/kit.schema.json

@@ -43,6 +43,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DashboardValue } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -16,6 +16,10 @@
       display: block;
     }
 
+    .date_picker_input_container {
+      position: relative;
+    }
+    
     @import "./sass_partials/calendar_input_icon";
   }
 

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -297,19 +297,57 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
         )}
           <>
             <div className="date_picker_input_wrapper">
-              <input
-                  aria-describedby={errorId}
-                  aria-invalid={!!error}
-                  autoComplete="off"
-                  className="date_picker_input"
-                  disabled={disableInput}
-                  id={pickerId}
-                  name={name}
-                  onChange={inputOnChange}
-                  placeholder={placeholder}
-                  style={{ cursor: getCursorStyle(filteredProps.cursor) }}
-                  value={inputValue}
-              />
+              <div className="date_picker_input_container">
+                <input
+                    aria-describedby={errorId}
+                    aria-invalid={!!error}
+                    autoComplete="off"
+                    className="date_picker_input"
+                    disabled={disableInput}
+                    id={pickerId}
+                    name={name}
+                    onChange={inputOnChange}
+                    placeholder={placeholder}
+                    style={{ cursor: getCursorStyle(filteredProps.cursor) }}
+                    value={inputValue}
+                />
+
+                {!hideIcon && !inLine &&
+                  <div
+                      className={iconWrapperClass()}
+                      id={`cal-icon-${pickerId}`}
+                  >
+                    <Icon
+                        className="cal_icon"
+                        icon="calendar-alt"
+                    />
+                  </div>
+                }
+
+                {inLine ?
+                  <div>
+                    <div
+                        className={`${iconWrapperClass()} date-picker-inline-icon-plus`}
+                        id={`${pickerId}-icon-plus`}
+                    >
+                      <Icon
+                          className="date-picker-plus-icon"
+                          icon="plus"
+                      />
+                    </div>
+                    <div
+                        className={`${iconWrapperClass()} date-picker-inline-angle-down`}
+                        id={`${pickerId}-angle-down`}
+                    >
+                      <Icon
+                          className="angle_down_icon svg-inline--fa"
+                          customIcon={angleDown}
+                      />
+                    </div>
+                  </div>
+                  : null
+                }
+              </div>
 
               {error &&
                   <Body
@@ -322,42 +360,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
                   />
               }
             </div>
-
-            {!hideIcon && !inLine &&
-              <div
-                  className={iconWrapperClass()}
-                  id={`cal-icon-${pickerId}`}
-              >
-                <Icon
-                    className="cal_icon"
-                    icon="calendar-alt"
-                />
-              </div>
-            }
-
-            {inLine ?
-              <div>
-                <div
-                    className={`${iconWrapperClass()} date-picker-inline-icon-plus`}
-                    id={`${pickerId}-icon-plus`}
-                >
-                  <Icon
-                      className="date-picker-plus-icon"
-                      icon="plus"
-                  />
-                </div>
-                <div
-                    className={`${iconWrapperClass()} date-picker-inline-angle-down`}
-                    id={`${pickerId}-angle-down`}
-                >
-                  <Icon
-                      className="angle_down_icon svg-inline--fa"
-                      customIcon={angleDown}
-                  />
-                </div>
-              </div>
-              : null
-            }
           </>
       </div>
     </div>

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -18,66 +18,66 @@
         <% end %>
       </label>
     <% end %>
-    <% if content.present? %>
-      <%= content %>
-    <% else %>
-    <%= pb_rails("text_input", props: {
-      aria: object.input_aria,
-      autocomplete: false,
-      cursor: object.cursor,
-      dark: object.dark,
-      data: object.input_data,
-      disabled: object.disable_input,
-      error: object.error,
-      id: object.picker_id,
-      margin_bottom: "none",
-      name: object.name,
-      placeholder: object.placeholder,
-      required: object.required,
-      validation: object.validation_message.present? ? { message: object.validation_message } : {},
-    }) %>
-    <% end %>
+    <div class="date_picker_input_container">
+      <% if content.present? %>
+        <%= content %>
+      <% else %>
+        <%= pb_rails("text_input", props: {
+          aria: object.input_aria,
+          autocomplete: false,
+          cursor: object.cursor,
+          dark: object.dark,
+          data: object.input_data,
+          disabled: object.disable_input,
+          error: object.error,
+          id: object.picker_id,
+          margin_bottom: "none",
+          name: object.name,
+          placeholder: object.placeholder,
+          required: object.required,
+          validation: object.validation_message.present? ? { message: object.validation_message } : {},
+        }) %>
+      <% end %>
+      <% if !object.hide_icon && !object.inline %>
+        <div
+          class="<%= object.icon_wrapper_class %>"
+          id="cal-icon-<%= object.picker_id %>"
+        >
+          <%= pb_rails("icon", props: {
+            classname: "cal_icon",
+            icon: "calendar-alt"
+          }) %>
+        </div>
+      <% end %>
+       <!-- Inline -->
+      <% if object.inline %>
+        <!-- Plus Icon -->
+        <div
+            class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"
+            id="<%= object.picker_id %>-icon-plus"
+        >
+          <%= pb_rails("icon", props: {
+            classname: "plus-icon",
+            icon: "plus"
+          }) %>
+        </div>
+
+        <!-- Angle Down Icon -->
+        <div
+            class="<%= object.icon_wrapper_class %> date-picker-inline-angle-down"
+            id="<%= object.picker_id %>-angle-down"
+        >
+          <%= pb_rails("icon", props: {
+            classname: "angle_down_icon",
+            custom_icon: Playbook::Engine::root.join(angle_down_path)
+          }) %>
+        </div>
+      <% end %>
+    </div>
     <% if object.selection_type == "quickpick" %>
       <input type="hidden" id="<%= "#{object.start_date_id}" %>" name="<%= "#{object.start_date_name}" %>">
       <input type="hidden" id="<%= "#{object.end_date_id}" %>" name="<%= "#{object.end_date_name}" %>">
     <% end %>
-
-    <% if !object.hide_icon && !object.inline %>
-      <div
-          class="<%= object.icon_wrapper_class %>"
-          id="cal-icon-<%= object.picker_id %>"
-      >
-        <%= pb_rails("icon", props: {
-          classname: "cal_icon",
-          icon: "calendar-alt"
-        }) %>
-      </div>
-    <% end %>
-
-    <!-- Inline -->
-    <% if object.inline %>
-      <!-- Plus Icon -->
-      <div
-          class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"
-          id="<%= object.picker_id %>-icon-plus"
-      >
-        <%= pb_rails("icon", props: {
-          classname: "plus-icon",
-          icon: "plus"
-        }) %>
-      </div>
-
-      <!-- Angle Down Icon -->
-      <div
-          class="<%= object.icon_wrapper_class %> date-picker-inline-angle-down"
-          id="<%= object.picker_id %>-angle-down"
-      >
-        <%= pb_rails("icon", props: {
-          classname: "angle_down_icon",
-          custom_icon: Playbook::Engine::root.join(angle_down_path)
-        }) %>
-      </div>
-    <% end %>
   </div>
 
   <%= javascript_tag do %>

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss

@@ -3,7 +3,7 @@
 .cal_icon_wrapper {
   pointer-events: none;
   position: absolute;
-  top: $space_md + 2;
+  top: 0;
   right: 0;
   border-left: 1px solid $input_border_default;
   width: $space_xl + $space_xs;

data/app/pb_kits/playbook/pb_detail/_detail.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalEventProps, GlobalEventProps } from '../utilities/globalEventProps'
 
 type DetailProps = {
   aria?: { [key: string]: string },
@@ -15,7 +16,7 @@ type DetailProps = {
   id?: string,
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
-} & GlobalProps
+} & GlobalProps & GlobalEventProps
 
 const Detail = (props: DetailProps): React.ReactElement => {
   const {
@@ -48,6 +49,7 @@ const Detail = (props: DetailProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_detail/kit.schema.json

@@ -65,6 +65,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Detail } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -106,6 +106,22 @@
         }
       }
 
+      // Let Rails autocomplete use the trigger space left by its action icons.
+      > :has([data-dropdown-autocomplete]) {
+        flex: 1;
+        min-width: 0;
+
+        .pb_flex_kit:has([data-dropdown-autocomplete]) {
+          min-width: 0;
+          width: 100%;
+        }
+
+        [data-dropdown-autocomplete] {
+          min-width: 0;
+          width: 100%;
+        }
+      }
+
       .dropdown_input:disabled {
         background-color: $input_background_disabled;
         color: $input_text_disabled;