Skip to content

Commit

Permalink
fix: badge offset in rtl (#24724)
Browse files Browse the repository at this point in the history 
* fix: badge offset in rtl

* fix: update snap

* add test

* fix: offset

* fix: snap
  • Loading branch information
@xrkffgg
xrkffgg committed Jun 6, 2020
1 parent e361b30 commit 955fa52
Show file tree
Hide file tree
Showing 7 changed files with 393 additions and 22 deletions.
173 changes: 173 additions & 0 deletions components/badge/__tests__/__snapshots__/demo.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1497,6 +1497,179 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
</div>
`;

exports[`renders ./components/badge/demo/offset.md correctly 1`] = `
<span
class="ant-badge"
>
<a
class="head-example"
href="#"
/>
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
style="right:-10px;margin-top:10px"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
>
<p
class="ant-scroll-number-only-unit"
>
0
</p>
<p
class="ant-scroll-number-only-unit"
>
1
</p>
<p
class="ant-scroll-number-only-unit"
>
2
</p>
<p
class="ant-scroll-number-only-unit"
>
3
</p>
<p
class="ant-scroll-number-only-unit"
>
4
</p>
<p
class="ant-scroll-number-only-unit"
>
5
</p>
<p
class="ant-scroll-number-only-unit"
>
6
</p>
<p
class="ant-scroll-number-only-unit"
>
7
</p>
<p
class="ant-scroll-number-only-unit"
>
8
</p>
<p
class="ant-scroll-number-only-unit"
>
9
</p>
<p
class="ant-scroll-number-only-unit"
>
0
</p>
<p
class="ant-scroll-number-only-unit"
>
1
</p>
<p
class="ant-scroll-number-only-unit"
>
2
</p>
<p
class="ant-scroll-number-only-unit"
>
3
</p>
<p
class="ant-scroll-number-only-unit"
>
4
</p>
<p
class="ant-scroll-number-only-unit current"
>
5
</p>
<p
class="ant-scroll-number-only-unit"
>
6
</p>
<p
class="ant-scroll-number-only-unit"
>
7
</p>
<p
class="ant-scroll-number-only-unit"
>
8
</p>
<p
class="ant-scroll-number-only-unit"
>
9
</p>
<p
class="ant-scroll-number-only-unit"
>
0
</p>
<p
class="ant-scroll-number-only-unit"
>
1
</p>
<p
class="ant-scroll-number-only-unit"
>
2
</p>
<p
class="ant-scroll-number-only-unit"
>
3
</p>
<p
class="ant-scroll-number-only-unit"
>
4
</p>
<p
class="ant-scroll-number-only-unit"
>
5
</p>
<p
class="ant-scroll-number-only-unit"
>
6
</p>
<p
class="ant-scroll-number-only-unit"
>
7
</p>
<p
class="ant-scroll-number-only-unit"
>
8
</p>
<p
class="ant-scroll-number-only-unit"
>
9
</p>
</span>
</sup>
</span>
`;

exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
<div>
<span
Expand Down
175 changes: 175 additions & 0 deletions components/badge/__tests__/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -762,6 +762,181 @@ exports[`Badge rtl render component should be rendered correctly in RTL directio
/>
`;

exports[`Badge rtl render component should be rendered correctly in RTL direction 2`] = `
<span
class="ant-badge ant-badge-rtl"
>
<a
class="head-example"
href="#"
>
head
</a>
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
style="left:10px;margin-top:10px"
title="5"
>
<span
class="ant-scroll-number-only"
style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
>
<p
class="ant-scroll-number-only-unit"
>
0
</p>
<p
class="ant-scroll-number-only-unit"
>
1
</p>
<p
class="ant-scroll-number-only-unit"
>
2
</p>
<p
class="ant-scroll-number-only-unit"
>
3
</p>
<p
class="ant-scroll-number-only-unit"
>
4
</p>
<p
class="ant-scroll-number-only-unit"
>
5
</p>
<p
class="ant-scroll-number-only-unit"
>
6
</p>
<p
class="ant-scroll-number-only-unit"
>
7
</p>
<p
class="ant-scroll-number-only-unit"
>
8
</p>
<p
class="ant-scroll-number-only-unit"
>
9
</p>
<p
class="ant-scroll-number-only-unit"
>
0
</p>
<p
class="ant-scroll-number-only-unit"
>
1
</p>
<p
class="ant-scroll-number-only-unit"
>
2
</p>
<p
class="ant-scroll-number-only-unit"
>
3
</p>
<p
class="ant-scroll-number-only-unit"
>
4
</p>
<p
class="ant-scroll-number-only-unit current"
>
5
</p>
<p
class="ant-scroll-number-only-unit"
>
6
</p>
<p
class="ant-scroll-number-only-unit"
>
7
</p>
<p
class="ant-scroll-number-only-unit"
>
8
</p>
<p
class="ant-scroll-number-only-unit"
>
9
</p>
<p
class="ant-scroll-number-only-unit"
>
0
</p>
<p
class="ant-scroll-number-only-unit"
>
1
</p>
<p
class="ant-scroll-number-only-unit"
>
2
</p>
<p
class="ant-scroll-number-only-unit"
>
3
</p>
<p
class="ant-scroll-number-only-unit"
>
4
</p>
<p
class="ant-scroll-number-only-unit"
>
5
</p>
<p
class="ant-scroll-number-only-unit"
>
6
</p>
<p
class="ant-scroll-number-only-unit"
>
7
</p>
<p
class="ant-scroll-number-only-unit"
>
8
</p>
<p
class="ant-scroll-number-only-unit"
>
9
</p>
</span>
</sup>
</span>
`;

exports[`Badge should be compatible with borderColor style 1`] = `
<span
class="ant-badge ant-badge-not-a-wrapper"
Expand Down
7 changes: 7 additions & 0 deletions components/badge/__tests__/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,13 @@ import rtlTest from '../../../tests/shared/rtlTest';
describe('Badge', () => {
mountTest(Badge);
rtlTest(Badge);
rtlTest(() => (
<Badge count={5} offset={[10, 10]}>
<a href="#" className="head-example">
head
</a>
</Badge>
));

beforeEach(() => {
jest.useFakeTimers();
Expand Down

0 comments on commit 955fa52

Please sign in to comment.