From ce4948b9a15894f6c65e5aac01d03ef86fc5fcff Mon Sep 17 00:00:00 2001 From: Mark Kaylor Date: Fri, 14 Oct 2022 11:05:23 +0200 Subject: [PATCH 1/5] Fix button toggle --- .../src/pages/MarketplacePage/components/SortSelect/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/SortSelect/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/SortSelect/index.js index 0bb3c3a6c4..797f9ead9e 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/components/SortSelect/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/SortSelect/index.js @@ -44,6 +44,9 @@ const SortSelect = ({ sortQuery, setQuery }) => { const handleBlur = (e) => { e.preventDefault(); + // Do nothing the button will toggle the popover + if (e.relatedTarget === buttonRef.current) return; + if (!e.currentTarget.contains(e.relatedTarget)) { setIsVisible(false); } From d1902bd5be87c3158f96096852e5428065c89c57 Mon Sep 17 00:00:00 2001 From: Mark Kaylor Date: Mon, 17 Oct 2022 16:36:28 +0200 Subject: [PATCH 2/5] Use select again --- .../components/NpmPackagesFilters/index.js | 9 +- .../components/SortSelect/index.js | 147 +- .../admin/src/pages/MarketplacePage/index.js | 2 +- .../tests/__snapshots__/index.test.js.snap | 1356 +++++++++++------ .../pages/MarketplacePage/tests/index.test.js | 9 +- .../core/admin/admin/src/translations/en.json | 2 + 6 files changed, 906 insertions(+), 619 deletions(-) diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js index 7086b08679..b25f35802b 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js @@ -1,4 +1,5 @@ import React, { useState, useRef } from 'react'; +import styled from 'styled-components'; import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; import { Box } from '@strapi/design-system/Box'; @@ -18,6 +19,10 @@ const FilterTag = ({ name, handleRemove }) => { ); }; +const ButtonToggle = styled(Button)` + height: ${({ theme }) => theme.sizes.input.S}; +`; + const NpmPackagesFilters = ({ possibleCollections, possibleCategories, @@ -34,7 +39,7 @@ const NpmPackagesFilters = ({ return ( <> - + {isVisible && ( theme.fontWeights.semiBold}; -const SortToggleButton = styled(Button)` - svg { - width: ${({ theme }) => theme.spaces[2]}; - height: ${({ theme }) => theme.spaces[1]}; - } - - svg > path { - fill: ${({ theme }) => theme.colors.neutral500}; + span { + font-size: ${({ theme }) => theme.spaces[3]}; } `; const SortSelect = ({ sortQuery, setQuery }) => { const { formatMessage } = useIntl(); - const buttonRef = useRef(); - const [isVisible, setIsVisible] = useState(false); const sortTypes = { 'name:asc': { - id: 'admin.pages.MarketPlacePage.sort.alphabetical', - defaultMessage: 'Alphabetical order', + selected: { + id: 'admin.pages.MarketPlacePage.sort.alphabetical.selected', + defaultMessage: 'Sort by alphabetical order', + }, + option: { + id: 'admin.pages.MarketPlacePage.sort.alphabetical', + defaultMessage: 'Alphabetical order', + }, }, 'submissionDate:desc': { - id: 'admin.pages.MarketPlacePage.sort.newest', - defaultMessage: 'Newest', + selected: { + id: 'admin.pages.MarketPlacePage.sort.newest.selected', + defaultMessage: 'Sort by newest', + }, + option: { + id: 'admin.pages.MarketPlacePage.sort.newest', + defaultMessage: 'Newest', + }, }, }; - const handleToggle = () => setIsVisible((prev) => !prev); - - const handleBlur = (e) => { - e.preventDefault(); - - // Do nothing the button will toggle the popover - if (e.relatedTarget === buttonRef.current) return; - - if (!e.currentTarget.contains(e.relatedTarget)) { - setIsVisible(false); - } - }; - - const handleSortClick = (sortName) => { - setQuery({ sort: sortName }); - handleToggle(); - }; - - const computeSortMessage = (sortName) => { - const defaultSortLabel = formatMessage({ - id: 'admin.pages.MarketPlacePage.sort.sortBy', - defaultMessage: 'Sort by', - }); - - if (sortName) { - const sortInfo = sortTypes[sortName]; - const message = formatMessage({ - id: sortInfo.id, - defaultMessage: sortInfo.defaultMessage, - }); - - return `${defaultSortLabel}: ${message}`; - } - - return defaultSortLabel; - }; - return ( - <> - } + + + ); }; -SortSelect.defaultProps = { - sortQuery: undefined, -}; - SortSelect.propTypes = { + sortQuery: PropTypes.string.isRequired, setQuery: PropTypes.func.isRequired, - sortQuery: PropTypes.string, }; export default SortSelect; diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js index 57737da7da..ad46c9eddc 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js @@ -259,7 +259,7 @@ const MarketPlacePage = () => { - + g, -.c38 svg path { +.c52 svg > g, +.c52 svg path { fill: #ffffff; } -.c38[aria-disabled='true'] { +.c52[aria-disabled='true'] { pointer-events: none; } -.c38:after { +.c52:after { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; @@ -101,11 +97,11 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` border: 2px solid transparent; } -.c38:focus-visible { +.c52:focus-visible { outline: none; } -.c38:focus-visible:after { +.c52:focus-visible:after { border-radius: 8px; content: ''; position: absolute; @@ -116,11 +112,11 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` border: 2px solid #4945ff; } -.c47 { +.c57 { height: 100%; } -.c39 { +.c53 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -132,7 +128,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` background: #ffffff; } -.c39 .c43 { +.c53 .c55 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -143,56 +139,56 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` align-items: center; } -.c39 .c41 { +.c53 .c58 { color: #ffffff; } -.c39[aria-disabled='true'] { +.c53[aria-disabled='true'] { border: 1px solid #dcdce4; background: #eaeaef; } -.c39[aria-disabled='true'] .c41 { +.c53[aria-disabled='true'] .c58 { color: #666687; } -.c39[aria-disabled='true'] svg > g, -.c39[aria-disabled='true'] svg path { +.c53[aria-disabled='true'] svg > g, +.c53[aria-disabled='true'] svg path { fill: #666687; } -.c39[aria-disabled='true']:active { +.c53[aria-disabled='true']:active { border: 1px solid #dcdce4; background: #eaeaef; } -.c39[aria-disabled='true']:active .c41 { +.c53[aria-disabled='true']:active .c58 { color: #666687; } -.c39[aria-disabled='true']:active svg > g, -.c39[aria-disabled='true']:active svg path { +.c53[aria-disabled='true']:active svg > g, +.c53[aria-disabled='true']:active svg path { fill: #666687; } -.c39:hover { +.c53:hover { background-color: #f6f6f9; } -.c39:active { +.c53:active { background-color: #eaeaef; } -.c39 .c41 { +.c53 .c58 { color: #32324d; } -.c39 svg > g, -.c39 svg path { +.c53 svg > g, +.c53 svg path { fill: #32324d; } -.c63 { +.c75 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -204,7 +200,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` background: #f0f0ff; } -.c63 .c43 { +.c75 .c55 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -215,62 +211,62 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` align-items: center; } -.c63 .c41 { +.c75 .c58 { color: #ffffff; } -.c63[aria-disabled='true'] { +.c75[aria-disabled='true'] { border: 1px solid #dcdce4; background: #eaeaef; } -.c63[aria-disabled='true'] .c41 { +.c75[aria-disabled='true'] .c58 { color: #666687; } -.c63[aria-disabled='true'] svg > g, -.c63[aria-disabled='true'] svg path { +.c75[aria-disabled='true'] svg > g, +.c75[aria-disabled='true'] svg path { fill: #666687; } -.c63[aria-disabled='true']:active { +.c75[aria-disabled='true']:active { border: 1px solid #dcdce4; background: #eaeaef; } -.c63[aria-disabled='true']:active .c41 { +.c75[aria-disabled='true']:active .c58 { color: #666687; } -.c63[aria-disabled='true']:active svg > g, -.c63[aria-disabled='true']:active svg path { +.c75[aria-disabled='true']:active svg > g, +.c75[aria-disabled='true']:active svg path { fill: #666687; } -.c63:hover { +.c75:hover { background-color: #ffffff; } -.c63:active { +.c75:active { background-color: #ffffff; border: 1px solid #4945ff; } -.c63:active .c41 { +.c75:active .c58 { color: #4945ff; } -.c63:active svg > g, -.c63:active svg path { +.c75:active svg > g, +.c75:active svg path { fill: #4945ff; } -.c63 .c41 { +.c75 .c58 { color: #271fe0; } -.c63 svg > g, -.c63 svg path { +.c75 svg > g, +.c75 svg path { fill: #271fe0; } @@ -278,7 +274,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` padding-bottom: 16px; } -.c50 { +.c62 { background: #ffffff; padding-top: 16px; padding-right: 16px; @@ -289,14 +285,14 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` height: 100%; } -.c71 { +.c83 { background: #ffffff; padding: 24px; border-radius: 4px; box-shadow: 0px 1px 4px rgba(33,33,52,0.1); } -.c72 { +.c84 { background: #f6ecfc; padding: 12px; border-radius: 4px; @@ -317,7 +313,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` gap: 8px; } -.c51 { +.c63 { -webkit-align-items: normal; -webkit-box-align: normal; -ms-flex-align: normal; @@ -335,7 +331,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` justify-content: space-between; } -.c55 { +.c67 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -349,30 +345,30 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` flex-direction: row; } -.c64 { +.c76 { color: #328048; margin-left: 8px; } -.c68 { +.c80 { color: #328048; margin-right: 8px; width: 12; height: 12; } -.c78 { +.c90 { color: #666687; margin-left: 8px; width: 12px; height: 12px; } -.c65 path { +.c77 path { fill: #328048; } -.c79 path { +.c91 path { fill: #666687; } @@ -525,25 +521,35 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` box-shadow: #4945ff 0px 0px 0px 2px; } -.c59 { - padding-top: 24px; +.c43 { + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + width: 100%; + background: transparent; + border: none; } -.c60 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; +.c43:focus { + outline: none; } -.c74 { +.c43[aria-disabled='true'] { + cursor: not-allowed; +} + +.c46 { + padding-right: 16px; + padding-left: 16px; +} + +.c48 { + padding-left: 12px; +} + +.c39 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -557,41 +563,174 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` flex-direction: column; } -.c75 > * { +.c41 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c44 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c47 { + color: #32324d; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 0.875rem; + line-height: 1.43; +} + +.c40 > * { margin-top: 0; margin-bottom: 0; } -.c61 > * { +.c42 { + position: relative; + border: 1px solid #dcdce4; + padding-right: 12px; + border-radius: 4px; + background: #ffffff; + overflow: hidden; + min-height: 2rem; + outline: none; + box-shadow: 0; + -webkit-transition-property: border-color,box-shadow,fill; + transition-property: border-color,box-shadow,fill; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; +} + +.c42:focus-within { + border: 1px solid #4945ff; + box-shadow: #4945ff 0px 0px 0px 2px; +} + +.c49 { + background: transparent; + border: none; + position: relative; + z-index: 1; +} + +.c49 svg { + height: 0.6875rem; + width: 0.6875rem; +} + +.c49 svg path { + fill: #666687; +} + +.c50 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: none; + border: none; +} + +.c50 svg { + width: 0.375rem; +} + +.c45 { + width: 100%; +} + +.c71 { + padding-top: 24px; +} + +.c72 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c86 { + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c87 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c73 > * { margin-left: 0; margin-right: 0; } -.c61 > * + * { +.c73 > * + * { margin-left: 8px; } -.c54 { +.c66 { color: #32324d; font-weight: 500; font-size: 1rem; line-height: 1.25; } -.c57 { +.c69 { color: #666687; font-size: 0.875rem; line-height: 1.43; } -.c69 { +.c81 { font-weight: 600; color: #328048; font-size: 0.875rem; line-height: 1.43; } -.c76 { +.c88 { font-weight: 500; color: #32324d; font-size: 0.75rem; @@ -609,7 +748,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` padding-right: 8px; } -.c62 { +.c74 { padding-left: 8px; } @@ -750,16 +889,16 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` fill: #32324d; } -.c73 { +.c85 { margin-right: 24px; } -.c73 svg { +.c85 svg { width: 2rem; height: 2rem; } -.c77 { +.c89 { word-break: break-all; } @@ -870,41 +1009,44 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = ` cursor: not-allowed; } -.c48 { +.c60 { display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; } -.c49 { +.c61 { grid-column: span 4; max-width: 100%; } -.c58 { +.c70 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } -.c40 svg { - width: 8px; - height: 4px; +.c38 { + font-weight: 500; } -.c40 svg > path { - fill: #8e8ea9; +.c38 span { + font-size: 12px; +} + +.c54 { + height: 2rem; } @media (max-width:68.75rem) { - .c49 { + .c61 { grid-column: span 6; } } @media (max-width:34.375rem) { - .c49 { + .c61 { grid-column: span 12; } } @@ -1104,52 +1246,83 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
-
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ +