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

[Feature] Allow passing remaining props to wrapper element to add attribute (e.g. test id) #267

Merged
merged 8 commits into from
May 19, 2020

Conversation

chenesan
Copy link
Contributor

@chenesan chenesan commented May 12, 2020

Purpose

修改了下列的 component,讓所有的 gypcrete component 都可以帶 props 到最外層的元素上,用於加 test id。例如 <List data-test-id="menu-item-list" />

  • <Modal>
  • <Section>
  • <SearchInput>
  • <StatusIcon>
  • <Tag>
  • <Text>
  • <TextEllipsis>
  • <SelectList>

Changes

Review Tips

有一些已經把 remaining props 放在內層元素上,所以沒有修改:

  • <TextInput>
    props 會傳到裡面的 <input>
  • <SelectOption>
    props 會傳到裡面的 <Checkbox>,外層的 <ListRow> 吃不到。
  • <ImageEditor>
    props 會傳到 react-avatar-editor 上面

一些 component 裡面的元素也許想要加 props 進去:

  • <Section>(即 <List>)
    裡面有 title 和 desc
  • <SearchInput>
    裡面有 search button 和 input
  • <StatusIcon>
    裡面有 <Icon>
  • <Switch>
    裡面有 checkbox input
  • <Text>
    裡面有 basic 和 aside
  • <SelectList>
    全選的 option 沒辦法傳 props 進去
  • <SelectRow>
    裡面的 <Text><Popover> 沒辦法傳 props 進去,<ListRow><SelectList> 已經有了
  • <SwitchRow>
    裡面的 <TextLabel> 沒辦法傳 props 進去
  • <ImageEditor>
    裡面的 control 沒辦法傳 props 進去。

想問問大家要不要再加;或是就先做到這邊,等和 QE 協作再看有沒有需求。個人覺得可以先額外開洞允許傳 props 到 button/input 上。

TODOs

  • Describe what should be done outside of this PR
  • Maybe in other PRs or some manual actions.

@chenesan chenesan self-assigned this May 12, 2020
@chenesan chenesan marked this pull request as ready for review May 13, 2020 03:14
Copy link
Contributor

@zhusee2 zhusee2 left a comment

Choose a reason for hiding this comment

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

我覺得這個 prop 格式用在 <ColumnView> 上面看起來蠻合理,但是用在 <Icon><Avatar> 上面就顯得蠻累贅

@chenesan
Copy link
Contributor Author

或者如果只有單個地方要埋就給單個 testId: string?

@kyoyadmoon
Copy link
Member

覺得可以整理一下可能的情境,我們 Tech meeting 一起討論一下

@chenesan chenesan closed this May 14, 2020
@chenesan chenesan force-pushed the feature/add-test-id-pt1 branch from 98a71ed to e4ace99 Compare May 14, 2020 08:37
@chenesan chenesan reopened this May 14, 2020
@chenesan chenesan requested review from benny0642 and zhusee2 May 14, 2020 10:26
@chenesan chenesan changed the title [Feature] Add data-testid (pt.1) [Feature] Allow passing remaining props to wrapper element to add attribute (e.g. test id) May 14, 2020
@@ -100,10 +100,11 @@ class StatusIcon extends PureComponent {
}

render() {
const rootClassName = ROOT_BEM.modifier(this.props.position);
const { status, position, ...wrapperProps } = this.props;
Copy link
Member

Choose a reason for hiding this comment

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

👍

@@ -119,7 +120,7 @@ class StatusIcon extends PureComponent {
break;
}

return (icon && <span className={rootClassName}>{icon}</span>);
return (icon && <span className={rootClassName} {...wrapperProps}>{icon}</span>);
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
return (icon && <span className={rootClassName} {...wrapperProps}>{icon}</span>);
return (icon && (
<span className={rootClassName} {...wrapperProps}>
{icon}
</span>
));

Copy link
Member

@kyoyadmoon kyoyadmoon left a comment

Choose a reason for hiding this comment

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

LGTM 👍

Copy link
Contributor

@zhusee2 zhusee2 left a comment

Choose a reason for hiding this comment

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

@chenesan chenesan force-pushed the feature/add-test-id-pt1 branch from 6cc9d31 to a2daa7f Compare May 19, 2020 06:24
@chenesan chenesan merged commit 2f897a3 into develop May 19, 2020
@chenesan chenesan deleted the feature/add-test-id-pt1 branch May 19, 2020 06:31
@chenesan chenesan mentioned this pull request Jul 1, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants