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

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

🤔 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

@ant-design-bot
Copy link
Contributor

@ant-design-bot ant-design-bot commented Mar 24, 2020

@shaodahong
Copy link
Member

@shaodahong shaodahong commented Mar 24, 2020

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

@afc163
Copy link
Member Author

@afc163 afc163 commented Mar 24, 2020

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

@codesandbox-ci
Copy link

@codesandbox-ci codesandbox-ci bot commented Mar 24, 2020

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 shaodahong commented Mar 24, 2020

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

#15892

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

@afc163
Copy link
Member Author

@afc163 afc163 commented Mar 24, 2020

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

@shaodahong
Copy link
Member

@shaodahong shaodahong commented Mar 24, 2020

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

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

@AshoneA
Copy link
Contributor

@AshoneA AshoneA commented Mar 24, 2020

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

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

@raghavauppuluri13 raghavauppuluri13 commented Apr 11, 2020

Any updates on when this will be implemented?

@afc163 afc163 deleted the style-link-button-bg branch Apr 14, 2020
@afc163 afc163 restored the style-link-button-bg branch Apr 18, 2020
@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 Apr 18, 2020
@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 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 codecov bot commented Apr 18, 2020

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 afc163 commented Apr 23, 2020

还有

image

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

image

@shangguanhongzhou
Copy link

@shangguanhongzhou shangguanhongzhou commented Apr 23, 2020

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

image

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

@afc163
Copy link
Member Author

@afc163 afc163 commented Apr 23, 2020

图标按钮 在表格中有用到

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

@afc163
Copy link
Member Author

@afc163 afc163 commented Apr 26, 2020

image

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

@zombieJ
Copy link
Member

@zombieJ zombieJ commented Apr 29, 2020

我再去 ping 一下设计师

@shangguanhongzhou
Copy link

@shangguanhongzhou shangguanhongzhou commented May 6, 2020

image

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

OK, 好的!

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

@morenyang morenyang commented May 31, 2020

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

image

@afc163
Copy link
Member Author

@afc163 afc163 commented May 31, 2020

PR welcome~

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.

None yet