mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

feat: tooltip round arrow (#33710)

Browse Source 
* feat: tooltip round arrow

* chore: update demo

* docs: update docs

* feat: rounded arrow in Tooltip/Popover/Popconfirm/Dropdown/RangePicker

* chore: code clean

* fix: fill gap

* chore: code clean

* chore: raise css bundle size

* fix: arrow style

* feat: use full path

* test: update snapshot

* perf: hack firefox

* perf: more magic position

* perf: RangePicker's arrow position

* chore: bump rc-picker version

* fix: arrow position
This commit is contained in:
MadCcc 2022-02-08 09:52:33 +08:00 committed by GitHub
parent 6e3284c1a5
commit 926a8aaf8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 94 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
components/date-picker/style/index.less
View File

@ -13,7 +13,7 @@
}
.@{picker-prefix-cls} {
@arrow-size: 10px;
@arrow-size: @popover-arrow-width;
.reset-component();
.picker-padding(@input-height-base, @font-size-base, @input-padding-horizontal-base);
@ -221,17 +221,17 @@
&-placement-bottomLeft {
.@{picker-prefix-cls}-range-arrow {
top: (@arrow-size / 2) - (@arrow-size / 3);
top: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px;
display: block;
transform: rotate(-45deg);
transform: rotate(-135deg) translateY(1px);
}
}
&-placement-topLeft {
.@{picker-prefix-cls}-range-arrow {
bottom: (@arrow-size / 2) - (@arrow-size / 3);
bottom: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px;
display: block;
transform: rotate(135deg);
transform: rotate(45deg);
}
}
@ -311,19 +311,14 @@
width: @arrow-size;
height: @arrow-size;
margin-left: @input-padding-horizontal-base * 1.5;
box-shadow: 2px -2px 6px fade(@black, 6%);
background: linear-gradient(
135deg,
transparent 40%,
@calendar-bg 40%
); // Use linear-gradient to prevent arrow from covering text
box-shadow: 2px 2px 6px -2px fade(@black, 10%); // use spread radius to hide shadow over popover
transition: left @animation-duration-slow ease-out;
&::after {
position: absolute;
top: @border-width-base;
right: @border-width-base;
width: @arrow-size;
height: @arrow-size;
border: (@arrow-size / 2) solid @border-color-split;
border-color: @calendar-bg @calendar-bg transparent transparent;
content: '';
}
.roundedArrow(@arrow-size, 5px, @calendar-bg);
}
&-panel-container {

28
components/dropdown/style/index.less
View File

@ -68,20 +68,22 @@
position: absolute;
z-index: 1; // lift it up so the menu wouldn't cask shadow on it
display: block;
width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
background: transparent;
border-style: solid;
border-width: (sqrt(@popover-arrow-width * @popover-arrow-width * 2) / 2);
transform: rotate(45deg);
width: @popover-arrow-width;
height: @popover-arrow-width;
background: linear-gradient(
135deg,
transparent 40%,
@popover-bg 40%
); // Use linear-gradient to prevent arrow from covering text
.roundedArrow(@popover-arrow-width, 5px, @popover-bg);
}
&-placement-top > &-arrow,
&-placement-topLeft > &-arrow,
&-placement-topRight > &-arrow {
bottom: @popover-distance - @popover-arrow-width + 2.2px;
border-color: transparent @popover-bg @popover-bg transparent;
box-shadow: 3px 3px 7px fade(@black, 7%);
bottom: @popover-arrow-width * sqrt((1 / 2)) + 2px;
box-shadow: 3px 3px 7px -3px fade(@black, 10%);
transform: rotate(45deg);
}
&-placement-top > &-arrow {
@ -100,14 +102,14 @@
&-placement-bottom > &-arrow,
&-placement-bottomLeft > &-arrow,
&-placement-bottomRight > &-arrow {
top: @popover-distance - @popover-arrow-width + 2px;
border-color: @popover-bg transparent transparent @popover-bg;
box-shadow: -2px -2px 5px fade(@black, 6%);
top: (@popover-arrow-width + 2px) * sqrt((1 / 2));
box-shadow: 2px 2px 5px -2px fade(@black, 10%);
transform: rotate(-135deg) translateY(-0.5px);
}
&-placement-bottom > &-arrow {
left: 50%;
transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(-135deg) translateY(-0.5px);
}
&-placement-bottomLeft > &-arrow {

13
components/popover/style/index.less
View File

@ -137,6 +137,7 @@
background-color: @popover-bg;
content: '';
pointer-events: auto;
.roundedArrow(@popover-arrow-width, 5px, @popover-bg);
}
}
@ -170,8 +171,8 @@
left: @popover-distance - @popover-arrow-rotate-width;
&-content {
box-shadow: -3px 3px 7px fade(@black, 7%);
transform: translateX((@popover-arrow-rotate-width / 2)) rotate(45deg);
box-shadow: 3px 3px 7px fade(@black, 7%);
transform: translateX((@popover-arrow-rotate-width / 2)) rotate(135deg);
}
}
@ -194,8 +195,8 @@
top: @popover-distance - @popover-arrow-rotate-width;
&-content {
box-shadow: -2px -2px 5px fade(@black, 6%);
transform: translateY((@popover-arrow-rotate-width / 2)) rotate(45deg);
box-shadow: 2px 2px 5px fade(@black, 6%);
transform: translateY((@popover-arrow-rotate-width / 2)) rotate(-135deg);
}
}
@ -218,8 +219,8 @@
right: @popover-distance - @popover-arrow-rotate-width;
&-content {
box-shadow: 3px -3px 7px fade(@black, 7%);
transform: translateX((-@popover-arrow-rotate-width / 2)) rotate(45deg);
box-shadow: 3px 3px 7px fade(@black, 7%);
transform: translateX((-@popover-arrow-rotate-width / 2)) rotate(-45deg);
}
}

