refactor(components): add optional data id to Titled List component #6041
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
shlokamin
changed the title
14 tasks
shlokamin
changed the title
IanLondon
reviewed
Jul 2, 2020
components/src/lists/TitledList.js
Outdated
| @@ -13,6 +13,8 @@ export type TitledListProps = {| | |||
| iconName?: ?IconName, | |||
| /** props passed down to icon (`className` and `name` are ignored) */ | |||
| iconProps?: $Diff<React.ElementProps<typeof Icon>, { name: mixed }>, | |||
| /** optional ID for the container */ | |||
| dataId?: string, | |||
There was a problem hiding this comment.
so that we don't need to think about dataId vs data-id, could we make this prop data-id instead, mirroring the native element attr?
It would be a bit annoying in the component itself bc of the dash, so when destructuring props we'd have to do const {'data-id': dataId} = props instead of the simpler const {dataId} = props.
But the benefit is, when using/consuming these components, we can use the same prop as we'd use for a native element:
<div data-id="Something">
<Spam data-id="Spam" />
<div>instead of 2 different props for the same attr
<div data-id="Something">
<Spam dataId="Spam" />
<div>
There was a problem hiding this comment.
Agree. FWIW, this is the same convention as React: dash-case becomes camelCase except in the case of data and ARIA attributes
mcous
approved these changes
Jul 2, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
This PR partially addresses #5725 by adding an optional data-id to the container wrapping the
TitledListcomponent in component library. I also updated the relevant PD cypress test to use the new data-id as a selector.Changelog
TitledListcomponentReview requests
Code review
E2E tests still pass
Risk assessment
Low