Pass tab object to tab-panel child function #5476

milesdelliott · 2018-03-07T14:46:25Z

Description

Add a second argument to pass the Tab Title to the Tab Panel child function for situations where tab title may need to be highlighted further to indicate users which Tab they are on.

How Has This Been Tested?

I tested the initial change with a proof of concept implementation using the Tab Title, then I updated the Tab Panel tests to account for the change which all passed.
I am running Node version 8.9.1 and npm 5.5.1

Screenshots (jpeg or gifs if applicable):

Types of changes

This change adds an additional feature just by passing an additional argument to the function which is already required to be present. No breaking changes should occur, all code using the current code should continue to work fine

Checklist:

My code is tested.
My code follows the WordPress code style.
My code has proper inline documentation.

aduth

Would it be simpler to just pass the entire selectedTab object, and the user could pick which properties they want to use? Particularly if they're already familiar with the object signature from the tabs array, it seems like this would be simpler to use than predicting the order of the arguments.

milesdelliott · 2018-03-22T17:29:42Z

Yeah it would be simpler and probably better long term. It would be a breaking change which is why I just added a new argument in this instance, but long term the entire object makes more sense, I can update the PR to pass the whole object.

aduth

I'd personally be okay with it being a breaking change. Not likely to have seen much usage outside Gutenberg. To me, seems like we should have passed the whole object to begin with.

Are you able to resolve the currently failing tests? Let me know if you need help.

aduth · 2018-04-03T14:31:09Z

components/tab-panel/README.md

