RubyGems - playbook_ui - Versions diffs - 15.8.0.pre.rc.1 → 16.0.0.pre.alpha.HFH3979Applydepwarningfixtoplaybook13635 - Mend

playbook_ui 15.8.0.pre.rc.1 → 16.0.0.pre.alpha.HFH3979Applydepwarningfixtoplaybook13635

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (219) hide show

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

@@ -1,82 +1,50 @@
-import React from 'react'
-import { render, screen } from '../../test-utils'
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
 import Body from '../../../pb_body/_body'
-import { SCREEN_SIZES } from '../../test-utils'
-const testSubject = 'body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import TextInput from '../../../pb_text_input/_text_input'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
-test('Global Props: Returns ordinal suffixed class name', () => {
-  for(let x = 0, y = 13; x < y; ++x) {
-    const testId = `${testSubject}-${x}`
-    render(
-      <Body
-          data={{ testid: testId }}
-          flex={`${x}`}
-          text="Hi"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`flex_${x}`)
+// Test numeric values (0-12) - flex prop expects strings
+testGlobalProp(
+  'flex',
+  Array.from({ length: 13 }, (_, i) => String(i)),
+  (v) => `flex_${v}`,
+  (size, v) => `flex_${size}_${v}`,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
-    SCREEN_SIZES.forEach((size) => {
-      const testId = `${testSubject}-${x}-${size}`
-      render(
-        <Body
-            data={{ testid: testId }}
-            flex={{ [size]: x }}
-            text="Hi"
-        />
-      )
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass(`flex_${size}_${x}`)
-    })
-  }
-})
+// Test string values
+testGlobalProp(
+  'flex',
+  ['auto', 'initial', 'none'],
+  (v) => `flex_${v}`,
+  (size, v) => `flex_${size}_${v}`,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
-test('Global Props: returns proper class name', () => {
-  const propValues = ["auto", "initial", "none"]
-  for(let x = 0, y = propValues.length; x < y; ++x) {
-    const testId = `${testSubject}-${propValues[x]}`
-    render(
-      <Body
-          data={{ testid: testId }}
-          flex={`${propValues[x]}`}
-          text="Hi"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`flex_${propValues[x]}`)
+testGlobalPropResponsiveWithDefault(
+  'flex',
+  { default: '3', xs: '1', sm: '3', md: '1' },
+  (v) => `flex_${v}`,
+  (size, v) => `flex_${size}_${v}`
+)
-    SCREEN_SIZES.forEach((size) => {
-      const testId = `${testSubject}-${propValues[x]}-${size}`
-      render(
-        <Body
-            data={{ testid: testId }}
-            flex={{ [size]: propValues[x] }}
-            text="Hi"
-        />
-      )
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass(`flex_${size}_${propValues[x]}`)
-    })
-  }
-})
+testGlobalPropAbsence(
+  'flex',
+  ['flex_0', 'flex_1', 'flex_12', 'flex_auto', 'flex_initial', 'flex_none'],
+  undefined,
+  { skipNull: true }
+)
-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`)
-})
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'flex',
+  [999, -1, 'invalid', 'out_of_range', 'bad_string', 13, 'special-chars!@#'],
+  ['flex_999', 'flex_-1', 'flex_invalid', 'flex_out_of_range', 'flex_bad_string', 'flex_13', 'flex_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

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

@@ -1,55 +1,42 @@
-import React from 'react'
-import { render, screen } from '../../test-utils'
-import Body from '../../../pb_body/_body'
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
 import { camelToSnakeCase } from '../../../utilities/text'
-import { SCREEN_SIZES } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
-const testSubject = 'body'
+// Note: TextInput excluded - flexDirection is a flexbox property that doesn't apply to form inputs
+testGlobalProp(
+  'flexDirection',
+  ['row', 'column', 'columnReverse'],
+  (v) => `flex_direction_${camelToSnakeCase(v)}`,
+  (size, v) => `flex_direction_${size}_${camelToSnakeCase(v)}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
-test('Global Props: returns proper class name', () => {
-  const propValues = ["row", "column", "columnReverse"]
-  for(let x = 0, y = propValues.length; x < y; ++x) {
-    const testId = `${testSubject}-${propValues[x]}`
-    render(
-      <Body
-          data={{ testid: testId }}
-          flexDirection={`${propValues[x]}`}
-          text="Hi"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`flex_direction_${camelToSnakeCase(propValues[x])}`)
+testGlobalPropResponsiveWithDefault(
+  'flexDirection',
+  { default: 'column', xs: 'row', sm: 'column', md: 'row' },
+  (v) => `flex_direction_${camelToSnakeCase(v)}`,
+  (size, v) => `flex_direction_${size}_${camelToSnakeCase(v)}`
+)
-    SCREEN_SIZES.forEach((size) => {
-      const testId = `${testSubject}-${propValues[x]}-${size}`
-      render(
-        <Body
-            data={{ testid: testId }}
-            flexDirection={{ [size]: propValues[x] }}
-            text="Hi"
-        />
-      )
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass(`flex_direction_${size}_${camelToSnakeCase(propValues[x])}`)
-    })
-  }
-})
+testGlobalPropAbsence(
+  'flexDirection',
+  ['flex_direction_row', 'flex_direction_column', 'flex_direction_column_reverse'],
+  undefined,
+  { skipNull: true }
+)
-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`)
-})
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+// NOTE: Using allowRenderingErrors: true because invalid types (like numbers) cause rendering errors with camelToSnakeCase
+testGlobalPropInvalidValues(
+  'flexDirection',
+  ['invalid', 'bad_value', 'not_a_direction', 'special-chars!@#'],
+  ['flex_direction_invalid', 'flex_direction_bad_value', 'flex_direction_not_a_direction', 'flex_direction_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true, allowRenderingErrors: true }
+)

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

@@ -1,53 +1,40 @@
-import React from 'react'
-import { render, screen } from '../../test-utils'
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
 import Body from '../../../pb_body/_body'
-import { SCREEN_SIZES } from '../../test-utils'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
-const testSubject = 'body'
+// Note: TextInput excluded - flexGrow is a flexbox property that doesn't apply to form inputs
+testGlobalProp(
+  'flexGrow',
+  [0, 1],
+  (v) => `flex_grow_${v}`,
+  (size, v) => `flex_grow_${size}_${v}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
-test('Global Props: Returns ordinal suffixed class name', () => {
-  for(let x = 0, y = 2; x < y; ++x) {
-    const testId = `${testSubject}-${x}`
-    render(
-      <Body
-          data={{ testid: testId }}
-          flexGrow={x}
-          text="Hi"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`flex_grow_${x}`)
+testGlobalPropResponsiveWithDefault(
+  'flexGrow',
+  { default: 1, xs: 0, sm: 1, md: 0 },
+  (v) => `flex_grow_${v}`,
+  (size, v) => `flex_grow_${size}_${v}`
+)
-    SCREEN_SIZES.forEach((size) => {
-      const testId = `${testSubject}-${x}-${size}`
-      render(
-        <Body
-            data={{ testid: testId }}
-            flexGrow={{ [size]: x }}
-            text="Hi"
-        />
-      )
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass(`flex_grow_${size}_${x}`)
-    })
-  }
-})
+testGlobalPropAbsence(
+  'flexGrow',
+  ['flex_grow_0', 'flex_grow_1'],
+  undefined,
+  { skipNull: true }
+)
-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`)
-})
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'flexGrow',
+  [2, -1, 999, 'invalid', 'bad_value', 'special-chars!@#'],
+  ['flex_grow_2', 'flex_grow_-1', 'flex_grow_999', 'flex_grow_invalid', 'flex_grow_bad_value', 'flex_grow_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

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

@@ -1,53 +1,40 @@
-import React from 'react'
-import { render, screen } from '../../test-utils'
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
 import Body from '../../../pb_body/_body'
-import { SCREEN_SIZES } from '../../test-utils'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
-const testSubject = 'body'
+// Note: TextInput excluded - flexShrink is a flexbox property that doesn't apply to form inputs
+testGlobalProp(
+  'flexShrink',
+  [0, 1],
+  (v) => `flex_shrink_${v}`,
+  (size, v) => `flex_shrink_${size}_${v}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
-test('Global Props: Returns ordinal suffixed class name', () => {
-  for(let x = 0, y = 2; x < y; ++x) {
-    const testId = `${testSubject}-${x}`
-    render(
-      <Body
-          data={{ testid: testId }}
-          flexShrink={x}
-          text="Hi"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`flex_shrink_${x}`)
+testGlobalPropResponsiveWithDefault(
+  'flexShrink',
+  { default: 0, xs: 1, sm: 0, md: 1 },
+  (v) => `flex_shrink_${v}`,
+  (size, v) => `flex_shrink_${size}_${v}`
+)
-    SCREEN_SIZES.forEach((size) => {
-      const testId = `${testSubject}-${x}-${size}`
-      render(
-        <Body
-            data={{ testid: testId }}
-            flexShrink={{ [size]: x }}
-            text="Hi"
-        />
-      )
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass(`flex_shrink_${size}_${x}`)
-    })
-  }
-})
+testGlobalPropAbsence(
+  'flexShrink',
+  ['flex_shrink_0', 'flex_shrink_1'],
+  undefined,
+  { skipNull: true }
+)
-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`)
-})
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'flexShrink',
+  [2, -1, 999, 'invalid', 'bad_value', 'special-chars!@#'],
+  ['flex_shrink_2', 'flex_shrink_-1', 'flex_shrink_999', 'flex_shrink_invalid', 'flex_shrink_bad_value', 'flex_shrink_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

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

@@ -1,55 +1,42 @@
-import React from 'react'
-import { render, screen } from '../../test-utils'
-import Body from '../../../pb_body/_body'
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
 import { camelToSnakeCase } from '../../../utilities/text'
-import { SCREEN_SIZES } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
-const testSubject = 'body'
+// Note: TextInput excluded - flexWrap is a flexbox property that doesn't apply to form inputs
+testGlobalProp(
+  'flexWrap',
+  ['wrap', 'nowrap', 'wrapReverse'],
+  (v) => `flex_wrap_${camelToSnakeCase(v)}`,
+  (size, v) => `flex_wrap_${size}_${camelToSnakeCase(v)}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
-test('Global Props: returns proper class name', () => {
-  const propValues = ["wrap", "nowrap", "wrapReverse"]
-  for(let x = 0, y = 3; x < y; ++x) {
-    const testId = `${testSubject}-${propValues[x]}`
-    render(
-      <Body
-          data={{ testid: testId }}
-          flexWrap={`${propValues[x]}`}
-          text="Hi"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`flex_wrap_${camelToSnakeCase(propValues[x])}`)
+testGlobalPropResponsiveWithDefault(
+  'flexWrap',
+  { default: 'wrap', xs: 'nowrap', sm: 'wrap', md: 'nowrap' },
+  (v) => `flex_wrap_${camelToSnakeCase(v)}`,
+  (size, v) => `flex_wrap_${size}_${camelToSnakeCase(v)}`
+)
-    SCREEN_SIZES.forEach((size) => {
-      const testId = `${testSubject}-${propValues[x]}-${size}`
-      render(
-        <Body
-            data={{ testid: testId }}
-            flexWrap={{ [size]: propValues[x] }}
-            text="Hi"
-        />
-      )
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass(`flex_wrap_${size}_${camelToSnakeCase(propValues[x])}`)
-    })
-  }
-})
+testGlobalPropAbsence(
+  'flexWrap',
+  ['flex_wrap_wrap', 'flex_wrap_nowrap', 'flex_wrap_wrap_reverse'],
+  undefined,
+  { skipNull: true }
+)
-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`)
-})
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+// NOTE: Using allowRenderingErrors: true because invalid types (like numbers) cause rendering errors with camelToSnakeCase
+testGlobalPropInvalidValues(
+  'flexWrap',
+  ['invalid', 'bad_value', 'not_a_wrap_value', 'special-chars!@#'],
+  ['flex_wrap_invalid', 'flex_wrap_bad_value', 'flex_wrap_not_a_wrap_value', 'flex_wrap_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true, allowRenderingErrors: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/gap.test.js ADDED Viewed

@@ -0,0 +1,87 @@
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+// NOTE: TextInput excluded - gap properties are not valid props for input elements
+// Test gap prop
+testGlobalProp(
+  'gap',
+  ['xs', 'sm', 'md', 'lg', 'xl'],
+  (v) => `gap_${v}`,
+  (size, v) => `gap_${size}_${v}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+testGlobalPropResponsiveWithDefault(
+  'gap',
+  { default: 'md', xs: 'xs', sm: 'md', md: 'lg' },
+  (v) => `gap_${v}`,
+  (size, v) => `gap_${size}_${v}`
+)
+testGlobalPropAbsence(
+  'gap',
+  ['gap_xs', 'gap_sm', 'gap_md', 'gap_lg', 'gap_xl'],
+  undefined,
+  { skipNull: true }
+)
+// Test columnGap prop
+testGlobalProp(
+  'columnGap',
+  ['xs', 'sm', 'md', 'lg', 'xl'],
+  (v) => `column_gap_${v}`,
+  (size, v) => `column_gap_${size}_${v}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+testGlobalPropResponsiveWithDefault(
+  'columnGap',
+  { default: 'md', xs: 'xs', sm: 'md', md: 'lg' },
+  (v) => `column_gap_${v}`,
+  (size, v) => `column_gap_${size}_${v}`
+)
+testGlobalPropAbsence(
+  'columnGap',
+  ['column_gap_xs', 'column_gap_sm', 'column_gap_md', 'column_gap_lg', 'column_gap_xl'],
+  undefined,
+  { skipNull: true }
+)
+// Test rowGap prop
+testGlobalProp(
+  'rowGap',
+  ['xs', 'sm', 'md', 'lg', 'xl'],
+  (v) => `row_gap_${v}`,
+  (size, v) => `row_gap_${size}_${v}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+testGlobalPropResponsiveWithDefault(
+  'rowGap',
+  { default: 'md', xs: 'xs', sm: 'md', md: 'lg' },
+  (v) => `row_gap_${v}`,
+  (size, v) => `row_gap_${size}_${v}`
+)
+testGlobalPropAbsence(
+  'rowGap',
+  ['row_gap_xs', 'row_gap_sm', 'row_gap_md', 'row_gap_lg', 'row_gap_xl'],
+  undefined,
+  { skipNull: true }
+)
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'gap',
+  ['invalid', 'bad_value', 'not_a_size', 'special-chars!@#'],
+  ['gap_invalid', 'gap_bad_value', 'gap_not_a_size', 'gap_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)