test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 20:19:44 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

fix: rtl issue in breadcrumb (#21054)

Browse Source 
* fix: rtl issue in breadcrumb

* update snapshots

* resolve ci
This commit is contained in:
Saeed Rahimi 2020-01-21 17:31:53 +03:30 committed by 偏右
parent 6378d16e19
commit 0dd9d44229
3 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/breadcrumb/Breadcrumb.tsx
View File

@ -119,7 +119,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
});
};
renderBreadcrumb = ({ getPrefixCls }: ConfigConsumerProps) => {
renderBreadcrumb = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
let crumbs;
const {
prefixCls: customizePrefixCls,
@ -154,9 +154,12 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
});
});
}
const breadcrumbClassName = classNames(className, prefixCls, {
[`${prefixCls}-rtl`]: direction === 'rtl',
});
return (
<div
className={classNames(className, prefixCls)}
className={breadcrumbClassName}
style={style}
{...omit(restProps, ['itemRender', 'linkRender', 'nameRender', 'params'])}
>

2
components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
View File

@ -34,7 +34,7 @@ exports[`Breadcrumb filter React.Fragment 1`] = `
exports[`Breadcrumb rtl render component should be rendered correctly in RTL direction 1`] = `
<div
class="ant-breadcrumb"
class="ant-breadcrumb ant-breadcrumb-rtl"
/>
`;

18
components/breadcrumb/style/index.less
View File

@ -9,6 +9,14 @@
color: @breadcrumb-base-color;
font-size: @breadcrumb-font-size;
&-rtl {
direction: rtl;
> span {
float: right;
}
}
.@{iconfont-css-prefix} {
font-size: @breadcrumb-icon-font-size;
}
@ -40,12 +48,22 @@
&-link {
> .@{iconfont-css-prefix} + span {
margin-left: 4px;
.@{breadcrumb-prefix-cls}-rtl & {
margin-right: 4px;
margin-left: 0;
}
}
}
&-overlay-link {
> .@{iconfont-css-prefix} {
margin-left: 4px;
.@{breadcrumb-prefix-cls}-rtl & {
margin-right: 4px;
margin-left: 0;
}
}
}
}