[RFC] Semantic DOM Structure with classNames or styles #51885

thinkasany · 2024-12-04T03:55:05Z

thinkasany
Dec 4, 2024
Collaborator

Related issues

feat: ConfigProvider support tooltip
[RFC] Semantic DOM Structure for all Components
ConfigProvider support component className and style

Basic structure order

section
- header
  - title
  - extra
- body
  - content
- footer

Semantic DOM

✅可以使用
🔒特殊组件使用
⚠️不推荐使用，理论上不再新增
🚫废弃，勿用
🎨 新加入，待讨论的

	Name	Description	Components
✅	actions	A group of action button in the component	Card, List
✅	body	Card-like component body part which includes the padding.	Card, Collapse, Drawer, Modal, Tooltip, Popup, Popconfirm
⚠️	content	The render wrap of full card. Not the good name in current case	Drawer, Modal
✅	content	The content under body without padding. Some of component has this layer.	Descriptions
⚠️	count	Count number node wrapper	Input
✅	cover	A mask or large image display part	Card
✅	extra	The component on the logical position end. If Card-like component, always in the `header`	Card, List
✅	footer	Card-like component footer part which includes the padding.	Drawer, Modal
✅	handle	Grab-able sub component	Slider
✅	header	Card-like component header part which includes the padding.	Card, Collapse, Drawer, Modal
✅	icon	When component has only one Icon. Set on the Icon node wrapper.	Button
✅	indicator	Tiny element with fixed position but not provide fully content display.	Badge
⚠️	input	Input component only. The inner native input element.	Input
⚠️	item	Sub item component	Space
✅	label	When using key value pair. The label part.	Descriptions
✅	mask	The cover mask in full screen	Drawer, Modal
✅	prefix	Input like component prefix node	Input
⚠️	rail	Slider component only. The rail of the full size	Slider
✅	root	The wrap component which not have the real dom but must to use some side effect to handle it.	All
✅	suffix	Input like component suffix node	Input
⚠️	textarea	Input component only. The textarea native input element.	Input.TextArea
⚠️	track	Slider component only. The track element between handle and handle	Slider
⚠️	tracks	Slider component only. The tracks element between first handle and last handle	Slider
✅	title	The node not include with padding. If Card-like component, always in the `header`	Card
⚠️	wrapper	Bad naming. Not to use	Modal
🎨		Let's discuss : )

discussion

希望能在这篇 rfc 中敲定最终的 api 命名。

#51872 (comment)

arvinxx · 2024-12-04T04:10:02Z

arvinxx
Dec 4, 2024
Maintainer

root 和 inner 分别指代啥？语义不是特别清晰。root 还好， inner 这个词，第一眼是看不懂的。

2 replies

thinkasany Dec 4, 2024
Collaborator Author

content 已经被使用了 position: relative, 这个 inner 的话是根据以前 overlayInnerStyle 简化改造而来，需要这个属性去更改 radius 这些常见的修改。https://github.com/react-component/tooltip/blob/master/src/Popup.tsx#L21

当然希望大家能给出更好的语义化名词建议。

zombieJ Dec 4, 2024
Maintainer

个人看 content 其实不应给 Drawer Modal 的外容器，这个语义有歧义。感觉他们应该起一个新名字。然后 content 还给 body 内部元素

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RFC] Semantic DOM Structure with classNames or styles #51885

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

[RFC] Semantic DOM Structure with classNames or styles #51885

thinkasany Dec 4, 2024 Collaborator

Related issues

Basic structure order

Semantic DOM

discussion

Replies: 1 comment · 2 replies

arvinxx Dec 4, 2024 Maintainer

thinkasany Dec 4, 2024 Collaborator Author

zombieJ Dec 4, 2024 Maintainer

thinkasany
Dec 4, 2024
Collaborator

Replies: 1 comment 2 replies

arvinxx
Dec 4, 2024
Maintainer

thinkasany Dec 4, 2024
Collaborator Author

zombieJ Dec 4, 2024
Maintainer