render caption in table if passed in as a prop #540

jhp0621 · 2022-03-19T00:49:38Z

Allow table to have a caption specified: #463

Author Checklist

Add unit test(s)
Update version in package.json (see the versioning guidelines)
Update documentation (if necessary)
Add story to storybook (if necessary)
Assign dev reviewer

jhp0621 · 2022-03-19T00:50:40Z

opening a new PR since it was gonna be hard to undo formatting in #513

jhp0621 · 2022-03-19T00:52:48Z

src/tables/sortable-table.js

-          {columns.map((column, key) => {
-              const Header = column.headerComponent || headerComponent || DefaultHeader
+    <>
+      {caption && <caption>{caption}</caption>}


this is the only change in return

This needs to be rendered as the first child of the <table>. See previous comment for source

chawes13

Can you also add tests?

chawes13 · 2022-06-14T13:46:20Z

migration-guides/v6.0.0.md

+// Before
+<caption>My Awesome Table</caption>
+<Table>
+  Table content
+</Table>


I don't think this is an appropriate Before example. The caption tag must be rendered within the table. Basically there wasn't a way to do this before (other than copying SortableTable into a local component file and making this adjustment)

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption

chawes13 · 2022-06-14T13:47:23Z

src/tables/sortable-table.js

-          {columns.map((column, key) => {
-              const Header = column.headerComponent || headerComponent || DefaultHeader
+    <>
+      {caption && <caption>{caption}</caption>}


This needs to be rendered as the first child of the <table>. See previous comment for source

chawes13 · 2022-06-16T15:46:13Z

@jhp0621 I decided against including information in the migration guide because this is not a breaking change. I also updated the placement and added a few tests. Let me know if you have any questions!

* Add `hideLabel` prop (#227) * add hideLabel prop, story * update showLabel logic, add new story * remove import * Version bump: 3.7.0 * add input label test, fix range input test * lint * change range label prop name * Add `Select` placeholder option by default (#256) * add default placeholder * Version bump: 3.12.0 * Lint rolling * Mapping aria-disabled instead of disabled (#337) * a11y group legends (#384) * Default label component to a legend for checkbox group * Default label component to a legend for radio group * Remove custom style prop on button (#408) * Remove custom style prop on button * Remove disabled button test * Cleanup * Some formatting * Priority -> variant * Add migration guide * Naming * Consolidate examples * Move deprecated migration guide to v6 milestone * Fix merge conflict * Take prop change name one level of abstraction further to accommodate changes in future * Modify File Input to accept multiple files (#380) * Initial refactor * Replace remove button with customizable component that accepts handler * POC for workaround with files failing to load (mostly a upstream cloudinary issue) * Refactor to a controlled file input (#388) * Initial proof-of-concept * Clean up logic and add dev hints via prop types * Always return an array * Read files synchronously to avoid overwrites * Modify markup to allow for focus styling * Code review feedback * Make cloudinary accept a file input and set the response appropriately * Extract helpers into shared folder * Override read files utility and clean up based on code review * filter invalid props from getting passed to error label (incl. label = false) * Return files on cloudinary read * Code clean-up * Update CloudinaryFileInput docs * Update FileInput docs * Bump size limit * Bump to milestone * Fix failing specs * Remove duplicate import * Fix merge conflicts * Add specs for multiple file input * Add coverage for inverse scenario * Add missing tests for remove functionality * Refactor FileInput using hooks * Use hook import directly * Safely mock global object in an isolated way * Wrap component in act to ensure state updates have settled * Add tests for error capture * Cover ternary branching conditions * Update migration guide * Code review feedback * Add new test * Manually updating docs * Refactor to always store values in an array * Update migration guide based on input value change * Update prop types * Do not change initial value if not an array (it will flag form as dirty) * Add thumbnail story * Code review feedback * Globally replace redux-forms * Reference array instead of single file * Add className to spinner component (#493) * change id to classname on spinner component * revert inadvertnet commit * add className to spinner component * passing tests and update version * add notes on the migration guide file * adding feedback changes * fix migration guide * update language in migration guide * additional feedback comments * update default prop * add destructuring to props * Small tweaks * Add missing period Co-authored-by: Conor Hawes <[email protected]> * Made options & value as required for the TabBar component (#461) * Made options & value as required for the TabBar component * bump version * update docs, storybook, tests. remove unneeded activeValue logic * Small documentation tweaks * Update docs and travis * Address linting errors * Address unrelated lint error Co-authored-by: Conor <[email protected]> * Issue #347 : Add remove button to default file input previews (#526) * show clear button for single file upload * formatting * tests for clear file input btn * make remove button for single file consistent with remove button for multiple files * update docs * run yarn docs manually * Add small note to migration guide Co-authored-by: Conor Hawes <[email protected]> * 524 remove setter link (#528) * Remove SetterLink * Update docs * Modal close refactor (#525) * Prevent all methods of closure * Update migration guide * Make isOpen prop less confusing * Manually update docs * Pass redux flash message to dismiss fn (#522) * Add ref forwarding to button (#542) * Add button ref note to migration guide * Fix tests and prop types (#553) * Hotfix * Be more specific * Fix select test warnings * Fix textarea test warnings * Fix file input test warnings * Dedupe yarn.lock file to help resolve issues * allow cell to take custom properties like aria and data-cy per cell b… (#503) * allow cell to take custom properties like aria and data-cy per cell by column * versioning to 5.4.3 * add filterInvalidProps to DefaultCellComponent render * add back space * add sortable-table.test.js test for addition; * remove custom class for valid dom prop * add test for invalid DOM props on column * Tweak formatting * Remove unnecessary attributes Co-authored-by: Conor Hawes <[email protected]> * Do not overwrite default modal classes (#554) * Add functionality * Add specs * Add story * Update migration guide * Tweak migration guide * render caption in table if passed in as a prop (#540) * render caption if passed in as a prop * remove semicolons i missed * migration guide * Render caption as table's first descendant * Add story * Fix typo * Rename file to match convention * Fix more typos * Add caption tests Co-authored-by: Conor Hawes <[email protected]> * Add GitHub issue templates (#555) * Add issue templates * Update FEATURE_REQUEST.md * Add support for additional undocumented props (#556) * Add support for additional undocumented props * Update docs and support callback ref as a prop * Actually update docs * Add disabled class to outer field wrapper (#557) * Add disabled class at top level * Update spec * Bug/react modal default (#559) * Switch selector * Apply aria-hidden on the browser * Update documentation * Fix prop documentation 😳 * Upgrade DateInput's react-datepicker dependency (#558) * Add missing test case * Upgrade to v2 * Upgrade to v3 * Update to v4 * Tweak formatting * Update migration guide * Update docs * Use calendar ref * Simplify implementation * Generate docs after merge * Write a better comment * Extend radio checkbox prop types (#563) * Do not use input prop types for a component that is not an input * Isolate components to allow for checkbox and radio groups to receive bools * Reuse type * Fix tabbar prop type issue * Remove unused import * Update docs * Upgrade to react-switch to v7 (#564) * Update package independently (#565) * Upgrade to react 17 (#569) * Remove lp hoc (#562) * Remove unused sortable imports * Remove toggle usage from most components * Update input-label * Remove unused hoc * Remove toggle and outside click hocs * Port over most files from lp-hoc's cloudinary uploader * Bring over cloudinary uploader and tweak tests * Clean up util usage * Use cloudinary hoc mock in file input test * Officially remove lp-hoc from library * Suppress unnecessary errors shown in modal * Lint * Add back export for cloudinary uploader util * Update migration guide * Fix heading formatting * Update docs * Always set a boolean value * Add docs about breaking change * Update docs after latest merge * Be better at writing tests * Coerce using Boolean constructor * Allow specification of group's input props (#571) * Fix watch infinite loop * Avoid passing down class name and allow localized input prop overrides * Update docs * Add stories * Add examples Co-authored-by: Rachel Killackey <[email protected]> Co-authored-by: David Pickart <[email protected]> Co-authored-by: George Lee <[email protected]> Co-authored-by: Angel Medina <[email protected]> Co-authored-by: Nicole Dow <[email protected]> Co-authored-by: Alexander Jin <[email protected]> Co-authored-by: Ji H. Park <[email protected]>

render caption if passed in as a prop

39e80d6

jhp0621 requested a review from chawes13 March 19, 2022 00:49

jhp0621 mentioned this pull request Mar 19, 2022

add caption component for table #513

Closed

5 tasks

remove semicolons i missed

5eca22e

jhp0621 commented Mar 19, 2022

View reviewed changes

jhp0621 marked this pull request as draft March 19, 2022 00:56

jhp0621 marked this pull request as ready for review March 19, 2022 01:12

migration guide

fb93d9d

jhp0621 force-pushed the table-caption-v6 branch from c6c0bbb to fb93d9d Compare March 19, 2022 01:19

chawes13 requested changes Jun 14, 2022

View reviewed changes

chawes13 added 7 commits June 16, 2022 11:20

Merge branch 'v6' into table-caption-v6

3a484fe

Render caption as table's first descendant

811f6a9

Add story

9abf4b1

Fix typo

755fc99

Rename file to match convention

287f4e5

Fix more typos

bd4fe4b

Add caption tests

f0307ff

chawes13 approved these changes Jun 16, 2022

View reviewed changes

chawes13 merged commit 9066f1b into v6 Jun 16, 2022

chawes13 deleted the table-caption-v6 branch June 16, 2022 15:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

render caption in table if passed in as a prop #540

render caption in table if passed in as a prop #540

jhp0621 commented Mar 19, 2022

jhp0621 commented Mar 19, 2022

jhp0621 Mar 19, 2022

chawes13 Jun 14, 2022

chawes13 left a comment

chawes13 Jun 14, 2022 •

edited

Loading

chawes13 Jun 14, 2022

chawes13 commented Jun 16, 2022

render caption in table if passed in as a prop #540

render caption in table if passed in as a prop #540

Conversation

jhp0621 commented Mar 19, 2022

Author Checklist

jhp0621 commented Mar 19, 2022

jhp0621 Mar 19, 2022

Choose a reason for hiding this comment

chawes13 Jun 14, 2022

Choose a reason for hiding this comment

chawes13 left a comment

Choose a reason for hiding this comment

chawes13 Jun 14, 2022 • edited Loading

Choose a reason for hiding this comment

chawes13 Jun 14, 2022

Choose a reason for hiding this comment

chawes13 commented Jun 16, 2022

chawes13 Jun 14, 2022 •

edited

Loading