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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

className prop ordering #26602

Merged
merged 2 commits into from
Sep 6, 2020
Merged

className prop ordering #26602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2595b17
Merge pull request #1 from ant-design/master
x1mrdonut1x Sep 4, 2020
0c3dc16
feat: closes #26594
x1mrdonut1x Sep 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 7 additions & 3 deletions components/anchor/Anchor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,9 +286,13 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
visible: activeLink,
});

const wrapperClass = classNames(className, `${prefixCls}-wrapper`, {
[`${prefixCls}-rtl`]: direction === 'rtl',
});
const wrapperClass = classNames(
`${prefixCls}-wrapper`,
{
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
);

const anchorClass = classNames(prefixCls, {
fixed: !affix && !showInkInFixed,
Expand Down
10 changes: 7 additions & 3 deletions components/anchor/AnchorLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,13 @@ class AnchorLink extends React.Component<AnchorLinkProps, any, AntAnchor> {
const { prefixCls: customizePrefixCls, href, title, children, className, target } = this.props;
const prefixCls = getPrefixCls('anchor', customizePrefixCls);
const active = this.context.activeLink === href;
const wrapperClassName = classNames(className, `${prefixCls}-link`, {
[`${prefixCls}-link-active`]: active,
});
const wrapperClassName = classNames(
`${prefixCls}-link`,
{
[`${prefixCls}-link-active`]: active,
},
className,
);
const titleClassName = classNames(`${prefixCls}-link-title`, {
[`${prefixCls}-link-title-active`]: active,
});
Expand Down
14 changes: 7 additions & 7 deletions components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
class="ant-select-selection-search"
>
<span
class="ant-input-search ant-select-selection-search-input ant-input-affix-wrapper ant-input-affix-wrapper-lg"
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-search ant-select-selection-search-input"
>
<input
aria-activedescendant="undefined_list_0"
Expand Down Expand Up @@ -448,7 +448,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-select-selection-search"
>
<span
class="ant-select-selection-search-input ant-input-affix-wrapper"
class="ant-input-affix-wrapper ant-select-selection-search-input"
>
<input
aria-activedescendant="undefined_list_0"
Expand Down Expand Up @@ -590,7 +590,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-select-selection-search"
>
<span
class="ant-select-selection-search-input ant-input-affix-wrapper"
class="ant-input-affix-wrapper ant-select-selection-search-input"
>
<input
aria-activedescendant="undefined_list_0"
Expand Down Expand Up @@ -733,7 +733,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-select-selection-search"
>
<span
class="ant-input-search ant-select-selection-search-input ant-input-affix-wrapper"
class="ant-input-affix-wrapper ant-input-search ant-select-selection-search-input"
>
<input
aria-activedescendant="undefined_list_0"
Expand Down Expand Up @@ -877,7 +877,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-select-selection-search"
>
<span
class="ant-input-search ant-select-selection-search-input ant-input-affix-wrapper"
class="ant-input-affix-wrapper ant-input-search ant-select-selection-search-input"
>
<input
aria-activedescendant="undefined_list_0"
Expand Down Expand Up @@ -1037,7 +1037,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
class="ant-select-selection-search"
>
<span
class="ant-input-search ant-select-selection-search-input ant-input-search-enter-button ant-input-search-large ant-input-group-wrapper ant-input-group-wrapper-lg"
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-enter-button ant-input-search-large ant-select-selection-search-input"
>
<span
class="ant-input-wrapper ant-input-group"
Expand All @@ -1059,7 +1059,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
class="ant-input-group-addon"
>
<button
class="ant-btn ant-input-search-button ant-btn-primary ant-btn-lg"
class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button"
type="button"
>
<span
Expand Down
2 changes: 1 addition & 1 deletion components/auto-complete/__tests__/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ exports[`AutoComplete legacy dataSource should accept react element option 1`] =

exports[`AutoComplete rtl render component should be rendered correctly in RTL direction 1`] = `
<div
class="ant-select ant-select-auto-complete ant-select-rtl ant-select-single ant-select-show-search"
class="ant-select ant-select-rtl ant-select-auto-complete ant-select-single ant-select-show-search"
>
<div
class="ant-select-selector"
Expand Down
2 changes: 1 addition & 1 deletion components/auto-complete/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ const AutoComplete: React.ForwardRefRenderFunction<Select, AutoCompleteProps> =
ref={selectRef as any}
{...omit(props, ['dataSource'])}
prefixCls={prefixCls}
className={classNames(className, `${prefixCls}-auto-complete`)}
className={classNames(`${prefixCls}-auto-complete`, className)}
mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE as any}
getInputElement={getInputElement}
>
Expand Down
15 changes: 10 additions & 5 deletions components/avatar/avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,11 +107,16 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
[`${prefixCls}-sm`]: size === 'small',
});

const classString = classNames(prefixCls, className, sizeCls, {
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-image`]: src && isImgExist,
[`${prefixCls}-icon`]: icon,
});
const classString = classNames(
prefixCls,
sizeCls,
{
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-image`]: src && isImgExist,
[`${prefixCls}-icon`]: icon,
},
className,
);

const sizeStyle: React.CSSProperties =
typeof size === 'number'
Expand Down
10 changes: 7 additions & 3 deletions components/back-top/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,13 @@ const BackTop: React.FC<BackTopProps> = props => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const { prefixCls: customizePrefixCls, className = '' } = props;
const prefixCls = getPrefixCls('back-top', customizePrefixCls);
const classString = classNames(prefixCls, className, {
[`${prefixCls}-rtl`]: direction === 'rtl',
});
const classString = classNames(
prefixCls,
{
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
);

// fix https://fb.me/react-unknown-prop
const divProps = omit(props, [
Expand Down
13 changes: 9 additions & 4 deletions components/badge/Ribbon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,15 @@ const Ribbon: React.FC<RibbonProps> = function Ribbon({
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
const colorInPreset = isPresetColor(color);
const ribbonCls = classNames(prefixCls, className, `${prefixCls}-placement-${placement}`, {
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-color-${color}`]: colorInPreset,
});
const ribbonCls = classNames(
prefixCls,
`${prefixCls}-placement-${placement}`,
{
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-color-${color}`]: colorInPreset,
},
className,
);
const colorStyle: React.CSSProperties = {};
const cornerColorStyle: React.CSSProperties = {};
if (color && !colorInPreset) {
Expand Down
4 changes: 2 additions & 2 deletions components/badge/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1318,7 +1318,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
</sup>
</span>
<span
class="site-badge-count-4 ant-badge ant-badge-not-a-wrapper"
class="ant-badge ant-badge-not-a-wrapper site-badge-count-4"
>
<sup
class="ant-scroll-number ant-badge-count"
Expand Down Expand Up @@ -1483,7 +1483,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
</sup>
</span>
<span
class="site-badge-count-109 ant-badge ant-badge-not-a-wrapper"
class="ant-badge ant-badge-not-a-wrapper site-badge-count-109"
>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
Expand Down
17 changes: 11 additions & 6 deletions components/badge/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,8 @@ const Badge: CompoundedComponent = ({
return displayCount as string | number | null;
};

const hasStatus = (): boolean => (status !== null && status !== undefined) || (color !== null && color !== undefined);
const hasStatus = (): boolean =>
(status !== null && status !== undefined) || (color !== null && color !== undefined);

const isZero = () => {
const numberedDisplayCount = getNumberedDisplayCount();
Expand Down Expand Up @@ -177,11 +178,15 @@ const Badge: CompoundedComponent = ({
statusStyle.background = color;
}

const badgeClassName = classNames(className, prefixCls, {
[`${prefixCls}-status`]: hasStatus(),
[`${prefixCls}-not-a-wrapper`]: !children,
[`${prefixCls}-rtl`]: direction === 'rtl',
});
const badgeClassName = classNames(
prefixCls,
{
[`${prefixCls}-status`]: hasStatus(),
[`${prefixCls}-not-a-wrapper`]: !children,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
);

// <Badge status="success" />
if (!children && hasStatus()) {
Expand Down
10 changes: 7 additions & 3 deletions components/breadcrumb/Breadcrumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,9 +135,13 @@ const Breadcrumb: BreadcrumbInterface = ({
});
}

const breadcrumbClassName = classNames(className, prefixCls, {
[`${prefixCls}-rtl`]: direction === 'rtl',
});
const breadcrumbClassName = classNames(
prefixCls,
{
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
);

return (
<div className={breadcrumbClassName} style={style} {...restProps}>
Expand Down
2 changes: 1 addition & 1 deletion components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ exports[`Breadcrumb should render a menu 1`] = `
</span>
<span>
<span
class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
>
<span
class="ant-breadcrumb-link"
Expand Down
2 changes: 1 addition & 1 deletion components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
</span>
<span>
<span
class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
>
<span
class="ant-breadcrumb-link"
Expand Down
28 changes: 16 additions & 12 deletions components/button/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,18 +233,22 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr

const iconType = innerLoading ? 'loading' : icon;

const classes = classNames(prefixCls, className, {
[`${prefixCls}-${type}`]: type,
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-${sizeCls}`]: sizeCls,
[`${prefixCls}-icon-only`]: !children && children !== 0 && iconType,
[`${prefixCls}-background-ghost`]: ghost && !isUnborderedButtonType(type),
[`${prefixCls}-loading`]: innerLoading,
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
[`${prefixCls}-block`]: block,
[`${prefixCls}-dangerous`]: !!danger,
[`${prefixCls}-rtl`]: direction === 'rtl',
});
const classes = classNames(
prefixCls,
{
[`${prefixCls}-${type}`]: type,
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-${sizeCls}`]: sizeCls,
[`${prefixCls}-icon-only`]: !children && children !== 0 && iconType,
[`${prefixCls}-background-ghost`]: ghost && !isUnborderedButtonType(type),
[`${prefixCls}-loading`]: innerLoading,
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
[`${prefixCls}-block`]: block,
[`${prefixCls}-dangerous`]: !!danger,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
);

const iconNode =
icon && !innerLoading ? (
Expand Down
6 changes: 3 additions & 3 deletions components/calendar/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -955,7 +955,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-picker-calendar-year-select ant-select-sm ant-select-single ant-select-show-arrow"
class="ant-select ant-select-sm ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
Expand Down Expand Up @@ -1015,7 +1015,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
</span>
</div>
<div
class="ant-select ant-picker-calendar-month-select ant-select-sm ant-select-single ant-select-show-arrow"
class="ant-select ant-select-sm ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
Expand Down Expand Up @@ -1964,7 +1964,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
style="padding-left:4px;padding-right:4px"
>
<div
class="ant-select my-year-select ant-select-sm ant-select-single ant-select-show-arrow"
class="ant-select ant-select-sm my-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
Expand Down
4 changes: 2 additions & 2 deletions components/calendar/__tests__/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -954,7 +954,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
class="ant-picker-calendar-header"
>
<div
class="ant-select ant-picker-calendar-year-select ant-select-rtl ant-select-single ant-select-show-arrow"
class="ant-select ant-select-rtl ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
Expand Down Expand Up @@ -1014,7 +1014,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
</span>
</div>
<div
class="ant-select ant-picker-calendar-month-select ant-select-rtl ant-select-single ant-select-show-arrow"
class="ant-select ant-select-rtl ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
Expand Down
14 changes: 9 additions & 5 deletions components/calendar/generateCalendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,11 +241,15 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
{(mergedLocale: any) => {
return (
<div
className={classNames(calendarPrefixCls, className, {
[`${calendarPrefixCls}-full`]: fullscreen,
[`${calendarPrefixCls}-mini`]: !fullscreen,
[`${calendarPrefixCls}-rtl`]: direction === 'rtl',
})}
className={classNames(
calendarPrefixCls,
{
[`${calendarPrefixCls}-full`]: fullscreen,
[`${calendarPrefixCls}-mini`]: !fullscreen,
[`${calendarPrefixCls}-rtl`]: direction === 'rtl',
},
className,
)}
style={style}
>
{headerRender ? (
Expand Down
4 changes: 2 additions & 2 deletions components/card/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -839,7 +839,7 @@ Array [
</div>
</div>
<div
class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large"
class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
>
<div
class="ant-tabs-nav"
Expand Down Expand Up @@ -962,7 +962,7 @@ Array [
class="ant-card-head-wrapper"
/>
<div
class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large"
class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
>
<div
class="ant-tabs-nav"
Expand Down