Skip to content

Commit 6a13981

Browse files
maxschmelingbrookewp
maxschmeling
and
brookewp
authored
Use CSS grid for services dropdown (#242)
* Use CSS grid for services dropdown * Fix formatting * Change alignment on menu items * Adjust dropdown popover spacing to match designs Signed-off-by: brookewp <[email protected]> * CSS cleanup Signed-off-by: brookewp <[email protected]> * Update dropdown icon size Signed-off-by: brookewp <[email protected]> * Fix sheets icon Signed-off-by: brookewp <[email protected]> * adjust icon size for http and salesforce Signed-off-by: brookewp <[email protected]> * Update dropdown button Signed-off-by: brookewp <[email protected]> --------- Signed-off-by: brookewp <[email protected]> Co-authored-by: brookewp <[email protected]>
1 parent 8519705 commit 6a13981

File tree

3 files changed

+202
-31
lines changed

3 files changed

+202
-31
lines changed

‎src/data-sources/components/AddDataSourceDropdown.tsx

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,15 @@ export const AddDataSourceDropdown = () => {
2525
className="rdb-settings-page_add-data-source-dropdown"
2626
icon={ null }
2727
label={ __( 'Connect new data source', 'remote-data-blocks' ) }
28+
popoverProps={ {
29+
offset: 8,
30+
} }
2831
text={ __( 'Connect New', 'remote-data-blocks' ) }
2932
toggleProps={ {
3033
className: 'rdb-settings-page_add-data-source-btn',
3134
variant: 'primary',
3235
showTooltip: false,
36+
__next40pxDefaultSize: true,
3337
} }
3438
children={ ( { onClose } ) => (
3539
<MenuGroup>
@@ -60,18 +64,19 @@ export const AddDataSourceDropdown = () => {
6064
value: 'generic-http',
6165
},
6266
].map( ( { icon, label, value } ) => (
63-
<MenuItem
64-
className={ `rdb-settings-page_add-data-source-btn-${ value }` }
65-
key={ value }
66-
icon={ icon }
67-
iconPosition="left"
68-
onClick={ () => {
69-
onAddDataSource( value );
70-
onClose();
71-
} }
72-
>
73-
{ label }
74-
</MenuItem>
67+
<div key={ value } className="rdb-settings-page_add-data-source-btn-wrapper">
68+
<MenuItem
69+
className={ `rdb-settings-page_add-data-source-btn-${ value }` }
70+
icon={ icon }
71+
iconPosition="left"
72+
onClick={ () => {
73+
onAddDataSource( value );
74+
onClose();
75+
} }
76+
>
77+
{ label }
78+
</MenuItem>
79+
</div>
7580
) ) }
7681
</MenuGroup>
7782
) }

‎src/settings/icons/GoogleSheetsIcon.tsx

Lines changed: 150 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,156 @@
11
import { SVG } from '@wordpress/primitives';
22

