Skip to content

Commit

Permalink
feat: make form controls more responsive. refactor form controls for …
Browse files Browse the repository at this point in the history 
…more control over style
  • Loading branch information
@roadlittledawn
roadlittledawn committed Jun 7, 2021
1 parent 2c97811 commit 8fa0a46
Show file tree
Hide file tree
Showing 2 changed files with 182 additions and 109 deletions.
94 changes: 94 additions & 0 deletions src/components/Select.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import React from 'react';
import PropTypes from 'prop-types';
import { css } from '@emotion/react';

const Select = ({ disabled, ...props }) => (
<div
css={css`
height: 28px;
display: grid;
grid-template-areas: 'select';
align-items: center;
width: 100%;
min-width: 15ch;
border: 1px solid var(--color-neutrals-500);
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
cursor: pointer;
position: relative;
${disabled &&
css`
cursor: not-allowed;
opacity: 0.5;
.light-mode & {
background-color: var(--color-neutrals-100);
}
`}
.dark-mode & {
border: 1px solid var(--color-dark-300);
background-color: var(--color-dark-300);
}
&::after {
content: '';
grid-area: select;
justify-self: end;
width: 0.5rem;
height: 0.25rem;
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
background-color: var(--color-neutrals-700);
.dark-mode & {
background-color: var(--color-dark-700);
}
}
`}
>
<select
disabled={disabled}
css={css`
grid-area: select;
appearance: none;
background-color: transparent;
border: none;
padding: 0 1em 0 0;
margin: 0;
width: 100%;
font-family: inherit;
font-size: 14px;
cursor: inherit;
line-height: inherit;
outline: none;
&:focus + .focus-ring {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border: 2px solid var(--color-brand-500);
border-radius: inherit;
}
.dark-mode & {
color: var(--color-dark-900);
option {
color: var(--color-dark-050);
}
}
`}
{...props}
/>
<span className="focus-ring" />
</div>
);

Select.propTypes = {
disabled: PropTypes.bool,
};

export default Select;
197 changes: 88 additions & 109 deletions src/pages/observability-packs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,20 @@ import DevSiteSeo from '../components/DevSiteSeo';
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 { useQueryParam, StringParam } from 'use-query-params';

const sortOptionValues = ['Alphabetical', 'Reverse', 'Popularity'];
const packContentsFilterValues = [
'Anything',
'Dashboards',
'Alerts',
'Visualizations',
'Synthetics Checks',
'Applications',
];

const ObservabilityPacksPage = ({ data, location }) => {
const {
allObservabilityPacks: { nodes: o11yPacks },
Expand Down Expand Up @@ -106,136 +117,73 @@ const ObservabilityPacksPage = ({ data, location }) => {
.dark-mode & {
background-color: var(--color-dark-100);
}
@media screen and (max-width: 1180px) {
flex-direction: column;
align-items: normal;
> * {
margin: 0.5rem 0;
}
}
`}
>
<span>Showing {filteredPacks.length} results</span>
<div
css={css`
display: flex;
@media screen and (max-width: 1180px) {
flex-direction: column;
align-items: normal;
> * {
margin: 0.5rem 0;
}
}
`}
>
<div
css={css`
margin: 0 0.5rem;
`}
>
<span
css={css`
font-size: 12px;
font-weight: bold;
`}
>
Sort by
</span>
<Dropdown align="left">
<Dropdown.Toggle
css={css`
background-color: var(--color-white);
.dark-mode & {
background-color: transparent;
}
`}
size={Button.SIZE.SMALL}
variant={Button.VARIANT.OUTLINE}
<FormControl>
<Label htmlFor="sortFilter">Sort by</Label>
<Select
id="sortFilter"
value={sortState}
onChange={(e) => {
setSortState(e.target.value);
}}
>
{sortState}
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.MenuItem
onClick={() => {
setSortState('Alphabetical');
}}
>
Alphabetical
</Dropdown.MenuItem>
<Dropdown.MenuItem
onClick={() => {
setSortState('Reverse');
}}
>
Reverse
</Dropdown.MenuItem>
<Dropdown.MenuItem
onClick={() => {
setSortState('Popularity');
}}
>
Popularity
</Dropdown.MenuItem>
</Dropdown.Menu>
</Dropdown>
{sortOptionValues.map((sortOption) => (
<option key={sortOption} value={sortOption}>
{sortOption}
</option>
))}
</Select>
</FormControl>
</div>
<div
css={css`
margin: 0 0.5rem;
`}
>
<span
css={css`
font-size: 12px;
font-weight: bold;
`}
>
Filter packs containing
</span>
<Dropdown align="left">
<Dropdown.Toggle
css={css`
background-color: var(--color-white);
.dark-mode & {
background-color: transparent;
}
`}
size={Button.SIZE.SMALL}
variant={Button.VARIANT.OUTLINE}
<FormControl>
<Label htmlFor="packContentsFilter">
Filter packs containing
</Label>
<Select
id="packContentsFilter"
value={containingFilterState}
onChange={(e) => {
setContainingFilterState(e.target.value);
}}
>
{containingFilterState}
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.MenuItem
onClick={() => {
setContainingFilterState('Anything');
}}
>
Anything
</Dropdown.MenuItem>
<Dropdown.MenuItem
onClick={() => {
setContainingFilterState('Dashboards');
}}
>
Dashboards
</Dropdown.MenuItem>
<Dropdown.MenuItem
onClick={() => {
setContainingFilterState('Alerts');
}}
>
Alerts
</Dropdown.MenuItem>
<Dropdown.MenuItem
onClick={() => {
setContainingFilterState('Visualizations');
}}
>
Visualizations
</Dropdown.MenuItem>
<Dropdown.MenuItem
onClick={() => {
setContainingFilterState('Synthetics');
}}
>
Synthetic Checks
</Dropdown.MenuItem>
<Dropdown.MenuItem
onClick={() => {
setContainingFilterState('Applications');
}}
>
Applications
</Dropdown.MenuItem>
</Dropdown.Menu>
</Dropdown>
{packContentsFilterValues.map((packContentsItem) => (
<option key={packContentsItem} value={packContentsItem}>
{packContentsItem}
</option>
))}
</Select>
</FormControl>
</div>
</div>
<div>
Expand Down Expand Up @@ -304,4 +252,35 @@ export const pageQuery = graphql`
}
`;

const Label = ({ children, htmlFor }) => (
<label
htmlFor={htmlFor}
css={css`
display: block;
font-size: 12px;
font-weight: bold;
margin-bottom: 0.25rem;
`}
>
{children}
</label>
);

Label.propTypes = {
children: PropTypes.node,
htmlFor: PropTypes.string,
};

const FormControl = ({ children }) => (
<div
css={css`
&:not(:last-child) {
margin-bottom: 1.5rem;
}
`}
>
{children}
</div>
);

export default ObservabilityPacksPage;

0 comments on commit 8fa0a46

Please sign in to comment.