-
Notifications
You must be signed in to change notification settings - Fork 2
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
Conversation
There was a problem hiding this 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>
上面就顯得蠻累贅
或者如果只有單個地方要埋就給單個 |
覺得可以整理一下可能的情境,我們 Tech meeting 一起討論一下 |
98a71ed
to
e4ace99
Compare
@@ -100,10 +100,11 @@ class StatusIcon extends PureComponent { | |||
} | |||
|
|||
render() { | |||
const rootClassName = ROOT_BEM.modifier(this.props.position); | |||
const { status, position, ...wrapperProps } = this.props; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
packages/core/src/StatusIcon.js
Outdated
@@ -119,7 +120,7 @@ class StatusIcon extends PureComponent { | |||
break; | |||
} | |||
|
|||
return (icon && <span className={rootClassName}>{icon}</span>); | |||
return (icon && <span className={rootClassName} {...wrapperProps}>{icon}</span>); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
return (icon && <span className={rootClassName} {...wrapperProps}>{icon}</span>); | |
return (icon && ( | |
<span className={rootClassName} {...wrapperProps}> | |
{icon} | |
</span> | |
)); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
6cc9d31
to
a2daa7f
Compare
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