Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move EuiBasicTable's itemId prop out of selection into a top-level prop #830

Merged
merged 9 commits into from
May 16, 2018

Conversation

chandlerprall
Copy link
Contributor

Fixes #820 by refactoring EuiBasicTable's selection.itemId prop into a top-level prop on the table itself. This decouples IDs from selection itself, as the IDs are also used for expanding rows. This is a breaking change that will need some coordination.

Copy link
Contributor

@cjcenizal cjcenizal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚔️ Looks good! One nit about the changelog formatting.

CHANGELOG.md Outdated
@@ -14,6 +14,10 @@
- Made boolean matching in `EuiSearchBar` more exact so it doesn't match words starting with booleans, like "truest" or "offer" ([#776](https://github.com/elastic/eui/pull/776))
- `EuiComboBox` do not setState or call refs once component is unmounted ([807](https://github.com/elastic/eui/pull/807) and [#813](https://github.com/elastic/eui/pull/813))

**Breaking changes**

- Move `EuiBasicTable`'s `itemId` prop from `selection` to a top-level property [#830](https://github.com/elastic/eui/pull/830)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: the link should be wrapped in parentheses to match the others

@nreese
Copy link
Contributor

nreese commented May 15, 2018

Changes look good but I don't think this fixes the linked issue.

While on this branch and messing around with the Expanding rows demos, expanding on a row displays the following

screen shot 2018-05-14 at 8 20 28 pm

Then sorting by name displays the following - which is not what I had expected since another row is expanded.

screen shot 2018-05-14 at 8 20 41 pm

@cjcenizal
Copy link
Contributor

@nreese Hmm something weird is going on. I can't repro your UX bug on this branch. In fact, I can't repro it on master either. Not sure how this is happening for you but not for me.

@chandlerprall
Copy link
Contributor Author

Ah, I didn't update the docs example to fix. I'll also add a proptype to check/warn for this errant combination of props.

@chandlerprall
Copy link
Contributor Author

Actually, I cannot reproduce what you're seeing either @nreese

Still adding that proptype validation.

@chandlerprall
Copy link
Contributor Author

@cjcenizal @nreese added withRequiredProp prop type, instrumented EuiBasicTable, and cleaned up some related tests.

@snide this changes the aria label prop validator to a more generic validator, but keeps the messaging

@chandlerprall chandlerprall requested a review from snide May 15, 2018 17:23
/**
* Aria label applied to the onClick button
*/
onClickAriaLabel: EuiPropTypes.requiresAriaLabel('onClick'),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did onClickAriaLabel prop get deleted? Looks like it is still being used.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a bad Cmd+X operation

Copy link
Contributor

@cjcenizal cjcenizal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! I had a few really nitty comments and found a couple typos.

iconOnClick: EuiPropTypes.withRequiredProp(
PropTypes.func,
'iconOnClickAriaLabel',
'Please provide an aria label to compliment your iconOnClick'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo: "compliment" -> "complement", here and below.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we also change "aria label" to "aria-label" to be more specific about the prop's name?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The prop it's expecting is iconOnClickAriaLabel, not specifically aria-label. The full warning in the console is

Warning: Failed prop type: Property "iconOnClick" was passed without corresponding property "iconOnClickAriaLabel"; Please provide an aria label to complement your iconOnClick
in EuiBadge
in Unknown

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha! That makes sense, thanks.

columns: PropTypes.arrayOf(ColumnType).isRequired,
pagination: PaginationType,
sorting: SortingType,
selection: SelectionType,
selection: withRequiredProp(SelectionType, 'itemId', 'see https://github.com/elastic/eui/pull/830'),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe instead of directing devs to the PR, it would be friendlier to have a message, e.g. "Selection of rows uses the itemId prop to identify each row"

onChange: PropTypes.func,
error: PropTypes.string,
loading: PropTypes.bool,
noItemsMessage: PropTypes.node,
className: PropTypes.string,
compressed: PropTypes.bool,
itemIdToExpandedRowMap: withRequiredProp(PropTypes.object, 'itemId', 'see https://github.com/elastic/eui/pull/830')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same idea here, e.g. "Expansion of rows uses the itemId prop to identify each row"

Copy link
Contributor

@nreese nreese left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@chandlerprall chandlerprall merged commit 5e06ca1 into elastic:master May 16, 2018
@chandlerprall chandlerprall deleted the bug/820-table-ids branch May 16, 2018 14:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants