playbook_ui 15.4.0 → 15.5.0.pre.alpha.PLAY2503datepickerdefaultdateoutsideminmaxrange12814

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

@@ -25,6 +25,10 @@ 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
 
@@ -78,7 +82,7 @@ module Playbook
       end
 
       def is_react?
-        pills || !is_multi || wrapped
+        pills || !is_multi || wrapped || input_display == "none"
       end
 
       def typeahead_react_options
@@ -91,6 +95,7 @@ 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/pb_user/docs/_user_font_options.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { User } from 'playbook-ui'
+import User from '../../pb_user/_user'
 
 const UserFontOptions = (props) => {
   return (

data/app/pb_kits/playbook/utilities/_truncate.scss

@@ -11,6 +11,8 @@ $truncate-styles: (
   display: -webkit-box;
   -webkit-line-clamp: $number;
   -webkit-box-orient: vertical;
+  overflow-wrap: anywhere;
+  word-break: break-all;
 }
 
 @each $class, $number in $truncate-styles {

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -213,10 +213,24 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
-  return keys.map((size: Sizes) => {
-    const propValue: string = typeof(prop[size]) === 'string' ? camelToSnakeCase(prop[size]) : prop[size]
-    return `${classPrefix}_${size}_${propValue}`
-  }).join(" ")
+  const screenSizeValues = ["xs", "sm", "md", "lg", "xl"]
+  let classResult = ''
+  
+  // Handle default value separately (generates base class without size prefix)
+  if (prop.default !== undefined) {
+    const defaultValue: string = typeof(prop.default) === 'string' ? camelToSnakeCase(prop.default) : prop.default
+    classResult += `${classPrefix}_${defaultValue} `
+  }
+  
+  // Handle responsive sizes (generates classes with size prefix)
+  keys.forEach((key) => {
+    if (screenSizeValues.includes(key)) {
+      const propValue: string = typeof(prop[key]) === 'string' ? camelToSnakeCase(prop[key]) : prop[key]
+      classResult += `${classPrefix}_${key}_${propValue} `
+    }
+  })
+  
+  return classResult.trim()
 }
 
 //reusable function for top, bottom, right and left props
@@ -436,9 +450,11 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
         if (typeof zIndexEntry[1] == "number") {
           css += `z_index_${zIndexEntry[1]} `
         } else if (typeof zIndexEntry[1] == "object") {
-          Object.entries(zIndexEntry[1]).forEach((zIndexObj) => {
-            css += `z_index_${zIndexObj[0]}_${zIndexObj[1]} `
+          const responsiveObj: {[key: string]: string} = {}
+          Object.entries(zIndexEntry[1]).forEach(([key, value]) => {
+            responsiveObj[key] = value.toString()
           })
+          css += getResponsivePropClasses(responsiveObj, 'z_index')
         } else if (zIndexEntry[1] === 'max') {
           css += `z_index_max `
         }
@@ -463,9 +479,11 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
         if (typeof displayEntry[1] == "string") {
           css += `display_${displayEntry[1]} `
         } else if (typeof displayEntry[1] == "object") {
-          Object.entries(displayEntry[1]).forEach((displayObj) => {
-            css += `display_${displayObj[0]}_${displayObj[1]} `
+          const responsiveObj: {[key: string]: string} = {}
+          Object.entries(displayEntry[1]).forEach(([key, value]) => {
+            responsiveObj[key] = typeof value === 'string' ? value : value.toString()
           })
+          css += getResponsivePropClasses(responsiveObj, 'display')
         } else {
           ' '
         }

data/app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js

@@ -35,3 +35,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        alignContent={{ default: "spaceAround", xs: "center", sm: "spaceAround", md: "center" }}
+        data={{ testid: testId }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`align_content_space_around`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`align_content_xs_center`)
+  expect(kit).toHaveClass(`align_content_sm_space_around`)
+  expect(kit).toHaveClass(`align_content_md_center`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/alignItems.test.js

@@ -34,3 +34,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        alignItems={{ default: "end", xs: "center", sm: "end", md: "center" }}
+        data={{ testid: testId }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`align_items_end`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`align_items_xs_center`)
+  expect(kit).toHaveClass(`align_items_sm_end`)
+  expect(kit).toHaveClass(`align_items_md_center`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/alignSelf.test.js

@@ -35,3 +35,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        alignSelf={{ default: "end", xs: "center", sm: "end", md: "center" }}
+        data={{ testid: testId }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`align_self_end`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`align_self_xs_center`)
+  expect(kit).toHaveClass(`align_self_sm_end`)
+  expect(kit).toHaveClass(`align_self_md_center`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js

@@ -36,3 +36,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        display={{ default: "none", xs: "block", sm: "none", md: "block" }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`display_none`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`display_xs_block`)
+  expect(kit).toHaveClass(`display_sm_none`)
+  expect(kit).toHaveClass(`display_md_block`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/flex.test.js

@@ -62,3 +62,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        flex={{ default: "3", xs: "1", sm: "3", md: "1" }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`flex_3`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`flex_xs_1`)
+  expect(kit).toHaveClass(`flex_sm_3`)
+  expect(kit).toHaveClass(`flex_md_1`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/flexDirection.test.js

@@ -35,3 +35,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        flexDirection={{ default: "column", xs: "row", sm: "column", md: "row" }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`flex_direction_column`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`flex_direction_xs_row`)
+  expect(kit).toHaveClass(`flex_direction_sm_column`)
+  expect(kit).toHaveClass(`flex_direction_md_row`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js

@@ -33,3 +33,21 @@ test('Global Props: Returns ordinal suffixed class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        flexGrow={{ default: 1, xs: 0, sm: 1, md: 0 }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`flex_grow_1`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`flex_grow_xs_0`)
+  expect(kit).toHaveClass(`flex_grow_sm_1`)
+  expect(kit).toHaveClass(`flex_grow_md_0`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js

@@ -33,3 +33,21 @@ test('Global Props: Returns ordinal suffixed class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        flexShrink={{ default: 0, xs: 1, sm: 0, md: 1 }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`flex_shrink_0`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`flex_shrink_xs_1`)
+  expect(kit).toHaveClass(`flex_shrink_sm_0`)
+  expect(kit).toHaveClass(`flex_shrink_md_1`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/flexWrap.test.js

@@ -35,3 +35,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        flexWrap={{ default: "wrap", xs: "nowrap", sm: "wrap", md: "nowrap" }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`flex_wrap_wrap`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`flex_wrap_xs_nowrap`)
+  expect(kit).toHaveClass(`flex_wrap_sm_wrap`)
+  expect(kit).toHaveClass(`flex_wrap_md_nowrap`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/justifyContent.test.js

@@ -35,3 +35,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        justifyContent={{ default: "spaceBetween", xs: "start", sm: "spaceBetween", md: "start" }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`justify_content_space_between`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`justify_content_xs_start`)
+  expect(kit).toHaveClass(`justify_content_sm_space_between`)
+  expect(kit).toHaveClass(`justify_content_md_start`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js

@@ -35,3 +35,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        justifySelf={{ default: "end", xs: "start", sm: "end", md: "center" }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`justify_self_end`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`justify_self_xs_start`)
+  expect(kit).toHaveClass(`justify_self_sm_end`)
+  expect(kit).toHaveClass(`justify_self_md_center`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/order.test.js

@@ -33,3 +33,21 @@ test('Global Props: Returns ordinal suffixed class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        order={{ default: 3, xs: 1, sm: 3, md: 1 }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`flex_order_3`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`flex_order_xs_1`)
+  expect(kit).toHaveClass(`flex_order_sm_3`)
+  expect(kit).toHaveClass(`flex_order_md_1`)
+})