Basically, antd naming requires FULL NAME instead of Abbreviation.

• Initialize prop: default + PropName
• Force render: forceRender
  • Force render sub component: force + Sub Component Name + Render
• Sub Component Render: Sub Component Name + Render. e.g.

panelRender(originNode, info: { SubComponent1, SubComponent2, [somePassedProps]: someValue })

• Sub Item Render: Sub Item Name + Render. e.g.

cellRender(date, info: { [somePassedProps]: someValue })

• Data Source: dataSource
• Panel open: popup & dropdown open, additional popup popupName + Open like tooltipOpen
  • Do not use visible to make sure all the visible api align
• children:
  • Mainly display content. To avoid additional prop name.
  • Option list like Select.Option or Tree.TreeNode.
  • Customize wrapped component can consider use component prop if children may have other usage in future.
• Display related naming: show + PropName
• Functional: PropName + able
• Disable: disabled
  • sub component: disabled + Sub Component Name
• Extra: extra
  • sub component: Sub Component Name + extra. e.g. titleExtra
• mainly icon: icon
  • Merge with function first: functionName: { icon }. e.g. expandable: { icon: <Smile /> }
  • Multiple icons: FunctionName + Icon
• Trigger: trigger
  • Sub function trigger: Sub Function + Trigger
  • Trigger on the time point: xxx + On + EventName (e.g. destroyOnClose)
• Component use other component config. Naming as component.(e.g. <Table pagination={{...}} />)
• ClassName: className
  • Additional classes should be merged into classes (e.g. <Button classes={{ inner: 'custom-inner' }} />)
• Format
  • Not modify value when blur: preserveInvalidOnBlur

• Trigger event: on + EventName
  • Trigger sub component event: on + SubComponentName + EventName (e.g.onSearchChange)
  • Trigger prop event: on + PropName + EventName (e.g.onDragStart)
• Before trigger event: before + EventName
• After trigger event: after + EventName
• After continuous action, such as drag Slider: on + EventName + Complete

• placement: Not position
• Orientation: Not layout type direction

Component should have ref prop. Which should provide the structure:

ComponentRef {
  nativeElement: HTMLElement;
  // Other function
  focus: VoidFunction;
}

variant (optional) + semantic part + semantic part variant (optional) + css property + size/disabled (optional)

All component tokens should follow the structure above, and should not conflict with Global Token.

• variant means this token only works in certain variant, like horizontal borderless.
• semantic part means the typical element of component, like item header. If there's.
• semantic part status means the variant of the semantic part before it, like hover selected.
• css property means the exact property where the token is used, like fontSize width.

For example:

Note: If there's no semantic part for one component token, for example, the root borderRadius of Button, it is not suitable to add it. Because we could modify it easily with className and style.

ref: #16048

• When string type, the Default use ``.
• Can also list string optional values ​​in Type.
• When boolean type, the Default value is true or false.
• When number type, the Default value use numbers directly.
• When function type, use an arrow function expression in Type.
• No default value use - .
• Capitalize the first letter in Description apart from someProp.
• No period at the end of the Description.
• API order is arranged in alphabetical order, and can be put together under special circumstances (such as: xs sm md).

• type or mode:
  • When UI interactive change use type(e.g. Progress).
  • When same UI but functional diff, use mode(e.g. Select).

ref: #25066

For most component, there are the same shared structure. If not in the list, query for exist first:

• root (root is not as rootClassName,root only take effect on one dom not all the top dom)
  • cover/mask: Inline element using cover & absolute element use mask. Ref: Image cover or Modal mask
  • wrapper (optional, only use when must have this additional dom)
    • container (optional, use if dom has background, border, padding style)
      • section (optional, use first than wrapper. Not inculde user visible style but dom strcutre only)
        • header
          • title
        • body
          • content
        • footer

• root
  • icon (When not have prefix or suffix)
  • prefix
  • [input] (The special part of certain component, e.g. Input)
  • suffix

🚨 popup must be a object structure.

• popup
  • root
  • list (When Select like component)
  • item
  • itemIcon
  • itemTitle (All item semantic name should be flatten)

or

• popup
  • root
  • header
  • body
  • footer

<Image
  classNames={{
    root: 'my-root',
    image: 'my-image',
    cover: 'my-cover',
    popup: {
      root: 'my-popup-root',
      mask: 'my-popup-mask',
      body: 'my-popup-body',
      footer: 'my-popup-footer',
      actions: 'my-popup-actions',
    },
  }}
/>