RubyGems - playbook_ui - Versions diffs - 14.16.0 → 14.17.0.pre.alpha.PBNTR766tablenestedcollapsiblerowsborderdoubling7192 - Mend

playbook_ui 14.16.0 → 14.17.0.pre.alpha.PBNTR766tablenestedcollapsiblerowsborderdoubling7192

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 (135) hide show

data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx ADDED Viewed

@@ -0,0 +1,190 @@
+import React from 'react'
+import Layout from '../../pb_layout/_layout'
+import Flex from '../../pb_flex/_flex'
+import Body from '../../pb_body/_body'
+import Caption from '../../pb_caption/_caption'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+const LayoutBracket = () => {
+  return (
+    <div>
+      <Layout
+          layout="bracket"
+      >
+        <Layout.RoundLabel>
+          <Caption>Wild Card</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Packers</Body>
+              <Body>10</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Eagles</strong></Body>
+              <Body>22</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Vikings</Body>
+              <Body>9</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Rams</strong></Body>
+              <Body>27</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body><strong>Lions</strong></Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>BYE</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body><strong>Commanders</strong></Body>
+              <Body>23</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>Buccaneers</Body>
+              <Body>20</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body><strong>Chiefs</strong></Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>BYE</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Chargers</Body>
+              <Body>12</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Texans</strong></Body>
+              <Body>32</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Broncos</Body>
+              <Body>7</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Bills</strong></Body>
+              <Body>31</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Steelers</Body>
+              <Body>14</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Ravens</strong></Body>
+              <Body>28</Body>
+            </Flex>
+          </Layout.Game>
+        </Layout.Round>
+        <Layout.RoundLabel>
+          <Caption>Divisional</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Rams</Body>
+              <Body>22</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Eagles</strong></Body>
+              <Body>28</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body><strong>Commanders</strong></Body>
+              <Body>45</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>Lions</Body>
+              <Body>31</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Texans</Body>
+              <Body>14</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Chiefs</strong></Body>
+              <Body>23</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Ravens</Body>
+              <Body>25</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Bills</strong></Body>
+              <Body>27</Body>
+            </Flex>
+          </Layout.Game>
+        </Layout.Round>
+        <Layout.RoundLabel>
+          <Caption>Conference</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Commanders</Body>
+              <Body>23</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Eagles</strong></Body>
+              <Body>55</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Bills</Body>
+              <Body>29</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Chiefs</strong></Body>
+              <Body>32</Body>
+            </Flex>
+          </Layout.Game>
+        </Layout.Round>
+        <Layout.RoundLabel>
+          <Caption>Super Bowl</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Chiefs</Body>
+              <Body>22</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Eagles</strong></Body>
+              <Body>40</Body>
+            </Flex>
+          </Layout.Game>
+        </Layout.Round>
+      </Layout>
+    </div>
+  )
+}
+export default LayoutBracket

data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md ADDED Viewed

@@ -0,0 +1,5 @@
+Use `<Layout.RoundLabel>`, `<Layout.Round>`, and `<Layout.Game>` to make a bracket layout.
+On mobile devices, `<Layout.RoundLabel>` will display (on desktop these components are hidden) and the bracket will be in one column.
+Ensure that each `<Layout.Game>` maintains a consistent height for the bracket lines to lay out properly.

data/app/pb_kits/playbook/pb_layout/docs/example.yml CHANGED Viewed

@@ -18,4 +18,5 @@ examples:
   - layout_kanban: Kanban Layout
   - layout_content: Content Layout
   - layout_masonry: Masonry Layout
+  - layout_bracket: Bracket Layout

data/app/pb_kits/playbook/pb_layout/docs/index.js CHANGED Viewed

@@ -7,4 +7,5 @@ export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.j
 export { default as LayoutCollectionDetail } from './_layout_collection_detail.jsx'
 export { default as LayoutContent } from './_layout_content.jsx'
 export { default as LayoutMasonry } from './_layout_masonry.jsx'
+export { default as LayoutBracket } from './_layout_bracket.jsx'

data/app/pb_kits/playbook/pb_layout/layout.test.js CHANGED Viewed

