playbook_ui 15.6.0.pre.alpha.play266013023 → 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_timeline/_item.tsx

@@ -18,7 +18,6 @@ type ItemProps = {
   icon?: string,
   iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
   lineStyle?: 'solid' | 'dotted',
-  showCurrentYear?: boolean,
 } & GlobalProps
 
 function isElementOfType<P>(
@@ -36,7 +35,6 @@ const TimelineItem = ({
   icon = 'user',
   iconColor = 'default',
   lineStyle = 'solid',
-  showCurrentYear = false,
   ...props
 }: ItemProps): React.ReactElement => {
   const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
@@ -75,7 +73,6 @@ const TimelineItem = ({
               <DateStacked
                   align="center"
                   date={date}
-                  showCurrentYear={showCurrentYear}
                   size="sm"
               />
             )}

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md

@@ -1 +1 @@
-Use the optional `showDate` prop to render the timeline kit with a visible date. By default, if the date is from the current year, the year will not be displayed; however, if the date is NOT from the current year, the kit will display the year as well.
+Use the optional `showDate` prop to render the timeline kit with a visible date. If the date is from the current year, the year will not be displayed, however if date is NOT from the current year, the kit will display the year as well.

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

@@ -5,7 +5,6 @@ examples:
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
-  - timeline_show_current_year: Show Current Year
   - timeline_with_gap: With Gap
 
 
@@ -14,5 +13,4 @@ examples:
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
-  - timeline_show_current_year: Show Current Year
   - timeline_with_gap: With Gap

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

@@ -3,5 +3,4 @@ export { default as TimelineVertical } from './_timeline_vertical.jsx'
 export { default as TimelineWithDate } from './_timeline_with_date.jsx'
 export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
 export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
-export { default as TimelineShowCurrentYear } from './_timeline_show_current_year.jsx'
 

data/app/pb_kits/playbook/pb_timeline/item.html.erb

@@ -2,7 +2,7 @@
   <% if label %>
     <%= label %>
   <% else %>
-    <%= pb_rails("timeline/label", props: { date: date, show_current_year: show_current_year }) %>
+    <%= pb_rails("timeline/label", props: { date: date }) %>
   <% end %>
 
   <% if step %>

data/app/pb_kits/playbook/pb_timeline/item.rb

@@ -12,8 +12,6 @@ module Playbook
       prop :line_style, type: Playbook::Props::Enum,
                         values: %w[solid dotted],
                         default: "solid"
-      prop :show_current_year, type: Playbook::Props::Boolean,
-                               default: false
 
       renders_one :label
       renders_one :step

data/app/pb_kits/playbook/pb_timeline/label.html.erb

@@ -3,8 +3,7 @@
     <%= pb_rails("date_stacked", props: {
         date: object.date,
         size: "sm",
-        align: "center",
-        show_current_year: object.show_current_year
+        align: "center"
     }) %>
   <% else %>
     <%= content.presence %>

data/app/pb_kits/playbook/pb_timeline/label.rb

@@ -4,8 +4,6 @@ module Playbook
   module PbTimeline
     class Label < Playbook::KitBase
       prop :date
-      prop :show_current_year, type: Playbook::Props::Boolean,
-                               default: false
 
       def classname
         generate_classname("pb_timeline_item_left_block")

data/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx

@@ -9,7 +9,6 @@ type TimelineLabelProps = {
   children?: React.ReactNode,
   className?: string,
   htmlOptions?: { [key: string]: any },
-  showCurrentYear?: boolean,
 } & GlobalProps
 
 const TimelineLabel: React.FC<TimelineLabelProps> = ({
@@ -17,7 +16,6 @@ const TimelineLabel: React.FC<TimelineLabelProps> = ({
   children,
   className,
   htmlOptions = {},
-  showCurrentYear = false,
   ...props
 }) => {
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -30,7 +28,6 @@ const TimelineLabel: React.FC<TimelineLabelProps> = ({
       {date && (
         <DateStacked align="center"
             date={date}
-            showCurrentYear={showCurrentYear}
             size="sm"
         />
       )}

data/app/pb_kits/playbook/pb_timeline/timeline.test.js

@@ -170,54 +170,3 @@ test('should pass showDate prop with Children', () => {
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveClass('pb_timeline_kit_horizontal_with_date')
 })
-
-test('should pass showCurrentYear prop to items with date', () => {
-    const currentYear = new Date().getFullYear().toString()
-    render(
-        <Timeline
-            data={{ testid: testId }}
-            showDate
-        >
-            <Timeline.Item
-                date={new Date()}
-                icon="user"
-                iconColor="royal"
-                showCurrentYear
-            >
-                <TitleDetail
-                    detail="37-27 74th Street"
-                    title="Jackson Heights"
-                />
-            </Timeline.Item>
-        </Timeline>
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toBeInTheDocument()
-    const yearCaption = kit.querySelector('.pb_caption_kit_xs')
-    expect(yearCaption).toBeInTheDocument()
-    expect(yearCaption.textContent).toEqual(currentYear)
-})
-
-test('should not show current year by default', () => {
-    const currentYear = new Date().getFullYear().toString()
-    render(
-        <Timeline
-            data={{ testid: testId }}
-            showDate
-        >
-            <Timeline.Item
-                date={new Date()}
-                icon="user"
-                iconColor="royal"
-            >
-                <TitleDetail
-                    detail="37-27 74th Street"
-                    title="Jackson Heights"
-                />
-            </Timeline.Item>
-        </Timeline>
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toBeInTheDocument()
-    expect(kit).not.toHaveTextContent(currentYear)
-})

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 ------------------------*/