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.

Sign up for GitHub

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

Jump to bottom

feat: 💄 Add text type Button #22552

Merged
merged 7 commits into from
May 6, 2020
Merged

feat: 💄 Add text type Button #22552

merged 7 commits into from
May 6, 2020

Conversation

afc163
Copy link
Member

@afc163 afc163 commented Mar 24, 2020 •
edited
Loading

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / document update
  • Component style update
  • TypeScript definition update
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

💡 Background and solution

same as http://overdrive.autoguru.io/?path=/story/components-actions--standard

新增一个 text 类型按钮：

image

<Button type="text">Text Button<Button/>

同时增加一个反馈效果，标识出响应区域。

📝 Changelog

Language Changelog
🇺🇸 English New type="text" Button.
🇨🇳 Chinese 新增文本类型按钮 <Button type="text" />。

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

@afc163 afc163 requested a review from ycjcl868 March 24, 2020 06:01
@ant-design-bot
Copy link
Contributor

ant-design-bot commented Mar 24, 2020 •
edited
Loading

@shaodahong
Copy link
Member

shaodahong commented Mar 24, 2020 •
edited
Loading

可以加个变量，但是不建议默认是有背景的，区别还是很大的，有些用户 link 当作 a 来用，有了背景会觉得很奇怪

@afc163
Copy link
Member Author

afc163 commented Mar 24, 2020 •
edited
Loading

这个 padding 的背景（鼠标手型的点击区域）其实一直存在，也会占据空间，其实和链接还是有区别。

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 24, 2020 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9572869:

Sandbox Source
antd reproduction template Configuration

@shaodahong
Copy link
Member

shaodahong commented Mar 24, 2020 •
edited
Loading

特地去翻了下当初加 link 的初衷

#15892

如果有了背景，又回到 Button 的原点

@afc163
Copy link
Member Author

afc163 commented Mar 24, 2020

现在的实现是 hover 才有背景，默认还是一样的。

@shaodahong
Copy link
Member

现在的实现是 hover 才有背景，默认还是一样的。

不一样，风格不一样，我个人看法是加个 less 变量默认还是保持现在的风格，或者加个 type="text" 类型的 Button

@AshoneA
Copy link
Contributor

AshoneA commented Mar 24, 2020 •
edited
Loading

其实我觉得 hover 的时候鼠标手势的变化和文字颜色变淡已经暗示这里是可点击区域了。

@afc163 afc163 closed this Apr 9, 2020
@raghavauppuluri13
Copy link

Any updates on when this will be implemented?

@afc163 afc163 deleted the style-link-button-bg branch April 14, 2020 10:44
@afc163 afc163 restored the style-link-button-bg branch April 18, 2020 12:27
@afc163 afc163 reopened this Apr 18, 2020
@afc163 afc163 changed the title style: 💄 Add hover background for link button feature: 💄 Add text type Button Apr 18, 2020
@afc163 afc163 changed the title feature: 💄 Add text type Button [WIP] feature: 💄 Add text type Button Apr 18, 2020
@afc163 afc163 force-pushed the style-link-button-bg branch 2 times, most recently from 6800e67 to f0d7a95 Compare April 18, 2020 14:30
@afc163 afc163 changed the title [WIP] feature: 💄 Add text type Button feature: 💄 Add text type Button Apr 18, 2020
@afc163
Copy link
Member Author

afc163 commented Apr 18, 2020

改为新增一个 text 类型按钮。

@afc163 afc163 changed the title feature: 💄 Add text type Button feat: 💄 Add text type Button Apr 18, 2020
@codecov
Copy link

codecov bot commented Apr 18, 2020 •
edited
Loading

Codecov Report

Merging #22552 into feature will not change coverage.
The diff coverage is 100.00%.

Impacted file tree graph

@@           Coverage Diff            @@
##           feature   #22552   +/-   ##
========================================
  Coverage    98.53%   98.53%           
========================================
  Files          364      364           
  Lines         7255     7255           
  Branches      1972     2021   +49     
========================================
  Hits          7149     7149           
  Misses         106      106
Impacted Files Coverage Δ
components/button/button.tsx 100.00% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update bb1f157...9572869. Read the comment docs.

@afc163
Copy link
Member Author

afc163 commented Apr 23, 2020

还有

image

还有最下面的无边框非链接色的图标按钮，现在也是没有对应实现的。

image

@shangguanhongzhou
Copy link

还有最下面的无边框非链接色的图标按钮，现在也是没有对应实现的。

image

图标按钮 在表格中有用到
image

@afc163
Copy link
Member Author

afc163 commented Apr 23, 2020 •
edited
Loading

图标按钮 在表格中有用到

antd 按钮里没有对应实现的，用现在这个 type text 按钮就能轻松实现了。

@afc163
Copy link
Member Author

afc163 commented Apr 26, 2020 •
edited
Loading

image

这是 linke 里的用法，交互比这个 PR 更进一步，hover 就带有背景色。如果我们不落规范，这种其实算魔改。

@zombieJ
Copy link
Member

zombieJ commented Apr 29, 2020

我再去 ping 一下设计师

@shangguanhongzhou
Copy link

shangguanhongzhou commented May 6, 2020 •
edited
Loading

image

这是 linke 里的用法，交互比这个 PR 更进一步，hover 就带有背景色。如果我们不落规范，这种其实算魔改。

OK， 好的！

@zombieJ zombieJ merged commit c5bcf57 into feature May 6, 2020
@zombieJ zombieJ deleted the style-link-button-bg branch May 6, 2020 02:15
@zombieJ zombieJ mentioned this pull request May 31, 2020
Merged
13 tasks
@morenyang
Copy link
Contributor

morenyang commented May 31, 2020 •
edited
Loading

@afc163 I think the border should not display when type=text and danger=true

image

@afc163
Copy link
Member Author

afc163 commented May 31, 2020

PR welcome~

@afc163 afc163 mentioned this pull request May 31, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@abenhamdine abenhamdine abenhamdine requested changes

@yoyo837 yoyo837 yoyo837 approved these changes

@hengkx hengkx hengkx approved these changes

@AshoneA AshoneA AshoneA approved these changes

@ycjcl868 ycjcl868 Awaiting requested review from ycjcl868

@shaodahong shaodahong Awaiting requested review from shaodahong

@chenshuai2144 chenshuai2144 Awaiting requested review from chenshuai2144

@zombieJ zombieJ Awaiting requested review from zombieJ

Assignees

@ztplz ztplz

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.