playbook_ui 15.6.0.pre.alpha.play265012993 → 15.6.0.pre.rc.0

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -29,7 +29,6 @@ type SelectProps = {
   id?: string,
   includeBlank?: string,
   inline?: boolean,
-  inputOptions?: {[key: string]: string | number | boolean | (() => void)},
   label?: string,
   margin: string,
   marginBottom: string,
@@ -64,7 +63,6 @@ const Select = ({
   label,
   htmlOptions = {},
   inline = false,
-  inputOptions = {},
   multiple = false,
   name,
   onChange = () => undefined,
@@ -96,17 +94,14 @@ const Select = ({
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
-  const selectId = (inputOptions?.id as string) || name
-
   const selectBody =(() =>{
     if (children) return children
     return (
       <select
           {...htmlOptions}
           {...domSafeProps(props)}
-          {...inputOptions}
           disabled={disabled}
-          id={selectId}
+          id={name}
           multiple={multiple}
           name={name}
           onChange={onChange}
@@ -130,7 +125,7 @@ const Select = ({
       {label &&
         <label
             className="pb_select_kit_label"
-            htmlFor={selectId}
+            htmlFor={name}
         >
           <Caption 
               dark={props.dark}
@@ -140,7 +135,7 @@ const Select = ({
       }
       <label
           className={selectWrapperClass}
-          htmlFor={selectId}
+          htmlFor={name}
       >
         {selectBody}
         { multiple !== true ?

data/app/pb_kits/playbook/pb_select/docs/_select_error.md

@@ -1 +1 @@
-Select w/ Error shows that an option must be selected or is invalid (i.e. when used in a form it signals a user to fix an error).
+Select w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

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

@@ -15,7 +15,6 @@ examples:
   - select_inline_compact: Select Inline Compact
   - select_attributes: Select W/ Attributes
   - select_multiple: Select Multiple
-  - select_input_options: Input Options
 
 
 
@@ -34,7 +33,6 @@ examples:
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
   - select_react_hook: React Hook
-  - select_input_options: Input Options
 
   swift:
   - select_default_swift: Default

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

@@ -12,4 +12,3 @@ export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'
 export { default as SelectReactHook } from './_select_react_hook.jsx'
 export { default as SelectCustomSelectSubheaders } from './_select_custom_select_subheaders.jsx'
-export { default as SelectInputOptions } from './_select_input_options.jsx'

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -2,11 +2,11 @@
   id: nil,
   class: object.classnames ) do %>
   <% if object.label %>
-    <label class="pb_select_kit_label" for="<%= object.input_options[:id] || object.name %>">
+    <label class="pb_select_kit_label" for="<%= object.name %>">
       <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     </label>
   <% end %>
-  <label class="<%= object.select_wrapper_class %>" for="<%= object.input_options[:id] || object.name %>">
+  <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
     <% if content.present? %>
       <%= content %>
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -14,8 +14,6 @@ module Playbook
       prop :error
       prop :include_blank
       prop :inline, type: Playbook::Props::Boolean, default: false
-      prop :input_options, type: Playbook::Props::HashProp,
-                           default: {}
       prop :label
       prop :multiple, type: Playbook::Props::Boolean, default: false
       prop :name
@@ -40,7 +38,7 @@ module Playbook
           multiple: multiple,
           onchange: onchange,
           include_blank: include_blank,
-        }.merge(attributes).merge(input_options)
+        }.merge(attributes)
       end
 
       def classname

data/app/pb_kits/playbook/pb_select/select.test.js

@@ -65,27 +65,4 @@ test('returns multiple variant', () => {
   const selectElement = kit.querySelector('select');
 
   expect(selectElement).toHaveAttribute('multiple', '');
-});
-
-test('inputOptions are passed to select element', () => {
-  render(
-    <Select
-        data={{ testid: testId }}
-        inputOptions={{
-          id: 'custom-select-id',
-          className: 'custom-select-class',
-          'aria-label': 'Custom aria label',
-        }}
-        label="Favorite Food"
-        name="food"
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const selectElement = kit.querySelector('select')
-
-  expect(selectElement).toHaveAttribute('id', 'custom-select-id')
-  expect(selectElement).toHaveClass('custom-select-class')
-  expect(selectElement).toHaveAttribute('aria-label', 'Custom aria label')
 });

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md

@@ -1 +1 @@
-Text Input w/ Error shows that the input must be filled out (i.e. when used in a form it signals a user to fix an error).
+Text Input w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md

@@ -1 +1 @@
-Textarea w/ Error shows that the input must be filled out (i.e. when used in a form it signals a user to fix an error).
+Textarea w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -276,18 +276,3 @@ test('multi-value badges have tabIndex and focus class when focused', () => {
   })
 })
 
-test('input display none shows number of selected items', () => {
-  render(
-    <Typeahead
-        data={{ testid: 'input-display-none-test' }}
-        defaultValue={[options[0], options[1]]}
-        inputDisplay="none"
-        isMulti
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId('input-display-none-test')
-  const inputDisplayDiv = kit.querySelector(".pb_typeahead_selection_count")
-  expect(inputDisplayDiv).toHaveTextContent("2 items selected") 
-})

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

@@ -43,7 +43,6 @@ type TypeaheadProps = {
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  inputDisplay?: "pills" | "none",
   label?: string,
   loadOptions?: string | Noop,
   getOptionLabel?: string | (() => string),
@@ -90,7 +89,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   getOptionValue,
   htmlOptions = {},
   id,
-  inputDisplay = "pills",
   name,
   loadOptions = noop,
   marginBottom = "sm",
@@ -240,7 +238,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     getOptionValue: isString(getOptionValue) ? get(window, getOptionValue) : getOptionValue,
     defaultOptions: true,
     id: id || uniqueId(),
-    inputDisplay: inputDisplay,
     inline: false,
     isClearable: true,
     isSearchable: true,

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx

@@ -7,29 +7,18 @@ type ClearContainerProps = {
     id: string,
   },
   clearValue: () => void,
-  innerProps?: any,
 }
 
-const ClearContainer = (props: ClearContainerProps | any): React.ReactElement => {
-  const { selectProps, clearValue, innerProps } = props
+const ClearContainer = (props: ClearContainerProps): React.ReactElement => {
+  const { selectProps, clearValue } = props
   useEffect(() => {
     document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
   }, [clearValue, selectProps.id])
 
-  // To stop this from bubbling up when inside a dialog or other modal
-  const handleMouseDown = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    innerProps?.onMouseDown?.(event)
-  }
-
   return (
     <components.ClearIndicator
         className="clear_indicator"
         {...props}
-        innerProps={{
-          ...innerProps,
-          onMouseDown: handleMouseDown,
-        }}
     />
   )
 }

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -19,12 +19,7 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps, isFocused } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor, truncate, wrapped, inputDisplay } = props.selectProps
-
-  // If inputDisplay is "none", don't render the pill/badge, just return null (the count handled in ValueContainer file)
-  if (inputDisplay === 'none') {
-    return null
-  }
+  const { dark, multiKit, pillColor, truncate, wrapped } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',

data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx

@@ -1,42 +1,15 @@
 import React from 'react'
 import { components } from 'react-select'
-import Body from '../../pb_body/_body'
 
 type ValueContainerProps = {
-  children: React.ReactNode | React.ReactNode[],
-  selectProps?: Record<string, unknown>,
-  hasValue?: boolean,
+  children: React.ReactNode,
 }
 
-const ValueContainer = (props: ValueContainerProps | any): React.ReactElement => {
-  const { children, selectProps, hasValue } = props
-  const inputDisplay = (selectProps as any)?.inputDisplay
-  const value = (selectProps as any)?.value
-
-  // When inputDisplay is "none" and there are selected values, show count text (this is for multi-select only)
-  if (inputDisplay === 'none' && hasValue && value) {
-    const selectedCount = Array.isArray(value) ? value.length : 0
-    
-    return (
-      <components.ValueContainer 
-          className="text_input_value_container"
-          {...props}
-      >
-        <Body
-            className="pb_typeahead_selection_count"
-            text={`${selectedCount} item${selectedCount !== 1 ? 's' : ''} selected`}
-        />
-        {children}
-      </components.ValueContainer>
-    )
-  }
-
-  return (
-    <components.ValueContainer 
-        className="text_input_value_container"
-        {...props}
-    />
-  )
-}
+const ValueContainer = (props: ValueContainerProps): React.ReactElement => (
+  <components.ValueContainer
+      className="text_input_value_container"
+      {...props}
+  />
+)
 
 export default ValueContainer

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

@@ -5,7 +5,6 @@ examples:
     - typeahead_default_options: With Default Options
     - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
-    - typeahead_input_display: Input Display
     - typeahead_without_pills: Without Pills (Single Select)
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
@@ -27,7 +26,6 @@ examples:
     - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills
-    - typeahead_input_display: Input Display
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)

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

@@ -17,5 +17,4 @@ export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
 export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
 export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
 export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
-export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
-export { default as TypeaheadInputDisplay } from './_typeahead_input_display.jsx'
+export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'

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

@@ -25,10 +25,6 @@ module Playbook
       prop :is_multi, type: Playbook::Props::Boolean,
                       default: true
 
-      prop :input_display, type: Playbook::Props::Enum,
-                           values: %w[none pills],
-                           default: "pills"
-
       prop :pills, type: Playbook::Props::Boolean,
                    default: false
 
@@ -82,7 +78,7 @@ module Playbook
       end
 
       def is_react?
-        pills || !is_multi || wrapped || input_display == "none"
+        pills || !is_multi || wrapped
       end
 
       def typeahead_react_options
@@ -95,7 +91,6 @@ module Playbook
           id: id,
           inline: inline,
           isMulti: is_multi,
-          inputDisplay: input_display,
           label: label,
           marginBottom: margin_bottom,
           multiKit: multi_kit,

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

@@ -139,8 +139,7 @@ $text_colors: (
   text_lt_lighter:    $text_lt_lighter,
   text_dk_default:    $text_dk_default,
   text_dk_light:      $text_dk_light,
-  text_dk_lighter:    $text_dk_lighter,
-  text_dk_success_sm:  $text_dk_success_sm
+  text_dk_lighter:    $text_dk_lighter
 );
 
 /* Data colors ------------------------*/