33
export const GoogleSheetsIcon: JSX.Element = (
4-
<SVG width="24" height="24" viewBox="0 0 49 67" fill="none" xmlns="http://www.w3.org/2000/svg">
5-
<path
6-
d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z"
7-
fill="#0F9D58"
8-
/>
9-
<path
10-
d="M11.8333333,31.8020833 L11.8333333,53.25 L35.5,53.25 L35.5,31.8020833 L11.8333333,31.8020833 Z M22.1875,50.2916667 L14.7916667,50.2916667 L14.7916667,46.59375 L22.1875,46.59375 L22.1875,50.2916667 Z M22.1875,44.375 L14.7916667,44.375 L14.7916667,40.6770833 L22.1875,40.6770833 L22.1875,44.375 Z M22.1875,38.4583333 L14.7916667,38.4583333 L14.7916667,34.7604167 L22.1875,34.7604167 L22.1875,38.4583333 Z M32.5416667,50.2916667 L25.1458333,50.2916667 L25.1458333,46.59375 L32.5416667,46.59375 L32.5416667,50.2916667 Z M32.5416667,44.375 L25.1458333,44.375 L25.1458333,40.6770833 L32.5416667,40.6770833 L32.5416667,44.375 Z M32.5416667,38.4583333 L25.1458333,38.4583333 L25.1458333,34.7604167 L32.5416667,34.7604167 L32.5416667,38.4583333 Z"
11-
fill="#F1F1F1"
12-
/>
4+
<SVG
5+
width="49px"
6+
height="67px"
7+
viewBox="0 0 49 67"
8+
version="1.1"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<defs>
12+
<path
13+
d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z"
14+
id="path-1"
15+
></path>
16+
<linearGradient
17+
x1="50.0053945%"
18+
y1="8.58610612%"
19+
x2="50.0053945%"
20+
y2="100.013939%"
21+
id="linearGradient-7"
22+
>
23+
<stop stopColor="#263238" stopOpacity="0.2" offset="0%"></stop>
24+
<stop stopColor="#263238" stopOpacity="0.02" offset="100%"></stop>
25+
</linearGradient>
26+
<radialGradient
27+
cx="3.16804688%"
28+
cy="2.71744318%"
29+
fx="3.16804688%"
30+
fy="2.71744318%"
31+
r="161.248516%"
32+
gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.727273),translate(-0.031680,-0.027174)"
33+
id="radialGradient-16"
34+
>
35+
<stop stopColor="#FFFFFF" stopOpacity="0.1" offset="0%"></stop>
36+
<stop stopColor="#FFFFFF" stopOpacity="0" offset="100%"></stop>
37+
</radialGradient>
38+
</defs>
39+
<g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
40+
<g id="Consumer-Apps-Sheets-Large-VD-R8-" transform="translate(-451.000000, -451.000000)">
41+
<g id="Hero" transform="translate(0.000000, 63.000000)">
42+
<g id="Personal" transform="translate(277.000000, 299.000000)">
43+
<g id="Sheets-icon" transform="translate(174.833333, 89.958333)">
44+
<g id="Group">
45+
<g id="Clipped">
46+
<mask id="mask-2" fill="white">
47+
<use xlinkHref="#path-1"></use>
48+
</mask>
49+
<g id="SVGID_1_"></g>
50+
<path
51+
d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L36.9791667,10.3541667 L29.5833333,0 Z"
52+
id="Path"
53+
fill="#0F9D58"
54+
fillRule="nonzero"
55+
mask="url(#mask-2)"
56+
></path>
57+
</g>
58+
<g id="Clipped">
59+
<mask id="mask-4" fill="white">
60+
<use xlinkHref="#path-1"></use>
61+
</mask>
62+
<g id="SVGID_1_"></g>
63+
<path
64+
d="M11.8333333,31.8020833 L11.8333333,53.25 L35.5,53.25 L35.5,31.8020833 L11.8333333,31.8020833 Z M22.1875,50.2916667 L14.7916667,50.2916667 L14.7916667,46.59375 L22.1875,46.59375 L22.1875,50.2916667 Z M22.1875,44.375 L14.7916667,44.375 L14.7916667,40.6770833 L22.1875,40.6770833 L22.1875,44.375 Z M22.1875,38.4583333 L14.7916667,38.4583333 L14.7916667,34.7604167 L22.1875,34.7604167 L22.1875,38.4583333 Z M32.5416667,50.2916667 L25.1458333,50.2916667 L25.1458333,46.59375 L32.5416667,46.59375 L32.5416667,50.2916667 Z M32.5416667,44.375 L25.1458333,44.375 L25.1458333,40.6770833 L32.5416667,40.6770833 L32.5416667,44.375 Z M32.5416667,38.4583333 L25.1458333,38.4583333 L25.1458333,34.7604167 L32.5416667,34.7604167 L32.5416667,38.4583333 Z"
65+
id="Shape"
66+
fill="#F1F1F1"
67+
fillRule="nonzero"
68+
mask="url(#mask-4)"
69+
></path>
70+
</g>
71+
<g id="Clipped">
72+
<mask id="mask-6" fill="white">
73+
<use xlinkHref="#path-1"></use>
74+
</mask>
75+
<g id="SVGID_1_"></g>
76+
<polygon
77+
id="Path"
78+
fill="url(#linearGradient-7)"
79+
fillRule="nonzero"
80+
mask="url(#mask-6)"
81+
points="30.8813021 16.4520313 47.3333333 32.9003646 47.3333333 17.75"
82+
></polygon>
83+
</g>
84+
<g id="Clipped">
85+
<mask id="mask-9" fill="white">
86+
<use xlinkHref="#path-1"></use>
87+
</mask>
88+
<g id="SVGID_1_"></g>
89+
<g id="Group" mask="url(#mask-9)">
90+
<g transform="translate(26.625000, -2.958333)">
91+
<path
92+
d="M2.95833333,2.95833333 L2.95833333,16.2708333 C2.95833333,18.7225521 4.94411458,20.7083333 7.39583333,20.7083333 L20.7083333,20.7083333 L2.95833333,2.95833333 Z"
93+
id="Path"
94+
fill="#87CEAC"
95+
fillRule="nonzero"
96+
></path>
97+
</g>
98+
</g>
99+
</g>
100+
<g id="Clipped">
101+
<mask id="mask-11" fill="white">
102+
<use xlinkHref="#path-1"></use>
103+
</mask>
104+
<g id="SVGID_1_"></g>
105+
<path
106+
d="M4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,4.80729167 C0,2.36666667 1.996875,0.369791667 4.4375,0.369791667 L29.5833333,0.369791667 L29.5833333,0 L4.4375,0 Z"
107+
id="Path"
108+
fillOpacity="0.2"
109+
fill="#FFFFFF"
110+
fillRule="nonzero"
111+
mask="url(#mask-11)"
112+
></path>
113+
</g>
114+
<g id="Clipped">
115+
<mask id="mask-13" fill="white">
116+
<use xlinkHref="#path-1"></use>
117+
</mask>
118+
<g id="SVGID_1_"></g>
119+
<path
120+
d="M42.8958333,64.7135417 L4.4375,64.7135417 C1.996875,64.7135417 0,62.7166667 0,60.2760417 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,60.2760417 C47.3333333,62.7166667 45.3364583,64.7135417 42.8958333,64.7135417 Z"
121+
id="Path"
122+
fillOpacity="0.2"
123+
fill="#263238"
124+
fillRule="nonzero"
125+
mask="url(#mask-13)"
126+
></path>
127+
</g>
128+
<g id="Clipped">
129+
<mask id="mask-15" fill="white">
130+
<use xlinkHref="#path-1"></use>
131+
</mask>
132+
<g id="SVGID_1_"></g>
133+
<path
134+
d="M34.0208333,17.75 C31.5691146,17.75 29.5833333,15.7642188 29.5833333,13.3125 L29.5833333,13.6822917 C29.5833333,16.1340104 31.5691146,18.1197917 34.0208333,18.1197917 L47.3333333,18.1197917 L47.3333333,17.75 L34.0208333,17.75 Z"
135+
id="Path"
136+
fillOpacity="0.1"
137+
fill="#263238"
138+
fillRule="nonzero"
139+
mask="url(#mask-15)"
140+
></path>
141+
</g>
142+
</g>
143+
<path
144+
d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z"
145+
id="Path"
146+
fill="url(#radialGradient-16)"
147+
fillRule="nonzero"
148+
></path>
149+
</g>
150+
</g>
151+
</g>
152+
</g>
153+
</g>
13154
</SVG>
14155
);
15156

