From 39e80d63c72f75cb877a42023ca45590fc4edc56 Mon Sep 17 00:00:00 2001 From: Ji Park Date: Fri, 18 Mar 2022 19:47:45 -0500 Subject: [PATCH 1/9] render caption if passed in as a prop --- src/tables/sortable-table.js | 79 ++++++++++++++++++++---------------- 1 file changed, 45 insertions(+), 34 deletions(-) diff --git a/src/tables/sortable-table.js b/src/tables/sortable-table.js index 75c55c51..0f0a946d 100644 --- a/src/tables/sortable-table.js +++ b/src/tables/sortable-table.js @@ -47,6 +47,7 @@ const propTypes = { onChange: PropTypes.func, rowComponent: Types.component, headerComponent: Types.component, + caption: PropTypes.node, } const defaultProps = { className: '', @@ -57,6 +58,7 @@ const defaultProps = { disableSort: false, controlled: false, onChange: noop, + caption: null, } const defaultControls = { initialSortPath: '', @@ -92,6 +94,7 @@ function SortableTable({ onChange, rowComponent, headerComponent, + caption, ...rest }) { const columns = getColumnData(children, disableSort) @@ -148,41 +151,49 @@ function SortableTable({ } return ( - - - - {columns.map((column, key) => { - const Header = column.headerComponent || headerComponent || DefaultHeader + <> + {caption && } +
{caption}
+ + + {columns.map((column, key) => { + const Header = + column.headerComponent || headerComponent || DefaultHeader; return ( -
handleColumnChange(column) - }} /> - ) - } - )} -
- - - { - data.map((rowData, key) => - - ) - } - -
+
handleColumnChange(column), + }} + /> + ); + })} + + + + {data.map((rowData, key) => ( + + ))} + + + ) } From 5eca22e518bbb226f34d67be171f400309f8712a Mon Sep 17 00:00:00 2001 From: Ji Park Date: Fri, 18 Mar 2022 19:52:10 -0500 Subject: [PATCH 2/9] remove semicolons i missed --- src/tables/sortable-table.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tables/sortable-table.js b/src/tables/sortable-table.js index 0f0a946d..c10dc612 100644 --- a/src/tables/sortable-table.js +++ b/src/tables/sortable-table.js @@ -161,7 +161,7 @@ function SortableTable({ {columns.map((column, key) => { const Header = - column.headerComponent || headerComponent || DefaultHeader; + column.headerComponent || headerComponent || DefaultHeader return (
handleColumnChange(column), }} /> - ); + ) })} From fb93d9de840cbce9bfcaf95c181341c3d191cb6a Mon Sep 17 00:00:00 2001 From: Ji Park Date: Fri, 18 Mar 2022 20:19:12 -0500 Subject: [PATCH 3/9] migration guide --- migration-guides/v6.0.0.md | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/migration-guides/v6.0.0.md b/migration-guides/v6.0.0.md index 92a66034..d8edaed4 100644 --- a/migration-guides/v6.0.0.md +++ b/migration-guides/v6.0.0.md @@ -11,8 +11,9 @@ This version contains the following breaking changes: 8. `` and `` components now default to allowing the user to remove a selected file 9. The `previewComponent` for a file input no longer receives a `value` prop and `file` is a file object (with the url) 10. The tag on `` now uses the class `spinner` in place of an id and supports additional classes -11. `` now expects both `options` and `value` as required props. +11. `` now expects both `options` and `value` as required props 12. `` no longer accepts the `hideCloseButton` prop +13. `` and `` components now render a ` + + {columns.map((column, key) => { + const Header = + column.headerComponent || headerComponent || DefaultHeader + return ( +
handleColumnChange(column), + }} + /> + ) + })} +
+ + + {data.map((rowData, key) => ( + + ))} + +
` element with a `caption` prop it receives The required changes for each item are detailed below. @@ -240,7 +241,7 @@ Replace any styling rules that target `#spinner` with `.spinner`. } ``` -## 11. `` now expects both `options` and `value` as required props. +## 11. `` now expects both `options` and `value` as required props Make sure that any instances of `` in your application are already sending these two props. @@ -251,7 +252,8 @@ Make sure that any instances of `` in your application are already sen /> ``` -## 12. `` no longer accepts the `hideCloseButton` prop. +## 12. `` no longer accepts the `hideCloseButton` prop + Replace `hideCloseButton` with `preventClose`. If you still need the modal to close on escape and/or by clicking the overlay, you can manually set those props. By default, `shouldCloseOnEsc` and `shouldCloseOnOverlayClick` will be set to the opposite of `preventClose` (default `false`). ```jsx @@ -269,4 +271,25 @@ Replace `hideCloseButton` with `preventClose`. If you still need the modal to cl Modal content +``` + +## 13. `` and `` components now render a ` +
` element with a `caption` prop it receives + +`caption` is a node prop and defaults to null. html tag is only rendered if `caption` is present. +```jsx +// Before +My Awesome Table
+ Table content +
+ +// After + + Table content +
+ +// With component prop +My Awesome Table

}> + Table content +
``` \ No newline at end of file From 811f6a95d4e5a3210c3eaf9ee31a44f9a4f89a8c Mon Sep 17 00:00:00 2001 From: Conor Hawes Date: Thu, 16 Jun 2022 11:22:44 -0400 Subject: [PATCH 4/9] Render caption as table's first descendant --- src/tables/sortable-table.js | 82 ++++++++++++++++++------------------ 1 file changed, 40 insertions(+), 42 deletions(-) diff --git a/src/tables/sortable-table.js b/src/tables/sortable-table.js index c10dc612..8ca2a687 100644 --- a/src/tables/sortable-table.js +++ b/src/tables/sortable-table.js @@ -151,49 +151,47 @@ function SortableTable({ } return ( - <> + {caption && } -
{caption}
- - - {columns.map((column, key) => { - const Header = - column.headerComponent || headerComponent || DefaultHeader - return ( -
handleColumnChange(column), - }} - /> - ) - })} -
- - - {data.map((rowData, key) => ( - - ))} - -
- +
) } From 9abf4b139fcdf8559546cb6bdb1ebbb7060fa221 Mon Sep 17 00:00:00 2001 From: Conor Hawes Date: Thu, 16 Jun 2022 11:34:49 -0400 Subject: [PATCH 5/9] Add story --- .storybook/styles/components/_table.scss | 6 ++++++ .storybook/styles/settings/variables/_colors.scss | 1 + stories/tables/table.story.js | 14 ++++++++++++++ 3 files changed, 21 insertions(+) diff --git a/.storybook/styles/components/_table.scss b/.storybook/styles/components/_table.scss index 0644c9b0..368b5eda 100644 --- a/.storybook/styles/components/_table.scss +++ b/.storybook/styles/components/_table.scss @@ -85,3 +85,9 @@ th{ content:"▲"; } } + +.custom-caption { + font-weight: bold; + font-size: 0.8rem; + color: $blue-dark; +} \ No newline at end of file diff --git a/.storybook/styles/settings/variables/_colors.scss b/.storybook/styles/settings/variables/_colors.scss index 9f078609..ab4115dd 100755 --- a/.storybook/styles/settings/variables/_colors.scss +++ b/.storybook/styles/settings/variables/_colors.scss @@ -6,6 +6,7 @@ //BLUE $blue-light: #BEE4FF; $blue-base: #6BC2FF; + $blue-dark: #006AB5; //GREEN $green-dark: #56C852; diff --git a/stories/tables/table.story.js b/stories/tables/table.story.js index ed95b37b..cb2ffd37 100644 --- a/stories/tables/table.story.js +++ b/stories/tables/table.story.js @@ -38,3 +38,17 @@ storiesOf('Table', module) )) + .add('with caption', () => ( + + + + +
+ )) + .add('with customized caption', () => ( + Participant Attributes}> + + + +
+ )) From 755fc99d7900e75baddcb2d050ae5ba4c7ae22e9 Mon Sep 17 00:00:00 2001 From: Conor Hawes Date: Thu, 16 Jun 2022 11:35:00 -0400 Subject: [PATCH 6/9] Fix typo --- stories/tables/sortable-table.story.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stories/tables/sortable-table.story.js b/stories/tables/sortable-table.story.js index 0843888c..47fca747 100644 --- a/stories/tables/sortable-table.story.js +++ b/stories/tables/sortable-table.story.js @@ -179,7 +179,7 @@ storiesOf('SortableTable', module) )) - .add('with custom value getter, custom sorter, iniital column', () => ( + .add('with custom value getter, custom sorter, initial column', () => (

"Name and Age" column combines name and age, sorted by age portion, initial column

From 287f4e57c3d88e832c10bd0301613d06001d07a7 Mon Sep 17 00:00:00 2001 From: Conor Hawes Date: Thu, 16 Jun 2022 11:35:11 -0400 Subject: [PATCH 7/9] Rename file to match convention --- stories/forms/inputs/{textarea-story.js => textarea.story.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename stories/forms/inputs/{textarea-story.js => textarea.story.js} (100%) diff --git a/stories/forms/inputs/textarea-story.js b/stories/forms/inputs/textarea.story.js similarity index 100% rename from stories/forms/inputs/textarea-story.js rename to stories/forms/inputs/textarea.story.js From bd4fe4bf1b6e6e70ad18b0033a0fc57f77dff692 Mon Sep 17 00:00:00 2001 From: Conor Hawes Date: Thu, 16 Jun 2022 11:37:39 -0400 Subject: [PATCH 8/9] Fix more typos --- test/tables/sortable-table.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/tables/sortable-table.test.js b/test/tables/sortable-table.test.js index 0cd0b46c..f71ed4e4 100644 --- a/test/tables/sortable-table.test.js +++ b/test/tables/sortable-table.test.js @@ -203,7 +203,7 @@ test('column can have a column-specific custom header component', () => { expect(wrapper.find(MyHeader).first().props().column.name).toEqual('name') }) -test('initialColumn determines inital sortPath and sortFunc', () => { +test('initialColumn determines initial sortPath and sortFunc', () => { const mySort = jest.fn(compareAtPath('name', sortAscending)) const wrapper = mount( @@ -273,7 +273,7 @@ test('`placeholder` option is displayed if value is `null` or `undefined`', () = expect(wrapper.find('td').last().text()).toEqual('placeholder') }) -test('can recieve custom class name', () => { +test('can receive custom class name', () => { const data = [ { name: null }, { name: undefined }, From f0307ffeab129f02b1f1fda4199c60ddf22027d0 Mon Sep 17 00:00:00 2001 From: Conor Hawes Date: Thu, 16 Jun 2022 11:45:17 -0400 Subject: [PATCH 9/9] Add caption tests --- test/tables/sortable-table.test.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/test/tables/sortable-table.test.js b/test/tables/sortable-table.test.js index f71ed4e4..819a8734 100644 --- a/test/tables/sortable-table.test.js +++ b/test/tables/sortable-table.test.js @@ -385,3 +385,30 @@ test('does not pass invalid DOM props to cells', () => { ) expect(wrapper.find('td').first().prop('customAttribute')).toBe(undefined) }) + +test('does not render a caption element by default', () => { + const wrapper = mount( + + + + ) + expect(wrapper.find('caption').exists()).toBe(false) +}) + +test('renders a caption element when provided as the first descendant', () => { + const wrapper = mount( + + + + ) + expect(wrapper.find('table').childAt(0).type()).toBe('caption') +}) + +test('renders a caption element with whatever is provided', () => { + const wrapper = mount( + My Table}> + + + ) + expect(wrapper.find('.custom-caption').text()).toBe('My Table') +}) \ No newline at end of file