Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix(my-joy-beta): adjust select inputs width in affinity

Browse Source 
fixes #1090
This commit is contained in:
Sérgio Ramos 2018-01-25 17:07:20 +00:00 committed by Sérgio Ramos
parent 2ebace64c0
commit 15213ba6ce
4 changed files with 480 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

498
packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap
View File

@ -44,7 +44,7 @@ exports[`renders <Rule/> without throwing 1`] = `
margin-bottom: 2rem;
}
.c8 {
.c12 {
margin-right: 0.25rem;
}
@ -76,6 +76,51 @@ exports[`renders <Rule/> without throwing 1`] = `
}
.c5 {
width: 4.125rem;
position: relative;
padding: 0.75rem;
padding-right: 1.5625rem;
width: auto;
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
background: transparent;
padding: 0;
padding-right: 0.75rem;
display: inline;
height: 1.5rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-height: 0;
color: rgb(216,216,216);
margin: 0 0.375rem;
}
.c7 {
width: 5.625rem;
position: relative;
padding: 0.75rem;
padding-right: 1.5625rem;
width: auto;
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
background: transparent;
padding: 0;
padding-right: 0.75rem;
display: inline;
height: 1.5rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-height: 0;
color: rgb(216,216,216);
margin: 0 0.375rem;
}
.c10 {
width: 7.5rem;
position: relative;
padding: 0.75rem;
padding-right: 1.5625rem;
@ -120,7 +165,7 @@ exports[`renders <Rule/> without throwing 1`] = `
-webkit-padding-after: 0;
}
.c9 {
.c13 {
box-sizing: border-box;
width: 18.75rem;
height: 3rem;
@ -156,41 +201,41 @@ exports[`renders <Rule/> without throwing 1`] = `
outline: 0;
}
.c9::-webkit-input-placeholder {
.c13::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c9::-moz-placeholder {
.c13::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:-ms-input-placeholder {
.c13:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:invalid {
.c13:invalid {
box-shadow: none;
}
.c9:disabled {
.c13:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
}
.c9:disabled::-webkit-input-placeholder {
.c13:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:disabled::-moz-placeholder {
.c13:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:disabled:-ms-input-placeholder {
.c13:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:focus {
.c13:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@ -227,7 +272,7 @@ exports[`renders <Rule/> without throwing 1`] = `
right: 0.375rem;
}
.c7 {
.c9 {
position: relative;
display: -webkit-inline-box;
display: -webkit-inline-flex;
@ -242,7 +287,7 @@ exports[`renders <Rule/> without throwing 1`] = `
margin-left: 0;
}
.c7:after {
.c9:after {
content: '';
width: 0.625rem;
height: 0.625rem;
@ -256,7 +301,7 @@ exports[`renders <Rule/> without throwing 1`] = `
right: 0.75rem;
}
.c7:after {
.c9:after {
right: 0.375rem;
}
@ -285,6 +330,8 @@ exports[`renders <Rule/> without throwing 1`] = `
appearance: none;
min-height: 0;
max-width: 22.1875rem;
width: 4.125rem;
max-width: 4.125rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
@ -335,6 +382,160 @@ exports[`renders <Rule/> without throwing 1`] = `
outline: 0;
}
.c8 {
box-sizing: border-box;
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
background: transparent;
padding: 0;
padding-right: 0.75rem;
display: inline;
height: 1.5rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-height: 0;
max-width: 22.1875rem;
width: 5.625rem;
max-width: 5.625rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c8::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c8::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c8:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c8:invalid {
box-shadow: none;
}
.c8:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
}
.c8:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c8:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c8:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c8:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c11 {
box-sizing: border-box;
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
background: transparent;
padding: 0;
padding-right: 0.75rem;
display: inline;
height: 1.5rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-height: 0;
max-width: 22.1875rem;
width: 7.5rem;
max-width: 7.5rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c11::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c11::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c11:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c11:invalid {
box-shadow: none;
}
.c11:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
}
.c11:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c11:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c11:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c11:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<div
className="c0"
>
@ -356,12 +557,14 @@ exports[`renders <Rule/> without throwing 1`] = `
<div
className="c4"
disabled={false}
width="4.125rem"
>
<select
className="c5 c6"
disabled={false}
id="k"
onBlur={undefined}
width="4.125rem"
>
<option
value="must"
@ -390,12 +593,14 @@ exports[`renders <Rule/> without throwing 1`] = `
<div
className="c4"
disabled={false}
width="5.625rem"
>
<select
className="c5 c6"
className="c7 c8"
disabled={false}
id="l"
onBlur={undefined}
width="5.625rem"
>
<option
value="same"
@ -422,14 +627,16 @@ exports[`renders <Rule/> without throwing 1`] = `
style={undefined}
>
<div
className="c7"
className="c9"
disabled={false}
width="7.5rem"
>
<select
className="c5 c6"
className="c10 c11"
disabled={false}
id="m"
onBlur={undefined}
width="7.5rem"
>
<option
value="name"
@ -451,17 +658,19 @@ exports[`renders <Rule/> without throwing 1`] = `
style={undefined}
>
<div
className="c8"
className="c12"
>
<div
className="c4"
disabled={false}
width="7.5rem"
>
<select
className="c5 c6"
className="c10 c11"
disabled={false}
id="n"
onBlur={undefined}
width="7.5rem"
>
<option
value="equalling"
@ -499,7 +708,7 @@ exports[`renders <Rule/> without throwing 1`] = `
style={undefined}
>
<input
className="c9"
className="c13"
disabled={false}
id="o"
onBlur={null}
@ -517,7 +726,7 @@ exports[`renders <Rule/> without throwing 2`] = `
margin-bottom: 2rem;
}
.c8 {
.c12 {
margin-right: 0.25rem;
}
@ -549,6 +758,51 @@ exports[`renders <Rule/> without throwing 2`] = `
}
.c5 {
width: 4.125rem;
position: relative;
padding: 0.75rem;
padding-right: 1.5625rem;
width: auto;
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
background: transparent;
padding: 0;
padding-right: 0.75rem;
display: inline;
height: 1.5rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-height: 0;
color: rgb(216,216,216);
margin: 0 0.375rem;
}
.c7 {
width: 5.625rem;
position: relative;
padding: 0.75rem;
padding-right: 1.5625rem;
width: auto;
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
background: transparent;
padding: 0;
padding-right: 0.75rem;
display: inline;
height: 1.5rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-height: 0;
color: rgb(216,216,216);
margin: 0 0.375rem;
}
.c10 {
width: 7.5rem;
position: relative;
padding: 0.75rem;
padding-right: 1.5625rem;
@ -593,7 +847,7 @@ exports[`renders <Rule/> without throwing 2`] = `
-webkit-padding-after: 0;
}
.c9 {
.c13 {
box-sizing: border-box;
width: 18.75rem;
height: 3rem;
@ -629,41 +883,41 @@ exports[`renders <Rule/> without throwing 2`] = `
outline: 0;
}
.c9::-webkit-input-placeholder {
.c13::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c9::-moz-placeholder {
.c13::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:-ms-input-placeholder {
.c13:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:invalid {
.c13:invalid {
box-shadow: none;
}
.c9:disabled {
.c13:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
}
.c9:disabled::-webkit-input-placeholder {
.c13:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:disabled::-moz-placeholder {
.c13:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:disabled:-ms-input-placeholder {
.c13:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c9:focus {
.c13:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@ -700,7 +954,7 @@ exports[`renders <Rule/> without throwing 2`] = `
right: 0.375rem;
}
.c7 {
.c9 {
position: relative;
display: -webkit-inline-box;
display: -webkit-inline-flex;
@ -715,7 +969,7 @@ exports[`renders <Rule/> without throwing 2`] = `
margin-left: 0;
}
.c7:after {
.c9:after {
content: '';
width: 0.625rem;
height: 0.625rem;
@ -729,7 +983,7 @@ exports[`renders <Rule/> without throwing 2`] = `
right: 0.75rem;
}
.c7:after {
.c9:after {
right: 0.375rem;
}
@ -758,6 +1012,8 @@ exports[`renders <Rule/> without throwing 2`] = `
appearance: none;
min-height: 0;
max-width: 22.1875rem;
width: 4.125rem;
max-width: 4.125rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
@ -808,6 +1064,160 @@ exports[`renders <Rule/> without throwing 2`] = `
outline: 0;
}
.c8 {
box-sizing: border-box;
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
background: transparent;
padding: 0;
padding-right: 0.75rem;
display: inline;
height: 1.5rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-height: 0;
max-width: 22.1875rem;
width: 5.625rem;
max-width: 5.625rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c8::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c8::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c8:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c8:invalid {
box-shadow: none;
}
.c8:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
}
.c8:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c8:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c8:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c8:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c11 {
box-sizing: border-box;
width: 18.75rem;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
background: transparent;
padding: 0;
padding-right: 0.75rem;
display: inline;
height: 1.5rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-height: 0;
max-width: 22.1875rem;
width: 7.5rem;
max-width: 7.5rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c11::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c11::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c11:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c11:invalid {
box-shadow: none;
}
.c11:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
}
.c11:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c11:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c11:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c11:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<div
className="c0"
>
@ -829,12 +1239,14 @@ exports[`renders <Rule/> without throwing 2`] = `
<div
className="c4"
disabled={false}
width="4.125rem"
>
<select
className="c5 c6"
disabled={false}
id="p"
onBlur={undefined}
width="4.125rem"
>
<option
value="must"
@ -863,12 +1275,14 @@ exports[`renders <Rule/> without throwing 2`] = `
<div
className="c4"
disabled={false}
width="5.625rem"
>
<select
className="c5 c6"
className="c7 c8"
disabled={false}
id="q"
onBlur={undefined}
width="5.625rem"
>
<option
value="same"
@ -895,14 +1309,16 @@ exports[`renders <Rule/> without throwing 2`] = `
style={undefined}
>
<div
className="c7"
className="c9"
disabled={false}
width="7.5rem"
>
<select
className="c5 c6"
className="c10 c11"
disabled={false}
id="r"
onBlur={undefined}
width="7.5rem"
>
<option
value="name"
@ -924,17 +1340,19 @@ exports[`renders <Rule/> without throwing 2`] = `
style={undefined}
>
<div
className="c8"
className="c12"
>
<div
className="c4"
disabled={false}
width="7.5rem"
>
<select
className="c5 c6"
className="c10 c11"
disabled={false}
id="s"
onBlur={undefined}
width="7.5rem"
>
<option
value="equalling"
@ -972,7 +1390,7 @@ exports[`renders <Rule/> without throwing 2`] = `
style={undefined}
>
<input
className="c9"
className="c13"
disabled={false}
id="t"
onBlur={null}

10
packages/my-joy-beta/src/components/create-instance/affinity.js
View File

@ -1,15 +1,15 @@
import React, { Fragment } from 'react';
import { Margin } from 'styled-components-spacing';
import Flex from 'styled-flex-component';
import { Field } from 'redux-form';
import titleCase from 'title-case';
import remcalc from 'remcalc';
import { H5, Select, Input, FormGroup } from 'joyent-ui-toolkit';
const Values = touched => (
<Margin right={1}>
<Select embedded touched={touched}>
<Select touched={touched} embedded width={remcalc(120)}>
<option value="equalling">equalling</option>
<option value="not-equalling">not equalling</option>
<option value="containing">containing</option>
@ -26,7 +26,7 @@ export const Rule = rule => (
The instance
</H5>
<FormGroup name="rule-instance-conditional" field={Field}>
<Select embedded touched={rule['rule-instance-conditional']}>
<Select touched={rule['rule-instance-conditional']} width={remcalc(66)} embedded>
<option value="must">must</option>
<option value="should">should</option>
</Select>
@ -35,7 +35,7 @@ export const Rule = rule => (
be on
</H5>
<FormGroup name="rule-instance-placement" field={Field}>
<Select embedded touched={rule['rule-instance-placement']}>
<Select touched={rule['rule-instance-placement']} width={remcalc(90)} embedded>
<option value="same">the same</option>
<option value="different">a different</option>
</Select>
@ -44,7 +44,7 @@ export const Rule = rule => (
node as the instance(s) identified by the
</H5>
<FormGroup name="rule-type" field={Field}>
<Select embedded left touched={rule['rule-type']}>
<Select touched={rule['rule-type']} width={remcalc(120)} embedded left>
<option value="name">instance name</option>
<option value="tag">tag</option>
</Select>

9
packages/ui-toolkit/src/form/base/input.js
View File

@ -91,11 +91,11 @@ const style = css`
}
${is('small')`
width: ${remcalc(120)}
width: ${remcalc(120)};
`};
${is('big')`
width: ${remcalc(355)}
width: ${remcalc(355)};
`};
${is('monospace')`
@ -161,6 +161,11 @@ const style = css`
max-width: ${remcalc(355)};
`};
${is('width')`
width: ${props => props.width};
max-width: ${props => props.width};
`};
${is('mono')`
font-family: monospace;
`};

13
packages/ui-toolkit/src/theme/index.js
View File

@ -86,8 +86,12 @@ export const font = {
abbrBorderColor: base.secondary,
textMuted: base.secondary,
family: '"Libre Franklin"',
families: '"Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif',
href: () => `${document.location.protocol}//${document.location.host}/fonts/css?family=Libre+Franklin:400,500,600`,
families:
'"Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif',
href: () =>
`${document.location.protocol}//${
document.location.host
}/fonts/css?family=Libre+Franklin:400,500,600`,
weight: {
semibold: 600,
medium: 500,
@ -102,7 +106,10 @@ export const monoFont = {
textMuted: base.secondary,
family: '"Roboto Mono"',
families: '"Roboto Mono", monospace',
href: () => `${document.location.protocol}//${document.location.host}/fonts/css?family=Roboto+Mono:700,400`,
href: () =>
`${document.location.protocol}//${
document.location.host
}/fonts/css?family=Roboto+Mono:700,400`,
weight: {
bold: 700,
normal: 400