‎src/settings/index.scss

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -91,34 +91,42 @@ body {
9191
padding: 24px 48px;
9292
border-bottom: 1px solid var(--Alias-border-border-secondary, #ebebeb);
9393

94-
9594
p {
9695
margin-bottom: 0;
9796
}
9897

99-
10098
.rdb-settings-page_add-data-source-dropdown {
10199
grid-area: 1 / 2 / span 1 / span 1;
102100
justify-self: end;
101+
align-self: center;
102+
103+
.rdb-settings-page_add-data-source-btn.is-opened {
104+
background: #1d35b4;
105+
}
103106
}
104107
}
105108
}
106109

107110
/* Add new source menu */
108111
.components-menu-group {
109112

110-
div {
111-
display: flex;
113+
> div {
114+
display: grid;
115+
grid-template-columns: repeat(3, 1fr);
112116
width: 368px;
113-
align-items: flex-start;
114-
align-content: flex-start;
117+
align-items: start;
118+
align-content: start;
115119
gap: 8px;
116120
padding: 8px 8px 16px 8px;
117-
flex-wrap: wrap;
121+
122+
.rdb-settings-page_add-data-source-btn-wrapper {
123+
height: 100%;
124+
}
118125

119126
.components-button.has-icon.has-text {
120127
display: flex;
121128
width: 112px;
129+
height: 101px;
122130
padding: var(--Spacing-Spacing-Base, 16px);
123131
flex-direction: column;
124132
align-items: center;
@@ -130,16 +138,33 @@ body {
130138

131139
}
132140

141+
svg {
142+
width: 40px;
143+
height: 40px;
144+
padding: 4px;
145+
}
146+
133147
.components-menu-item__item {
134148
min-width: unset;
135149
margin-right: unset;
136-
text-wrap: auto;
137150
text-align: center;
138151
}
139152
}
140153

141-
.rdb-settings-page_add-data-source-btn-salesforce-b2c svg {
142-
width: 50px;
154+
.components-button.has-icon.has-text.rdb-settings-page_add-data-source-btn-generic-http svg {
155+
padding: 8px;
156+
}
157+
158+
.components-button.has-icon.has-text.rdb-settings-page_add-data-source-btn-salesforce-b2c {
159+
160+
svg {
161+
padding: 0;
162+
}
163+
164+
span.components-menu-item__item {
165+
text-wrap: auto;
166+
min-width: 112px;
167+
}
143168
}
144169
}
145170
}

0 commit comments

Comments
 (0)