playbook_ui 15.5.0.pre.alpha.play250212696 → 15.5.0.pre.alpha.play260612706

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0f25d8e230fb6f3cf92eac4b1e458b83579eba7a8f201a70f84c54fb97698b6b
-  data.tar.gz: f63d76ad13dada00d5d24667c202d4b8de8b29559fe5b6c0fbcf28eb8e3205f8
+  metadata.gz: 68e50dc389b41862430cc0615991fb9e83f733981412aeb7ce348cc851f19325
+  data.tar.gz: a59b600809d8eac2c4d1718c904196de1879fd1c4307433734fd90e77a27d48c
 SHA512:
-  metadata.gz: 3f81a0dbf26bbbe3705c641959e175d4d4807690c16c672200e0a75a9fda6929eefe20ed29305f863c2229c6b5427a61327372364c4adb4f043ede86ac58cfb0
-  data.tar.gz: 9e0869caebd6545288ebe34e1df3d8c3f51faf21c915237aae222029abe6274c934ba2453b46c59f476ea3b38f58e0be319817b5f3d017fef7b915232a5fc5aa
+  metadata.gz: 512a1c1bc6effa4642eaa6c75f95e0403ecd1f6c33bb87bb8cb2270f9758b6f1d2f103b96180dc4303d74991a176820ba351521fa677c288e0df7d838517b380
+  data.tar.gz: 6a9959a608a5aae7a45bb4f98afb1e54feca7a1b6fe5a8a70a2fa4edb60f31e01c27bba37dbfc0feabd41dc7370b23be6152ab43f1e2579e1d0863fc3bf2dc08

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -102,16 +102,16 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   useEffect(() => {
     const updateResponsiveProps = () => {
       setResponsiveProps({
-        backgroundSize: getResponsiveValue(props.backgroundSize),
-        backgroundPosition: getResponsiveValue(props.backgroundPosition),
-        backgroundRepeat: getResponsiveValue(props.backgroundRepeat),
-        backgroundColor: getResponsiveValue(props.backgroundColor),
-        imageUrl: getResponsiveValue(props.imageUrl),
+        backgroundSize: getResponsiveValue(backgroundSize),
+        backgroundPosition: getResponsiveValue(backgroundPosition),
+        backgroundRepeat: getResponsiveValue(backgroundRepeat),
+        backgroundColor: getResponsiveValue(backgroundColor),
+        imageUrl: getResponsiveValue(imageUrl),
       });
     };
     window.addEventListener('resize', updateResponsiveProps);
     return () => window.removeEventListener('resize', updateResponsiveProps);
-  }, [props]);
+  }, [backgroundSize, backgroundPosition, backgroundRepeat, backgroundColor, imageUrl]);
 
 
   // Extract currently applicable responsive values.

data/app/pb_kits/playbook/pb_background/background.test.js

@@ -4,7 +4,6 @@ import Background from './_background'
 
 const props = {
   data: { testid: 'background' },
-  backgroundColor: null,
 }
 
 it('Should be accessible', async () => {
@@ -42,3 +41,8 @@ test('applies correct overlay class when imageOverlay prop is provided', () => {
   const kit = renderKit(Background, props, { imageOverlay: 'opacity_6' });
   expect(kit).toHaveClass('imageoverlay_opacity_6');
 });
+
+test('Sets backgroundColor to light as default when no backgroundColor prop is provided', () => {
+  const kit = renderKit(Background, props);
+  expect(kit).toHaveClass('pb_background_color_light');
+});

data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
+<%= pb_rails("background", props: { padding: "xl" }) do %>
 
 <% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -3,7 +3,6 @@ import Background from '../../pb_background/_background'
 
 const BackgroundLight = (props) => (
   <Background
-      backgroundColor="light"
       padding="xl"
       {...props}
   />

data/app/pb_kits/playbook/pb_background/docs/_background_light.md

@@ -0,0 +1 @@
+By default, the Background kit sets background color to 'light' as seen here. 

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

@@ -1,7 +1,7 @@
 examples:
 
   rails:
-  - background_light: Light
+  - background_light: Default
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image
@@ -11,7 +11,7 @@ examples:
   - background_size: Size
 
   react:
-  - background_light: Light
+  - background_light: Default
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image

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