@@ -3,7 +3,7 @@ TabPanel

 TabPanel is a React component to render an ARIA-compliant TabPanel. It has two sections: a list of tabs, and the view to show when tabs are chosen. When the list of tabs gets focused, the active tab gets focus (the first tab if there isn't one already). Use the arrow keys to navigate between tabs AND select the newly focused tab at the same time.

-TabPanel is a Function-as-Children component. The function takes `tabName` as an argument.
+TabPanel is a Function-as-Children component. The function takes `tabName` and `tabTitle` as arguments.


Docs need to be updated taking into consideration we pass whole object.

aduth · 2018-09-13T18:43:18Z

Is it likely this will be resumed, or can it be closed?

milesdelliott · 2018-09-13T21:32:27Z

Sorry for the lack of activity on this, I've just updated the branch and ensured that all tests are passing

aduth · 2018-09-18T18:47:07Z

Thanks for the updates @milesdelliott . Since April, my openness to breaking changes has shifted some, and I'm starting to question what we might be able to do to avoid breakage here. I still like the proposal as far as the desired interface (passing object as the argument), but wonder if there's a path for deprecation here.

One thought I have is deprecating with a global warning message (example), keeping the argument value as a string for backwards-compatibility, but assigning properties into it so that a transition option exists.

Example:

const tab = new String( 'Tab name' );
tab.title = 'Tab name';

https://stackoverflow.com/a/5326882

It's very hacky, and we'd want to verify that using the constructed string this way works as we expect it to for existing usage. But I'd feel more comfortable about the transition if we could offer some compatibility.

Thoughts?

To avoid breaking changes, a String object is created from the tab name value, then the original properties of the tab object are assigned to this new String object. The passed object can now be used as if it were a string.

milesdelliott · 2018-09-18T20:17:36Z

I'm all for avoiding breaking changes. I've updated the code to assign all the original properties of the tab object to a new String object with a value being the tab name.

I tested it with a dummy component and it looks like it works well being used as the string or accessing the properties.

My only concern would be the increased complexity and making it harder for other developers to understand, but I don't think it's too bad and it is a nice transition step to be completely taken out in the future.

I kept the version for deprecation at 4.0.0, but let me know if that should be pushed out further.

aduth · 2018-09-18T20:30:33Z

I kept the version for deprecation at 4.0.0, but let me know if that should be pushed out further.

With 3.9.0 already in release candidate stage, we should consider all pending merges to be scheduled for 4.0.0, meaning 2 versions out would put it at 4.2.0 removal.

My only concern would be the increased complexity and making it harder for other developers to understand,

Definitely not great if it were a solution intended to be used long-term 😄 But since it's for deprecation compatibility, I think it's okay.

aduth · 2018-09-18T20:32:44Z

packages/components/src/tab-panel/index.js

@@ -63,6 +64,13 @@ class TabPanel extends Component {

 		const selectedTab = find( tabs, { name: selected } );
 		const selectedId = instanceId + '-' + selectedTab.name;
+
+		deprecated( 'Tab Panel child function argument used as string', {
+			alternative: "Argument is now an object, access the name property directly.",


I think the failing build might be related to the use of double quote here. We should use the single quote.

Good catch, thanks!

aduth · 2018-09-18T20:43:57Z

Do we not use this component anywhere in Gutenberg?

milesdelliott · 2018-09-18T20:54:03Z

I don't think so.

aduth

Verified the deprecation approach in an isolated environment:

https://codepen.io/aduth/pen/Ooawmr

An open question as to whether this is a component we should continue to offer if it's not used internally, though it seems generally useful.

Tests were failing, though it appeared to be an intermittent one. Hoping it works this time after a build restart.

milesdelliott · 2018-09-19T20:44:57Z

Thanks for verifying.

I think the test is failing because of the deprecation notice throwing a warning which the test doesn't like, but I'm guessing that's okay in this instance?

aduth · 2018-09-19T21:25:25Z

You might look to do something like here to avoid the console log triggering the failure:

https://github.com/WordPress/gutenberg/pull/9841/files#diff-7dd668718250393264047638da7e8c92L20

aduth · 2018-09-24T15:11:05Z

Looks great! Thanks!

milesdelliott · 2018-09-24T15:49:19Z

Thanks for your help!

Miles Elliott added 2 commits March 6, 2018 16:23

pass tab title to tab-panel child

a75ffc7

Update Tab Panel Tests and Readme

52e096c

aduth reviewed Mar 14, 2018

View reviewed changes

pass entire tab object

2476ed7

aduth added [Feature] UI Components Impacts or related to the UI component system [Type] Breaking Change For PRs that introduce a change that will break existing functionality labels Apr 3, 2018

aduth requested changes Apr 3, 2018

View reviewed changes

aduth added the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Sep 13, 2018

milesdelliott added 2 commits September 13, 2018 15:07

Update from master

a891e15

update to fix tests and bring branch up to date

3141a88

milesdelliott changed the title ~~pass tab title to tab-panel child function~~ Pass tab object to tab-panel child function Sep 13, 2018

milesdelliott and others added 3 commits September 13, 2018 17:01

Update package-lock.json

2b7d04c

Update package-lock.json

06a636a

update package-lock

cbe0374

aduth removed the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Sep 18, 2018

milesdelliott added 2 commits September 18, 2018 16:04

Allow passed object to be used as string

a724dbb

To avoid breaking changes, a String object is created from the tab name value, then the original properties of the tab object are assigned to this new String object. The passed object can now be used as if it were a string.

Add deprecation warning

27b4423

aduth reviewed Sep 18, 2018

View reviewed changes

aduth mentioned this pull request Sep 18, 2018

Allow double quotes and template string sometimes #7555

Merged

4 tasks

milesdelliott added 2 commits September 18, 2018 16:36

Fix double quotes

9d01803

Update version for deprecation

67cbccf

aduth approved these changes Sep 18, 2018

View reviewed changes

milesdelliott added 2 commits September 19, 2018 19:17

Mock Deprecated Function

e325847

Add detail to usage

218fe94

aduth merged commit be0d523 into WordPress:master Sep 24, 2018

milesdelliott deleted the fature/tab-pane/pass-tab-title-to-tab branch September 24, 2018 15:49

aduth added this to the 4.0 milestone Sep 24, 2018

ryelle mentioned this pull request Oct 10, 2018

DatePicker: update selected tab to reflect update to TabPanel component woocommerce/woocommerce-admin#501

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pass tab object to tab-panel child function #5476

Pass tab object to tab-panel child function #5476

milesdelliott commented Mar 7, 2018

aduth left a comment

milesdelliott commented Mar 22, 2018

aduth left a comment

aduth Apr 3, 2018

aduth commented Sep 13, 2018

milesdelliott commented Sep 13, 2018

aduth commented Sep 18, 2018

milesdelliott commented Sep 18, 2018 •

edited

Loading

aduth commented Sep 18, 2018

aduth Sep 18, 2018

milesdelliott Sep 18, 2018

aduth commented Sep 18, 2018

milesdelliott commented Sep 18, 2018

aduth left a comment

milesdelliott commented Sep 19, 2018

aduth commented Sep 19, 2018

aduth commented Sep 24, 2018

milesdelliott commented Sep 24, 2018

Pass tab object to tab-panel child function #5476

Pass tab object to tab-panel child function #5476

Conversation

milesdelliott commented Mar 7, 2018

Description

How Has This Been Tested?

Screenshots (jpeg or gifs if applicable):

Types of changes

Checklist:

aduth left a comment

Choose a reason for hiding this comment

milesdelliott commented Mar 22, 2018

aduth left a comment

Choose a reason for hiding this comment

aduth Apr 3, 2018

Choose a reason for hiding this comment

aduth commented Sep 13, 2018

milesdelliott commented Sep 13, 2018

aduth commented Sep 18, 2018

milesdelliott commented Sep 18, 2018 • edited Loading

aduth commented Sep 18, 2018

aduth Sep 18, 2018

Choose a reason for hiding this comment

milesdelliott Sep 18, 2018

Choose a reason for hiding this comment

aduth commented Sep 18, 2018

milesdelliott commented Sep 18, 2018

aduth left a comment

Choose a reason for hiding this comment

milesdelliott commented Sep 19, 2018

aduth commented Sep 19, 2018

aduth commented Sep 24, 2018

milesdelliott commented Sep 24, 2018

milesdelliott commented Sep 18, 2018 •

edited

Loading