From 59758474d6ddac4bf49536da30cb0853083f2a64 Mon Sep 17 00:00:00 2001 From: Max Schmeling Date: Fri, 13 Dec 2024 15:52:38 -0600 Subject: [PATCH 1/9] Use CSS grid for services dropdown --- .../components/AddDataSourceDropdown.tsx | 25 ++++++++++--------- src/settings/index.scss | 14 ++++++++--- 2 files changed, 24 insertions(+), 15 deletions(-) diff --git a/src/data-sources/components/AddDataSourceDropdown.tsx b/src/data-sources/components/AddDataSourceDropdown.tsx index 070d2bca..d664cb3d 100644 --- a/src/data-sources/components/AddDataSourceDropdown.tsx +++ b/src/data-sources/components/AddDataSourceDropdown.tsx @@ -60,18 +60,19 @@ export const AddDataSourceDropdown = () => { value: 'generic-http', }, ].map( ( { icon, label, value } ) => ( - { - onAddDataSource( value ); - onClose(); - } } - > - { label } - +
+ { + onAddDataSource( value ); + onClose(); + } } + > + { label } + +
) ) } ) } diff --git a/src/settings/index.scss b/src/settings/index.scss index 9b1539f4..32f2572d 100644 --- a/src/settings/index.scss +++ b/src/settings/index.scss @@ -107,22 +107,30 @@ body { /* Add new source menu */ .components-menu-group { - div { - display: flex; + > div { + display: grid; + grid-template-columns: repeat( 3, 1fr ); width: 368px; align-items: flex-start; align-content: flex-start; gap: 8px; padding: 8px 8px 16px 8px; - flex-wrap: wrap; + + .rdb-settings-page_add-data-source-btn-wrapper { + height: 100%; + } .components-button.has-icon.has-text { + height:100%; display: flex; width: 112px; padding: var(--Spacing-Spacing-Base, 16px); flex-direction: column; align-items: center; gap: 12px; + align-self: stretch; + justify-self: stretch; + justify-content: center; &:hover { color: unset; From ad89164d9580080addc2c9de8ba50ca470e5740b Mon Sep 17 00:00:00 2001 From: Max Schmeling Date: Fri, 13 Dec 2024 15:55:56 -0600 Subject: [PATCH 2/9] Fix formatting --- src/settings/index.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/settings/index.scss b/src/settings/index.scss index 32f2572d..6566a634 100644 --- a/src/settings/index.scss +++ b/src/settings/index.scss @@ -109,7 +109,7 @@ body { > div { display: grid; - grid-template-columns: repeat( 3, 1fr ); + grid-template-columns: repeat(3, 1fr); width: 368px; align-items: flex-start; align-content: flex-start; @@ -121,7 +121,7 @@ body { } .components-button.has-icon.has-text { - height:100%; + height: 100%; display: flex; width: 112px; padding: var(--Spacing-Spacing-Base, 16px); From 2ddc2b7d4d052faa66a4d8b5908974054bda5615 Mon Sep 17 00:00:00 2001 From: Max Schmeling Date: Fri, 13 Dec 2024 16:06:18 -0600 Subject: [PATCH 3/9] Change alignment on menu items --- src/settings/index.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/settings/index.scss b/src/settings/index.scss index 6566a634..80451a5d 100644 --- a/src/settings/index.scss +++ b/src/settings/index.scss @@ -111,8 +111,8 @@ body { display: grid; grid-template-columns: repeat(3, 1fr); width: 368px; - align-items: flex-start; - align-content: flex-start; + align-items: start; + align-content: start; gap: 8px; padding: 8px 8px 16px 8px; @@ -130,7 +130,7 @@ body { gap: 12px; align-self: stretch; justify-self: stretch; - justify-content: center; + justify-content: start; &:hover { color: unset; From 69f5422afd90c80e9dae7daeb8d3e7cf037f8d17 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 13 Dec 2024 14:54:31 -0800 Subject: [PATCH 4/9] Adjust dropdown popover spacing to match designs Signed-off-by: brookewp --- src/data-sources/components/AddDataSourceDropdown.tsx | 3 +++ src/settings/index.scss | 1 + 2 files changed, 4 insertions(+) diff --git a/src/data-sources/components/AddDataSourceDropdown.tsx b/src/data-sources/components/AddDataSourceDropdown.tsx index d664cb3d..d0a7b8a2 100644 --- a/src/data-sources/components/AddDataSourceDropdown.tsx +++ b/src/data-sources/components/AddDataSourceDropdown.tsx @@ -25,6 +25,9 @@ export const AddDataSourceDropdown = () => { className="rdb-settings-page_add-data-source-dropdown" icon={ null } label={ __( 'Connect new data source', 'remote-data-blocks' ) } + popoverProps={ { + offset: 8, + } } text={ __( 'Connect New', 'remote-data-blocks' ) } toggleProps={ { className: 'rdb-settings-page_add-data-source-btn', diff --git a/src/settings/index.scss b/src/settings/index.scss index 80451a5d..4e8cd7cf 100644 --- a/src/settings/index.scss +++ b/src/settings/index.scss @@ -100,6 +100,7 @@ body { .rdb-settings-page_add-data-source-dropdown { grid-area: 1 / 2 / span 1 / span 1; justify-self: end; + align-self: center; } } } From e4bf638b4342b08550f926b0d140cba2820ef816 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 13 Dec 2024 14:55:39 -0800 Subject: [PATCH 5/9] CSS cleanup Signed-off-by: brookewp --- src/settings/index.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/settings/index.scss b/src/settings/index.scss index 4e8cd7cf..c7e402e5 100644 --- a/src/settings/index.scss +++ b/src/settings/index.scss @@ -91,12 +91,10 @@ body { padding: 24px 48px; border-bottom: 1px solid var(--Alias-border-border-secondary, #ebebeb); - p { margin-bottom: 0; } - .rdb-settings-page_add-data-source-dropdown { grid-area: 1 / 2 / span 1 / span 1; justify-self: end; @@ -129,8 +127,6 @@ body { flex-direction: column; align-items: center; gap: 12px; - align-self: stretch; - justify-self: stretch; justify-content: start; &:hover { From 7c78626f97a3bbc81c7a696615b5942f00c210e8 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 13 Dec 2024 15:26:21 -0800 Subject: [PATCH 6/9] Update dropdown icon size Signed-off-by: brookewp --- src/settings/index.scss | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/settings/index.scss b/src/settings/index.scss index c7e402e5..0af739be 100644 --- a/src/settings/index.scss +++ b/src/settings/index.scss @@ -120,14 +120,13 @@ body { } .components-button.has-icon.has-text { - height: 100%; display: flex; width: 112px; + height: 101px; padding: var(--Spacing-Spacing-Base, 16px); flex-direction: column; align-items: center; gap: 12px; - justify-content: start; &:hover { color: unset; @@ -135,16 +134,25 @@ body { } + svg { + width: 40px; + height: 40px; + padding: 4px; + } + .components-menu-item__item { min-width: unset; margin-right: unset; - text-wrap: auto; text-align: center; } } - .rdb-settings-page_add-data-source-btn-salesforce-b2c svg { - width: 50px; + .components-button.has-icon.has-text.rdb-settings-page_add-data-source-btn-salesforce-b2c { + + span.components-menu-item__item { + text-wrap: auto; + min-width: 112px; + } } } } From dca13547d7bbfbcd2908efe97e046e491cf44fb9 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 13 Dec 2024 15:38:32 -0800 Subject: [PATCH 7/9] Fix sheets icon Signed-off-by: brookewp --- src/settings/icons/GoogleSheetsIcon.tsx | 159 ++++++++++++++++++++++-- 1 file changed, 150 insertions(+), 9 deletions(-) diff --git a/src/settings/icons/GoogleSheetsIcon.tsx b/src/settings/icons/GoogleSheetsIcon.tsx index f190b005..4b81a1b4 100644 --- a/src/settings/icons/GoogleSheetsIcon.tsx +++ b/src/settings/icons/GoogleSheetsIcon.tsx @@ -1,15 +1,156 @@ import { SVG } from '@wordpress/primitives'; export const GoogleSheetsIcon: JSX.Element = ( - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); From 99e0e5166a6e46261ab0ceeb097e122b1a9a1eb4 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 13 Dec 2024 15:42:17 -0800 Subject: [PATCH 8/9] adjust icon size for http and salesforce Signed-off-by: brookewp --- src/settings/index.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/settings/index.scss b/src/settings/index.scss index 0af739be..72f10702 100644 --- a/src/settings/index.scss +++ b/src/settings/index.scss @@ -147,8 +147,16 @@ body { } } + .components-button.has-icon.has-text.rdb-settings-page_add-data-source-btn-generic-http svg { + padding: 8px; + } + .components-button.has-icon.has-text.rdb-settings-page_add-data-source-btn-salesforce-b2c { + svg { + padding: 0; + } + span.components-menu-item__item { text-wrap: auto; min-width: 112px; From 4d0eb980c440cda4ff3b9c5391a033dd0fcd4481 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 13 Dec 2024 15:50:54 -0800 Subject: [PATCH 9/9] Update dropdown button Signed-off-by: brookewp --- src/data-sources/components/AddDataSourceDropdown.tsx | 1 + src/settings/index.scss | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/src/data-sources/components/AddDataSourceDropdown.tsx b/src/data-sources/components/AddDataSourceDropdown.tsx index d0a7b8a2..7f5e1d31 100644 --- a/src/data-sources/components/AddDataSourceDropdown.tsx +++ b/src/data-sources/components/AddDataSourceDropdown.tsx @@ -33,6 +33,7 @@ export const AddDataSourceDropdown = () => { className: 'rdb-settings-page_add-data-source-btn', variant: 'primary', showTooltip: false, + __next40pxDefaultSize: true, } } children={ ( { onClose } ) => ( diff --git a/src/settings/index.scss b/src/settings/index.scss index 72f10702..b2e16829 100644 --- a/src/settings/index.scss +++ b/src/settings/index.scss @@ -99,6 +99,10 @@ body { grid-area: 1 / 2 / span 1 / span 1; justify-self: end; align-self: center; + + .rdb-settings-page_add-data-source-btn.is-opened { + background: #1d35b4; + } } } }