fix(my-joy-beta): use formlabel on package filters

fixes #1031
This commit is contained in:
Sérgio Ramos 2018-01-29 20:21:01 +00:00 committed by Sérgio Ramos
parent 563a112d4f
commit 26894e25d2
23 changed files with 47 additions and 28 deletions

View File

@ -12,7 +12,7 @@
"lint-ci": "eslint . --ext .js --ext .md", "lint-ci": "eslint . --ext .js --ext .md",
"lint": "eslint . --fix --ext .js --ext .md", "lint": "eslint . --fix --ext .js --ext .md",
"test-ci": "NODE_ENV=test joyent-react-scripts test --env=jsdom --testPathIgnorePatterns='.ui.js'", "test-ci": "NODE_ENV=test joyent-react-scripts test --env=jsdom --testPathIgnorePatterns='.ui.js'",
"test": "NODE_ENV=test joyent-react-scripts test --env=jsdom", "test": "DEFAULT_TIMEOUT_INTERVAL=50000 NODE_ENV=test joyent-react-scripts test --env=jsdom",
"prepublish": "echo 0" "prepublish": "echo 0"
}, },
"dependencies": { "dependencies": {

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

View File

@ -1340,25 +1340,31 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
} }
.c9 { .c9 {
box-sizing: content-box; width: 9rem;
height: 9rem;
background: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
border-radius: 0.25rem;
box-sizing: border-box;
padding-top: 0.75rem;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-flex: 1 0 auto; margin-bottom: 1.25rem;
-ms-flex: 1 0 auto; -webkit-animation: eMLfYp 0.2s ease-in-out;
flex: 1 0 auto; animation: eMLfYp 0.2s ease-in-out;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
} }
.c1 { .c1 {

View File

@ -267,6 +267,10 @@ exports[`renders <Filters /> without throwing 1`] = `
display: block; display: block;
color: rgb(70,70,70); color: rgb(70,70,70);
text-align: left; text-align: left;
margin-right: 0.75rem;
font-weight: bold;
white-space: pre;
font-size: 0.8125rem;
} }
.c1 { .c1 {
@ -422,6 +426,7 @@ exports[`renders <Filters /> without throwing 1`] = `
> >
<label <label
className="c9" className="c9"
htmlFor="n"
> >
<div <div
className="c10" className="c10"
@ -487,6 +492,7 @@ exports[`renders <Filters /> without throwing 1`] = `
> >
<label <label
className="c9" className="c9"
htmlFor="p"
> >
<div <div
className="c10" className="c10"
@ -552,6 +558,7 @@ exports[`renders <Filters /> without throwing 1`] = `
> >
<label <label
className="c9" className="c9"
htmlFor="r"
> >
<div <div
className="c10" className="c10"
@ -617,6 +624,7 @@ exports[`renders <Filters /> without throwing 1`] = `
> >
<label <label
className="c9" className="c9"
htmlFor="t"
> >
<div <div
className="c10" className="c10"
@ -689,6 +697,7 @@ exports[`renders <Filters /> without throwing 1`] = `
> >
<label <label
className="c9" className="c9"
htmlFor="v"
> >
SSD SSD
</label> </label>
@ -1292,6 +1301,10 @@ exports[`renders <Package /> without throwing 1`] = `
display: block; display: block;
color: rgb(70,70,70); color: rgb(70,70,70);
text-align: left; text-align: left;
margin-right: 0.75rem;
font-weight: bold;
white-space: pre;
font-size: 0.8125rem;
} }
.c6 { .c6 {
@ -1468,6 +1481,7 @@ exports[`renders <Package /> without throwing 1`] = `
> >
<label <label
className="c10" className="c10"
htmlFor="l"
> >
test test
</label> </label>

View File

@ -6,7 +6,6 @@ import Flex from 'styled-flex-component';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import { Row, Col } from 'react-styled-flexboxgrid'; import { Row, Col } from 'react-styled-flexboxgrid';
import titleCase from 'title-case'; import titleCase from 'title-case';
import is from 'styled-is';
import { import {
H3, H3,

View File

@ -19,7 +19,7 @@ import {
TableTd, TableTd,
Radio, Radio,
Checkbox, Checkbox,
Label, FormLabel,
GeneralIcon, GeneralIcon,
StorageIcon, StorageIcon,
CpuIcon, CpuIcon,
@ -67,55 +67,55 @@ export const Filters = ({ resetFilters }) => (
<Flex alignCenter justifyBetween> <Flex alignCenter justifyBetween>
<FormGroup type="checkbox" name="compute-optimized" field={Field}> <FormGroup type="checkbox" name="compute-optimized" field={Field}>
<Checkbox> <Checkbox>
<Label> <FormLabel>
<Flex alignCenter> <Flex alignCenter>
{GroupIcons.COMPUTE} {GroupIcons.COMPUTE}
<Margin right={1} left={1}> <Margin right={1} left={1}>
Compute Optimized Compute Optimized
</Margin> </Margin>
</Flex> </Flex>
</Label> </FormLabel>
</Checkbox> </Checkbox>
</FormGroup> </FormGroup>
<FormGroup type="checkbox" name="memory-optimized" field={Field}> <FormGroup type="checkbox" name="memory-optimized" field={Field}>
<Checkbox> <Checkbox>
<Label> <FormLabel>
<Flex alignCenter> <Flex alignCenter>
{GroupIcons.MEMORY} {GroupIcons.MEMORY}
<Margin left={1} right={2}> <Margin left={1} right={2}>
Memory Optimized Memory Optimized
</Margin> </Margin>
</Flex> </Flex>
</Label> </FormLabel>
</Checkbox> </Checkbox>
</FormGroup> </FormGroup>
<FormGroup type="checkbox" name="general-purpose" field={Field}> <FormGroup type="checkbox" name="general-purpose" field={Field}>
<Checkbox> <Checkbox>
<Label> <FormLabel>
<Flex alignCenter> <Flex alignCenter>
{GroupIcons.GENERAL} {GroupIcons.GENERAL}
<Margin left={1} right={2}> <Margin left={1} right={2}>
General Purpose General Purpose
</Margin> </Margin>
</Flex> </Flex>
</Label> </FormLabel>
</Checkbox> </Checkbox>
</FormGroup> </FormGroup>
<FormGroup type="checkbox" name="storage-optimized" field={Field}> <FormGroup type="checkbox" name="storage-optimized" field={Field}>
<Checkbox> <Checkbox>
<Label> <FormLabel>
<Flex alignCenter> <Flex alignCenter>
{GroupIcons.STORAGE} {GroupIcons.STORAGE}
<Margin left={1} right={2}> <Margin left={1} right={2}>
Storage Optimized Storage Optimized
</Margin> </Margin>
</Flex> </Flex>
</Label> </FormLabel>
</Checkbox> </Checkbox>
</FormGroup> </FormGroup>
<FormGroup type="checkbox" name="ssd" field={Field}> <FormGroup type="checkbox" name="ssd" field={Field}>
<Checkbox> <Checkbox>
<Label>SSD</Label> <FormLabel>SSD</FormLabel>
</Checkbox> </Checkbox>
</FormGroup> </FormGroup>
</Flex> </Flex>
@ -146,7 +146,7 @@ export const Package = ({
<Flex alignCenter> <Flex alignCenter>
{GroupIcons[group]} {GroupIcons[group]}
<Margin left={1} right={2}> <Margin left={1} right={2}>
<Label>{name}</Label> <FormLabel>{name}</FormLabel>
</Margin> </Margin>
</Flex> </Flex>
</Radio> </Radio>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB