kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-03-26 06:55:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix the style of button-dropdown (#518)

Browse Source 
* fix(btn-dropdown): fix the style

* test(button-dropdown): update snapshots
This commit is contained in:
Bowen
2021-04-21 10:40:14 +08:00
committed by GitHub
parent 95fc6ef59b
commit c3774f2840
2 changed files with 186 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
components/button-dropdown/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -1477,6 +1477,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -1486,8 +1492,6 @@ initialize {
background-color: #fff;
height: 2.5rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -2909,6 +2913,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -2918,8 +2928,6 @@ initialize {
background-color: #fff;
height: 2.5rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -3121,6 +3129,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -3130,8 +3144,6 @@ initialize {
background-color: #fff;
height: 2.5rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -5149,6 +5161,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -5158,8 +5176,6 @@ initialize {
background-color: #fff;
height: 1.5rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -5567,6 +5583,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -5576,8 +5598,6 @@ initialize {
background-color: #fff;
height: 1.5rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -5779,6 +5799,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -5788,8 +5814,6 @@ initialize {
background-color: #fff;
height: 1.5rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -6759,6 +6783,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -6768,8 +6798,6 @@ initialize {
background-color: #fff;
height: 2.75rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -7177,6 +7205,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -7186,8 +7220,6 @@ initialize {
background-color: #fff;
height: 2.75rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -7389,6 +7421,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -7398,8 +7436,6 @@ initialize {
background-color: #fff;
height: 2.75rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -8369,6 +8405,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -8378,8 +8420,6 @@ initialize {
background-color: #000;
height: 2.5rem;
border-left: 1px solid #333;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -8787,6 +8827,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -8796,8 +8842,6 @@ initialize {
background-color: #000;
height: 2.5rem;
border-left: 1px solid #333;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -8999,6 +9043,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -9008,8 +9058,6 @@ initialize {
background-color: #000;
height: 2.5rem;
border-left: 1px solid #333;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -10010,6 +10058,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -10019,8 +10073,6 @@ initialize {
background-color: #fff;
height: 2.75rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -10428,6 +10480,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -10437,8 +10495,6 @@ initialize {
background-color: #fff;
height: 2.75rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -10640,6 +10696,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -10649,8 +10711,6 @@ initialize {
background-color: #fff;
height: 2.75rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -11620,6 +11680,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -11629,8 +11695,6 @@ initialize {
background-color: #000;
height: 2.5rem;
border-left: 1px solid #333;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -12038,6 +12102,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -12047,8 +12117,6 @@ initialize {
background-color: #000;
height: 2.5rem;
border-left: 1px solid #333;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -12250,6 +12318,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -12259,8 +12333,6 @@ initialize {
background-color: #000;
height: 2.5rem;
border-left: 1px solid #333;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -13242,6 +13314,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -13251,8 +13329,6 @@ initialize {
background-color: #fff;
height: 1.5rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -13660,6 +13736,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -13669,8 +13751,6 @@ initialize {
background-color: #fff;
height: 1.5rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -13872,6 +13952,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -13881,8 +13967,6 @@ initialize {
background-color: #fff;
height: 1.5rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -14871,6 +14955,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -14880,8 +14970,6 @@ initialize {
background-color: #000;
height: 2.5rem;
border-left: 1px solid #333;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -15289,6 +15377,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -15298,8 +15392,6 @@ initialize {
background-color: #000;
height: 2.5rem;
border-left: 1px solid #333;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -15501,6 +15593,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -15510,8 +15608,6 @@ initialize {
background-color: #000;
height: 2.5rem;
border-left: 1px solid #333;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -16483,6 +16579,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -16492,8 +16594,6 @@ initialize {
background-color: #fff;
height: 2.75rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -16901,6 +17001,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -16910,8 +17016,6 @@ initialize {
background-color: #fff;
height: 2.75rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -17113,6 +17217,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -17122,8 +17232,6 @@ initialize {
background-color: #fff;
height: 2.75rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -18095,6 +18203,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -18104,8 +18218,6 @@ initialize {
background-color: #fff;
height: 1.5rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -18513,6 +18625,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -18522,8 +18640,6 @@ initialize {
background-color: #fff;
height: 1.5rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
@@ -18725,6 +18841,12 @@ initialize {
border-bottom-left-radius: 5px;
}
details {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -18734,8 +18856,6 @@ initialize {
background-color: #fff;
height: 1.5rem;
border-left: 1px solid #eaeaea;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;

8
components/button-dropdown/button-dropdown.tsx
View File

@@ -112,6 +112,12 @@ const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = (
border-bottom-left-radius: ${theme.layout.radius};
}
details {
border-top-right-radius: ${theme.layout.radius};
border-bottom-right-radius: ${theme.layout.radius};
overflow: hidden;
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -121,8 +127,6 @@ const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = (
background-color: ${bgColor};
height: ${sizes.height};
border-left: 1px solid ${colors.borderLeftColor};
border-top-right-radius: ${theme.layout.radius};
border-bottom-right-radius: ${theme.layout.radius};
cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};
display: flex;
justify-content: center;