1
components/style/mixins/index.less
View File

@ -11,3 +11,4 @@
@import 'motion';
@import 'reset';
@import 'operation-unit';
@import 'rounded-arrow';

37
components/style/mixins/rounded-arrow.less Normal file
View File

@ -0,0 +1,37 @@
.roundedArrow(@width, @outer-radius, @bg-color: var(--antd-arrow-background-color)) {
@corner-height: unit(((@outer-radius) * (1 - 1 / sqrt(2))));
@width-without-unit: unit(@width);
@outer-radius-without-unit: unit(@outer-radius);
@inner-radius-without-unit: unit(@border-radius-base);
@a-x: @width-without-unit - @corner-height;
@a-y: 2 * @width-without-unit + @corner-height;
@b-x: @a-x + @outer-radius-without-unit * (1 / sqrt(2));
@b-y: 2 * @width-without-unit;
@c-x: 2 * @width-without-unit - @inner-radius-without-unit;
@c-y: 2 * @width-without-unit;
@d-x: 2 * @width-without-unit;
@d-y: 2 * @width-without-unit - @inner-radius-without-unit;
@e-x: 2 * @width-without-unit;
@e-y: @f-y + @outer-radius-without-unit * (1 / sqrt(2));
@f-x: 2 * @width-without-unit + @corner-height;
@f-y: @width-without-unit - @corner-height;
border-radius: 0 0 @border-radius-base 0;
pointer-events: none;
&::before {
position: absolute;
top: -@width;
left: -@width;
width: @width * 3;
height: @width * 3;
background: linear-gradient(to left, @bg-color 50%, @bg-color 50%) no-repeat ceil(-@width + 1px)
ceil(-@width + 1px); // Hack firefox: https://github.com/ant-design/ant-design/pull/33710#issuecomment-1015287825
content: '';
clip-path: path(
'M @{a-x} @{a-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{b-x} @{b-y} L @{c-x} @{c-y} A @{inner-radius-without-unit} @{inner-radius-without-unit} 0 0 0 @{d-x} @{d-y} L @{e-x} @{e-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{f-x} @{f-y} Z'
);
}
}

4
components/style/themes/variable.less
View File