@@ -82,6 +82,10 @@ test("render all layout variants", () => {
       layout: "masonry",
       expected: "pb_layout_kit_masonry_size_md_left_light",
     },
+    {
+      layout: "bracket",
+      expected: "pb_layout_kit_bracket",
+    },
   ]
   testValues.forEach(({ layout, expected }) => {

data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx ADDED Viewed

@@ -0,0 +1,90 @@
+import React from 'react'
+import classnames from 'classnames'
+import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
+import Card from '../../pb_card/_card'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+type LayoutGameProps = {
+  children: React.ReactNode[] | React.ReactNode,
+  className?: string,
+  numberOfRounds: number,
+  numberOfGames: number,
+  isOdd: boolean,
+} & GlobalProps
+// Game component (modeled after Item)
+const Game = (props: LayoutGameProps) => {
+  const { children, className, numberOfRounds, numberOfGames, isOdd } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  const numberOfChildren = Array.isArray(children) ? children.length : 0
+  const isMultiple = Array.isArray(children)
+  let ratio = 0
+  let exponent
+  if (numberOfGames > 1) {
+    exponent = (numberOfRounds) - Math.log2(numberOfGames) - 1
+    ratio = 2 ** exponent
+  }
+  if (numberOfChildren === 2) {
+    const [firstChild, secondChild] = React.Children.toArray(children)
+    if (React.isValidElement(firstChild) && React.isValidElement(secondChild)) {
+    return (
+      <div
+          className={classnames('layout_game', globalProps(props), className)}
+          style={dynamicInlineProps}
+      >
+        <Card
+            marginY="xs"
+            padding="none"
+            shadow="deep"
+        >
+          <Card.Body padding="xs">{firstChild}</Card.Body>
+          <SectionSeparator />
+          <Card.Body padding="xs">{secondChild}</Card.Body>
+        </Card>
+        {isOdd && numberOfGames > 1  &&
+          <div
+              className="half_box"
+              style={{ height: `calc(${ratio} * 100% + 4px)` }}
+          />
+        }
+      </div>
+      )
+    }
+  }
+  return (
+    <div
+        className={classnames('layout_game', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
+    {((!isMultiple && children) || numberOfChildren >= 1 )? (
+      children
+    ) : (
+      <Card
+          marginY="xs"
+          padding="none"
+          shadow="deep"
+      >
+        <Card.Body padding="xs">To be determined...</Card.Body>
+        <SectionSeparator />
+        <Card.Body padding="xs">To be determined...</Card.Body>
+      </Card>
+    )}
+      {isOdd && numberOfGames > 1  &&
+        <div
+            className="half_box"
+            style={{ height: `calc(${ratio} * 100% + 4px)` }}
+        />
+      }
+    </div>
+  )
+}
+export default Game

data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx ADDED Viewed

@@ -0,0 +1,57 @@
+import React from 'react'
+import classnames from 'classnames'
+import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
+type LayoutRoundLabelProps = {
+  children: React.ReactNode[] | React.ReactNode,
+  className?: string,
+} & GlobalProps
+export const RoundLabel = (props: LayoutRoundLabelProps) => {
+  const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  return (
+    <div
+        className={classnames('layout_round_label', className)}
+        style={dynamicInlineProps}
+    >
+      {children}
+    </div>
+  )
+}
+type LayoutRoundProps = {
+  children: React.ReactNode[] | React.ReactNode,
+  className?: string,
+  numberOfRounds: number,
+} & GlobalProps
+export const Round = (props: LayoutRoundProps) => {
+  const { children, className, numberOfRounds } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  const numberOfChildren = Array.isArray(children) ? children.length : 0
+  const childrenWithProps = Array.isArray(children) ? children.map((child, index) =>
+    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds, numberOfGames: numberOfChildren, isOdd: index % 2 === 0, key: `child_${index}` }) : child
+  ) : children
+  const rightConnectors = Array.from({ length: numberOfChildren / 2 }, (_, index) => (
+    <div
+        className="right_connector"
+        key={`right_connector_${index}`}
+    />
+  ))
+  return (
+    <>
+      <div
+          className={classnames('layout_round', globalProps(props), className)}
+          style={dynamicInlineProps}
+      >
+        {childrenWithProps}
+      </div>
+      <div className="connector_container">{rightConnectors}</div>
+    </>
+  )
+}

data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { debounce } from 'lodash'
+import { debounce } from "../../utilities/object"
 import { useCallback, useMemo, useState } from 'react'
 export default function useVisibility(initialState = false) {

data/app/pb_kits/playbook/pb_link/link.test.jsx CHANGED Viewed

@@ -73,7 +73,7 @@ test('adds icon', () => {
   const kit = screen.getByTestId('icon-test')
-  const icon = kit.querySelector('.pb_icon_kit')
+  const icon = kit.querySelector('.pb_custom_icon')
   expect(icon).toBeInTheDocument();
 })
@@ -87,7 +87,7 @@ test('adds icon right', () => {
   const kit = screen.getByTestId('icon-right-test')
-  const icon = kit.querySelector('.pb_icon_kit')
+  const icon = kit.querySelector('.pb_custom_icon')
   expect(icon).toBeInTheDocument();
 })

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx CHANGED Viewed

@@ -7,11 +7,12 @@ import {
   buildDataProps,
   buildHtmlProps,
 } from "../utilities/props";
+import { cloneDeep } from "../utilities/object";
 import Icon from "../pb_icon/_icon";
 import FormPill from "../pb_form_pill/_form_pill";
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
-import { cloneDeep } from "lodash";
 import MultiLevelSelectOptions from "./multi_level_select_options";
 import MultiLevelSelectContext from "./context";

data/app/pb_kits/playbook/pb_nav/_nav_item.test.js CHANGED Viewed

@@ -95,11 +95,13 @@ test('should not have a left border', () => {
 test('should have a right icon', () => {
     render(<NavDefault iconRight="angle-down" />)
     const kit = screen.getByTestId(itemTestId)
-    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_right fa-fw fa-angle-down" />')
+    const icon = kit.querySelector(".pb_custom_icon.pb_nav_list_item_icon_right")
+    expect(icon).toBeInTheDocument()
 })
 test('should have a left icon', () => {
-    render(<NavDefault iconLeft="users-class" />)
+    render(<NavDefault iconLeft="angle-up" />)
     const kit = screen.getByTestId(itemTestId)
-    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_left fa-fw fa-users-class" />')
+    const icon = kit.querySelector(".pb_custom_icon.pb_nav_list_item_icon_left")
+    expect(icon).toBeInTheDocument()
 })

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx CHANGED Viewed

@@ -32,11 +32,12 @@ type RichTextEditorProps = {
   advancedEditor?: any,
   advancedEditorToolbar?: boolean,
   toolbarBottom?: boolean,
-  children?: React.ReactNode | React.ReactNode[]
+  children?: React.ReactNode | React.ReactNode[],
   className?: string,
   data?: { [key: string]: string },
   focus?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
+  inputOptions?: { [key: string]: string | number | boolean | (() => void) },
   id?: string,
   inline?: boolean,
   extensions?: { [key: string]: string }[],
@@ -61,6 +62,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     data = {},
     focus = false,
     htmlOptions = {},
+    inputOptions = {},
     inline = false,
     extensions,
     name,
@@ -70,7 +72,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     sticky = false,
     template = '',
     value = '',
-    maxWidth="md"
+    maxWidth = "md"
   } = props
   const ariaProps = buildAriaProps(aria),
@@ -79,12 +81,28 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions)
-  const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
-    element = editor?.element
+  const handleOnEditorReady = (editorInstance: Editor) => {
+    setEditor(editorInstance)
+    setTimeout(() => {
+      const oldId = editorInstance.element.getAttribute('input')
+      if (oldId) {
+        const hiddenInput = document.getElementById(oldId)
+        if (hiddenInput) {
+          const newId = (inputOptions.id as string) || oldId
+          hiddenInput.id = newId
+          editorInstance.element.setAttribute('input', newId)
+          if (inputOptions.name) {
+            hiddenInput.setAttribute('name', inputOptions.name as string)
+          }
+        }
+      }
+    })
+  }
   // DOM manipulation must wait for editor to be ready
-  if (editor) {
-    const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
+  if (editor && editor.element) {
+    const toolbarElement = editor.element.parentElement.querySelector('trix-toolbar') as HTMLElement,
       blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement
     // replace default trix "block code" button with "inline code" button
@@ -118,8 +136,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   }, [editor, template])
   useEffect(() => {
-    if (!element) return
-    element.addEventListener('click', ({ target }: Event) => {
+    if (!editor?.element) return
+    editor.element.addEventListener('click', ({ target }: Event) => {
       const trixEditorContainer = (target as Element).closest('.pb_rich_text_editor_kit')
       if (!trixEditorContainer) return
@@ -128,7 +146,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
     })
-  }, [element])
+  }, [editor])
   const richTextEditorClass = 'pb_rich_text_editor_kit',
     simpleClass = simple ? 'simple' : '',
@@ -137,7 +155,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     inlineClass = inline ? 'inline' : '',
     toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
-  let css = classnames(globalProps(props, {maxWidth}), className)
+  let css = classnames(globalProps(props, { maxWidth }), className)
   css = classnames(
     richTextEditorClass,
     simpleClass,

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb CHANGED Viewed

	@@ -1 +1 @@
1	- <%= pb_rails("rich_text_editor", props: {id: "~~default~~", value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>
1	+ <%= pb_rails("rich_text_editor", props: {input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb CHANGED Viewed

@@ -1,5 +1,5 @@
 <%= react_component('RichTextEditor',
-  object.rich_text_options,
-  aria: object.aria,
-  data: object.data
-) %>
+                    object.rich_text_options,
+                    aria: object.aria,
+                    data: object.data
+                   ) %>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb CHANGED Viewed

@@ -20,6 +20,7 @@ module Playbook
       prop :value
       prop :template
       prop :placeholder
+      prop :input_options
       def classname
         generate_classname("pb_rich_text_editor_kit", simple_class, focus_class, sticky_class, separator: " ")
@@ -49,6 +50,7 @@ module Playbook
           value: value,
           template: template,
           placeholder: placeholder,
+          inputOptions: input_options,
         }
       end
     end

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ To guarantee the vertical section separator displays properly, please add the `vertical: "stretch"`/`vertical="stretch"` property to the parent container (which is commonly a Flex container). This will stretch the container’s child elements vertically and ensure the section separator appears as expected.

data/app/pb_kits/playbook/pb_stat_change/stat_change.test.js CHANGED Viewed

@@ -19,23 +19,27 @@ test('it renders preset icon', () => {
     render(
       <StatChange
           change="increase"
+          id="preset-icon"
           value="28.4"
       />
     )
-    const kit = screen.getByLabelText('arrow-up icon')
-    expect(kit).toBeTruthy
+    const kit = document.querySelector('#preset-icon')
+    const icon = kit.querySelector(".pb_custom_icon")
+    expect(icon).toBeInTheDocument()
 })
 test('it renders custom icon', () => {
     render(
       <StatChange
           icon="chart-line-down"
+          id="custom-icon"
           value={6.1}
       />
     )
-    const kit = screen.getByLabelText('chart-line-down icon')
-    expect(kit).toBeTruthy
+    const kit = document.querySelector('#custom-icon')
+    const icon = kit.querySelector(".pb_custom_icon")
+    expect(icon).toBeInTheDocument()
 })

data/app/pb_kits/playbook/pb_table/_table.tsx CHANGED Viewed

@@ -21,6 +21,7 @@ type TableProps = {
     data?: { [key: string]: string },
     dataTable: boolean,
     disableHover?: boolean,
+    headerStyle?: "default" | "borderless" | "floating"
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     outerPadding?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
@@ -46,6 +47,7 @@ const Table = (props: TableProps): React.ReactElement => {
         data = {},
         dataTable = false,
         disableHover = false,
+        headerStyle = "default",
         htmlOptions = {},
         id,
         outerPadding = '',
@@ -85,6 +87,8 @@ const Table = (props: TableProps): React.ReactElement => {
             'sticky-left-column': stickyLeftColumn,
             'sticky-right-column': stickyRightColumn,
             'striped': striped,
+            'header-borderless': headerStyle === 'borderless',
+            'header-floating': headerStyle === 'floating',
             [outerPaddingCss]: outerPadding !== '',
         },
         globalProps(props),

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx ADDED Viewed

@@ -0,0 +1,50 @@
+import React from 'react'
+import Table from '../../pb_table/_table'
+const TableWithHeaderStyleBorderless = (props) => {
+  return (
+    <>
+        <Table
+            headerStyle="borderless"
+            size="sm"
+            {...props}
+        >
+          <thead>
+              <tr>
+                  <th>{'Column 1'}</th>
+                  <th>{'Column 2'}</th>
+                  <th>{'Column 3'}</th>
+                  <th>{'Column 4'}</th>
+                  <th>{'Column 5'}</th>
+              </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+              <td>{'Value 4'}</td>
+              <td>{'Value 5'}</td>
+            </tr>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+              <td>{'Value 4'}</td>
+              <td>{'Value 5'}</td>
+            </tr>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+              <td>{'Value 4'}</td>
+              <td>{'Value 5'}</td>
+            </tr>
+          </tbody>
+        </Table>
+    </>
+  )
+}
+export default TableWithHeaderStyleBorderless

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_react.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Customize your header by removing the header borders with the `headerStyle="borderless"` prop.