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

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