@ -568,7 +568,7 @@ html {
// Tooltip background color
@tooltip-bg: rgba(0, 0, 0, 0.75);
// Tooltip arrow width
@tooltip-arrow-width: 5px;
@tooltip-arrow-width: 8px * sqrt(2);
// Tooltip distance with trigger
@tooltip-distance: @tooltip-arrow-width - 1px + 4px;
// Tooltip arrow color
@ -584,7 +584,7 @@ html {
@popover-min-width: 177px;
@popover-min-height: 32px;
// Popover arrow width
@popover-arrow-width: 6px;
@popover-arrow-width: @tooltip-arrow-width;
// Popover arrow color
@popover-arrow-color: @popover-bg;
// Popover outer arrow width

8
components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -635,7 +635,7 @@ Array [
>
<span
class="ant-tooltip-arrow-content"
style="background:#f50"
style="--antd-arrow-background-color:#f50"
/>
</div>
<div
@ -669,7 +669,7 @@ Array [
>
<span
class="ant-tooltip-arrow-content"
style="background:#2db7f5"
style="--antd-arrow-background-color:#2db7f5"
/>
</div>
<div
@ -703,7 +703,7 @@ Array [
>
<span
class="ant-tooltip-arrow-content"
style="background:#87d068"
style="--antd-arrow-background-color:#87d068"
/>
</div>
<div
@ -737,7 +737,7 @@ Array [
>
<span
class="ant-tooltip-arrow-content"
style="background:#108ee9"
style="--antd-arrow-background-color:#108ee9"
/>
</div>
<div

3
components/tooltip/index.tsx
View File

@ -239,7 +239,8 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
let arrowContentStyle;
if (color && !PresetColorRegex.test(color)) {
formattedOverlayInnerStyle = { ...overlayInnerStyle, background: color };
arrowContentStyle = { background: color };
// @ts-ignore
arrowContentStyle = { '--antd-arrow-background-color': color };
}
return (

21
components/tooltip/style/index.less
View File

@ -75,6 +75,8 @@
pointer-events: none;
&-content {
--antd-arrow-background-color: @tooltip-bg;
position: absolute;
top: 0;
right: 0;
@ -84,16 +86,17 @@
width: @tooltip-arrow-width;
height: @tooltip-arrow-width;
margin: auto;
background-color: @tooltip-bg;
background-color: transparent;
content: '';
pointer-events: auto;
.roundedArrow(@tooltip-arrow-width, 5px);
}
}
&-placement-top &-arrow,
&-placement-topLeft &-arrow,
&-placement-topRight &-arrow {
bottom: @tooltip-distance - @tooltip-arrow-rotate-width;
bottom: @tooltip-distance - @tooltip-arrow-rotate-width + 0.24px;
&-content {
box-shadow: @tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
@ -117,11 +120,11 @@
&-placement-right &-arrow,
&-placement-rightTop &-arrow,
&-placement-rightBottom &-arrow {
left: @tooltip-distance - @tooltip-arrow-rotate-width;
left: @tooltip-distance - @tooltip-arrow-rotate-width + 0.1px;
&-content {
box-shadow: -@tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
transform: translateX((@tooltip-arrow-rotate-width / 2)) rotate(45deg);
transform: translateX((@tooltip-arrow-rotate-width / 2)) rotate(135deg);
}
}
@ -141,11 +144,11 @@
&-placement-left &-arrow,
&-placement-leftTop &-arrow,
&-placement-leftBottom &-arrow {
right: @tooltip-distance - @tooltip-arrow-rotate-width;
right: @tooltip-distance - @tooltip-arrow-rotate-width + 0.08px;
&-content {
box-shadow: @tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
transform: translateX((-@tooltip-arrow-rotate-width / 2)) rotate(45deg);
transform: translateX((-@tooltip-arrow-rotate-width / 2)) rotate(315deg);
}
}
@ -165,11 +168,11 @@
&-placement-bottom &-arrow,
&-placement-bottomLeft &-arrow,
&-placement-bottomRight &-arrow {
top: @tooltip-distance - @tooltip-arrow-rotate-width;
top: @tooltip-distance - @tooltip-arrow-rotate-width + 0.1px;
&-content {
box-shadow: -@tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
transform: translateY((@tooltip-arrow-rotate-width / 2)) rotate(45deg);
transform: translateY((@tooltip-arrow-rotate-width / 2)) rotate(225deg);
}
}
@ -196,7 +199,7 @@
background-color: @@lightColor;
}
.@{tooltip-prefix-cls}-arrow {
&-content {
&-content::before {
background-color: @@lightColor;
}
}

4
package.json
View File

@ -135,7 +135,7 @@
"rc-motion": "^2.4.4",
"rc-notification": "~4.5.7",
"rc-pagination": "~3.1.9",
"rc-picker": "~2.6.0",
"rc-picker": "~2.6.4",
"rc-progress": "~3.2.1",
"rc-rate": "~2.9.0",
"rc-resize-observer": "^1.2.0",
@ -312,7 +312,7 @@
},
{
"path": "./dist/antd.variable.min.css",
"maxSize": "65 kB"
"maxSize": "66 kB"
}
],
"tnpm": {