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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: CP support Tabs addIcon & moreIcon #47274

Merged
merged 7 commits into from
Feb 1, 2024
Merged

feat: CP support Tabs addIcon & moreIcon #47274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
506d4a1
feat: CP support Tabs addIcon & moreIcon
li-jia-nan Feb 1, 2024
70e32e2
fix: fix
li-jia-nan Feb 1, 2024
bfbfbee
fix: fix
li-jia-nan Feb 1, 2024
af2245b
Merge branch 'feature' into tabs-cp-icon
li-jia-nan Feb 1, 2024
129a858
Merge branch 'feature' into tabs-cp-icon
li-jia-nan Feb 1, 2024
b57a0ee
fix: fix
li-jia-nan Feb 1, 2024
6c8e83f
Merge branch 'tabs-cp-icon' of github.com:ant-design/ant-design into …
li-jia-nan Feb 1, 2024
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
15 changes: 12 additions & 3 deletions components/config-provider/__tests__/style.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1041,15 +1041,24 @@ describe('ConfigProvider support style and className props', () => {
expect(head).toHaveStyle({ color: 'red' });
});

it('Should Tabs className & style works', () => {
it('Should Tabs className & style & addIcon & moreIcon works', () => {
const { container } = render(
<ConfigProvider tabs={{ className: 'cp-tabs', style: { backgroundColor: 'red' } }}>
<Tabs />
<ConfigProvider
tabs={{
className: 'cp-tabs',
style: { backgroundColor: 'red' },
addIcon: <span className="cp-test-addIcon">cp-test-addIcon</span>,
moreIcon: <span className="cp-test-moreIcon">cp-test-moreIcon</span>,
}}
>
<Tabs items={[]} type="editable-card" />
</ConfigProvider>,
);
const element = container.querySelector<HTMLDivElement>('.ant-tabs');
expect(element).toHaveClass('cp-tabs');
expect(element).toHaveStyle({ backgroundColor: 'red' });
expect(element?.querySelector<HTMLSpanElement>('.cp-test-addIcon')).toBeTruthy();
expect(element?.querySelector<HTMLSpanElement>('.cp-test-moreIcon')).toBeTruthy();
});

it('Should TimePicker className works', () => {
Expand Down
5 changes: 4 additions & 1 deletion components/config-provider/context.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,9 @@ export type TourConfig = Pick<TourProps, 'closeIcon'>;
export type ModalConfig = ComponentStyleConfig &
Pick<ModalProps, 'classNames' | 'styles' | 'closeIcon'>;

export type TabsConfig = ComponentStyleConfig &
Pick<TabsProps, 'indicator' | 'indicatorSize' | 'moreIcon' | 'addIcon'>;

export type AlertConfig = ComponentStyleConfig & Pick<AlertProps, 'closeIcon'>;

export type BadgeConfig = ComponentStyleConfig & Pick<BadgeProps, 'classNames' | 'styles'>;
Expand Down Expand Up @@ -172,7 +175,7 @@ export interface ConfigConsumerProps {
tag?: TagConfig;
table?: TableConfig;
card?: CardConfig;
tabs?: ComponentStyleConfig & Pick<TabsProps, 'indicator' | 'indicatorSize'>;
tabs?: TabsConfig;
timeline?: ComponentStyleConfig;
timePicker?: ComponentStyleConfig;
tour?: TourConfig;
Expand Down
2 changes: 1 addition & 1 deletion components/config-provider/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ const {
| statistic | Set Statistic common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| table | Set Table common props | { className?: string, style?: React.CSSProperties, expandable?: { expandIcon?: props => React.ReactNode } } | - | 5.7.0, expandable: 5.14.0 |
| tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }} | - | 5.7.0 |
| tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }, moreIcon?: ReactNode, addIcon?: ReactNode } | - | 5.7.0, `moreIcon` and `addIcon`: 5.14.0 |
| tag | Set Tag common props | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, closeIcon: 5.14.0 |
| timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
Expand Down
4 changes: 2 additions & 2 deletions components/config-provider/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import defaultLocale from '../locale/en_US';
import type { PaginationProps } from '../pagination';
import type { SelectProps } from '../select';
import type { SpaceProps } from '../space';
import type { TabsProps } from '../tabs';
import { defaultTheme, DesignTokenContext } from '../theme/context';
import defaultSeedToken from '../theme/themes/seed';
import type {
Expand All @@ -36,6 +35,7 @@ import type {
NotificationConfig,
PopupOverflow,
TableConfig,
TabsConfig,
TagConfig,
Theme,
ThemeConfig,
Expand Down Expand Up @@ -173,7 +173,7 @@ export interface ConfigProviderProps {
tag?: TagConfig;
table?: TableConfig;
card?: CardConfig;
tabs?: ComponentStyleConfig & Pick<TabsProps, 'indicator' | 'indicatorSize'>;
tabs?: TabsConfig;
timeline?: ComponentStyleConfig;
timePicker?: ComponentStyleConfig;
upload?: ComponentStyleConfig;
Expand Down
2 changes: 1 addition & 1 deletion components/config-provider/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ const {
| statistic | 设置 Statistic 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties, expandable?: { expandIcon?: props => React.ReactNode } } | - | 5.7.0, expandable: 5.14.0 |
| tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }} | - | 5.7.0 |
| tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }, moreIcon?: ReactNode, addIcon?: ReactNode } | - | 5.7.0, `moreIcon` and `addIcon`: 5.14.0 |
| tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, closeIcon: 5.14.0 |
| timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
Expand Down
7 changes: 4 additions & 3 deletions components/tabs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
hideAdd,
centered,
addIcon,
moreIcon,
popupClassName,
children,
items,
Expand All @@ -56,7 +57,7 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
indicator,
...otherProps
} = props;
const { prefixCls: customizePrefixCls, moreIcon = <EllipsisOutlined /> } = otherProps;
const { prefixCls: customizePrefixCls } = otherProps;
const { direction, tabs, getPrefixCls, getPopupContainer } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('tabs', customizePrefixCls);
const rootCls = useCSSVarCls(prefixCls);
Expand All @@ -69,7 +70,7 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
onEdit?.(editType === 'add' ? event : key!, editType);
},
removeIcon: <CloseOutlined />,
addIcon: addIcon || <PlusOutlined />,
addIcon: (addIcon ?? tabs?.addIcon) || <PlusOutlined />,
showAdd: hideAdd !== true,
};
}
Expand Down Expand Up @@ -128,7 +129,7 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
popupClassName={classNames(popupClassName, hashId, cssVarCls, rootCls)}
style={mergedStyle}
editable={editable}
moreIcon={moreIcon}
moreIcon={moreIcon ?? tabs?.moreIcon ?? <EllipsisOutlined />}
prefixCls={prefixCls}
animated={mergedAnimated}
indicator={mergedIndicator}
Expand Down