📝 [RFC] Support closable prop in closable component

[kiner-tang]

Summary

Support pass null and false into closeIcon to hide close icon in closable component.
Remove the documentation description of "closable" as this usage is no longer recommended and 'closeIcon' is recommended instead.

Motivation

As #42736 mentioned.

At present, there are many closable components, support the custom close button configured by closeIcon, and support the closable property to control whether the close button is displayed. This design is somewhat redundant. We can do exactly the same thing by setting closeIcon to null or false.

Here is a list of components we need to optimize:

• Notification refactor(Notification): notification support hidden close button when closeIcon setting to null or false #42927
• Alert refactor(Alert): refactor closeIcon #42962
• Drawer refactor(Drawer): refactor drawer closeIcon #42993
• Modal refactor(Modal): refactor closeIcon #43017
• Tabs refactor(Tabs): refactor closeIcon #43098
• Tag refactor(Tag): refactor closeIcon #43109

All of closable components should be optimized as follows:
closeIcon support pass null and boolean to control whether the close button is displayed. And remove the document about closable if existed.

In addition to the above uniform optimizations, each component may need to do some additional optimizations if needed:

• Alert: deprecated closeText and use closeIcon instead.

API

Type: closeIcon: boolean | React.ReactNode

Basic Example

// Notification
notification.open({
  message: 'Notification Title',
  description:
  'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  onClick: () => {
    console.log('Notification Clicked!');
  },
  closeIcon: false,
});

Detailed Design

In all of the components mentioned above, the closeIcon will not render when pass false or null into closeIcon prop. Otherwise, the closeIcon will be render by pass custom config:

<Alert
  message="Error Text"
  description="Error Description Error Description Error Description Error Description Error Description Error Description"
  type="error"
  closeIcon=‘close’
/>

About v4.x

Since v4.x no longer accepts new features, if you want to hide the notification close button in v4.x, you can do so by following the link below: https://codesandbox.io/s/ji-ben-antd-5-5-2-forked-itr47d?file=/index.css.

[MadCcc]

FloatButton 没有 closable 吧

[kiner-tang]

这边是支持配置 closeIcon 的，我之前也在犹豫，这个要不要也加 closable,所以先写上，到时候讨论一下

[MadCcc]

FloatButton 先去掉吧，API 含义不一样，不需要多一个新的 API

[kiner-tang]

好

[afc163]

closeIcon 应该收到 closable={{ closeIcon }} 里去。

[kiner-tang]

那我再梳理一下所有有 closeIcon 的组件，这次顺便把所有有 closeIcon 的都一起改一下

[kiner-tang]

Api 改成这样如何：closable: boolean | { closeIcon?: React.ReactNode, closeText?: React.ReactNode }

[afc163]

+1

[MadCcc]

closable: boolean | { icon?: React.ReactNode, text?: React.ReactNode } 简洁点？

[afc163]

closeIcon 好点，万一还有 confirmIcon 和 cancelIcon 等别的语义的类似属性。

[MadCcc]

文档中隐藏 closable, closeIcon 支持 null（看原本逻辑） 和 false 隐藏，剩余 API 不变