From 8fa0a4637b8fa10e2087f72191637d008ff7ed04 Mon Sep 17 00:00:00 2001 From: Clinton Date: Mon, 7 Jun 2021 16:14:50 -0500 Subject: [PATCH 1/6] feat: make form controls more responsive. refactor form controls for more control over style --- src/components/Select.js | 94 +++++++++++++++ src/pages/observability-packs.js | 197 ++++++++++++++----------------- 2 files changed, 182 insertions(+), 109 deletions(-) create mode 100644 src/components/Select.js diff --git a/src/components/Select.js b/src/components/Select.js new file mode 100644 index 000000000..c14983a01 --- /dev/null +++ b/src/components/Select.js @@ -0,0 +1,94 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { css } from '@emotion/react'; + +const Select = ({ disabled, ...props }) => ( +
+ { + setSortState(e.target.value); + }} > - {sortState} - - - { - setSortState('Alphabetical'); - }} - > - Alphabetical - - { - setSortState('Reverse'); - }} - > - Reverse - - { - setSortState('Popularity'); - }} - > - Popularity - - - + {sortOptionValues.map((sortOption) => ( + + ))} + +
- - Filter packs containing - - - + + +
@@ -304,4 +252,35 @@ export const pageQuery = graphql` } `; +const Label = ({ children, htmlFor }) => ( + +); + +Label.propTypes = { + children: PropTypes.node, + htmlFor: PropTypes.string, +}; + +const FormControl = ({ children }) => ( +
+ {children} +
+); + export default ObservabilityPacksPage; From 3e1fd5ac393bc8a07226296c57a105a41f899888 Mon Sep 17 00:00:00 2001 From: Clinton Date: Mon, 7 Jun 2021 16:16:46 -0500 Subject: [PATCH 2/6] fix: fix linting erors --- src/pages/observability-packs.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index f873fdb54..afb268f9a 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -6,7 +6,7 @@ import { css } from '@emotion/react'; import PackTile from '../components/PackTile'; import PackList from '../components/PackList'; import Select from '../components/Select'; -import { SearchInput, Button, Dropdown } from '@newrelic/gatsby-theme-newrelic'; +import { SearchInput, Button } from '@newrelic/gatsby-theme-newrelic'; import { useQueryParam, StringParam } from 'use-query-params'; const sortOptionValues = ['Alphabetical', 'Reverse', 'Popularity']; @@ -283,4 +283,8 @@ const FormControl = ({ children }) => (
); +FormControl.propTypes = { + children: PropTypes.node, +}; + export default ObservabilityPacksPage; From 235a30bef474c9d9c912ed2c55ce392fe523f0f6 Mon Sep 17 00:00:00 2001 From: Clinton Date: Mon, 7 Jun 2021 16:35:10 -0500 Subject: [PATCH 3/6] fix: fix margins for select elems --- src/pages/observability-packs.js | 85 ++++++++++++++------------------ 1 file changed, 37 insertions(+), 48 deletions(-) diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index afb268f9a..09d41f005 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -139,52 +139,39 @@ const ObservabilityPacksPage = ({ data, location }) => { } `} > -
- - - - -
-
- - - - -
+ + + + + + + + +
@@ -274,8 +261,10 @@ Label.propTypes = { const FormControl = ({ children }) => (
From fa71319ef58a75abdcecb1c9125946ac3ad3000f Mon Sep 17 00:00:00 2001 From: Clinton Date: Mon, 7 Jun 2021 17:37:14 -0500 Subject: [PATCH 4/6] fix: blur select element to prevent need to double click to open again --- src/pages/observability-packs.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index 09d41f005..9112c26c3 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -146,6 +146,7 @@ const ObservabilityPacksPage = ({ data, location }) => { value={sortState} onChange={(e) => { setSortState(e.target.value); + document.getElementById(e.target.id).blur(); }} > {sortOptionValues.map((sortOption) => ( @@ -163,6 +164,7 @@ const ObservabilityPacksPage = ({ data, location }) => { value={containingFilterState} onChange={(e) => { setContainingFilterState(e.target.value); + document.getElementById(e.target.id).blur(); }} > {packContentsFilterValues.map((packContentsItem) => ( From 9db0632464ca59850971ef0034feffee8e8c785c Mon Sep 17 00:00:00 2001 From: Clinton Date: Tue, 8 Jun 2021 10:03:21 -0500 Subject: [PATCH 5/6] refactor: update some Select style rules --- src/components/Select.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Select.js b/src/components/Select.js index c14983a01..ce075da0a 100644 --- a/src/components/Select.js +++ b/src/components/Select.js @@ -5,12 +5,11 @@ import { css } from '@emotion/react'; const Select = ({ disabled, ...props }) => (
( font-size: 14px; cursor: inherit; line-height: inherit; - outline: none; &:focus + .focus-ring { position: absolute; From e811f6d61c8730e458922971893aa8abbd9d5743 Mon Sep 17 00:00:00 2001 From: Clinton Date: Tue, 8 Jun 2021 11:19:57 -0500 Subject: [PATCH 6/6] fix: add outline rule when focused --- src/components/Select.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Select.js b/src/components/Select.js index ce075da0a..7cc878106 100644 --- a/src/components/Select.js +++ b/src/components/Select.js @@ -60,6 +60,7 @@ const Select = ({ disabled, ...props }) => ( font-size: 14px; cursor: inherit; line-height: inherit; + outline: none; &:focus + .focus-ring { position: absolute; @@ -67,7 +68,7 @@ const Select = ({ disabled, ...props }) => ( left: -1px; right: -1px; bottom: -1px; - border: 2px solid var(--color-brand-500); + outline: 2px solid var(--color-brand-500); border-radius: inherit; }