Skip to content

Commit 194bd8b

Browse files
kapantzakkapantzak
authored
Update select inputs (#584)
* Select: Make tiny size the default * Set tiny as the default size of TextInput and remove other sizes * Set tiny as the default button size and add large size * Update test snapshots * Fix button.stories * fixup! Fix button.stories
1 parent 4f8015b commit 194bd8b

6 files changed

Lines changed: 79 additions & 80 deletions

File tree

‎src/components/button/__snapshots__/button.test.js.snap‎

Lines changed: 39 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,19 @@ exports[`Borderless Button renders 1`] = `
77
align-items: center;
88
position: relative;
99
font-weight: 500;
10-
font-size: 14px;
10+
font-size: 12px;
1111
white-space: nowrap;
1212
word-break: keep-all;
1313
cursor: pointer;
1414
pointer-events: auto;
15-
padding: 8px;
15+
padding: 4px 12px;
1616
transition: all 150ms;
1717
background-color: rgba(255,255,255,0.0);
1818
color: #00AB44;
1919
border-width: 1px;
2020
border-style: solid;
2121
border-color: rgba(255,255,255,0.0);
22-
border-radius: 4px;
22+
border-radius: 2px;
2323
box-sizing: border-box;
2424
text-decoration: none;
2525
}
@@ -56,8 +56,8 @@ exports[`Borderless Button renders 1`] = `
5656
}
5757
5858
.c0.c0 .button-icon {
59-
height: 16px;
60-
width: 16px;
59+
height: 14px;
60+
width: 14px;
6161
fill: #00AB44;
6262
}
6363
@@ -79,7 +79,8 @@ exports[`Borderless Button renders 1`] = `
7979
class="c0"
8080
colors="[object Object]"
8181
flavour="borderless"
82-
padding="2"
82+
padding="1,3"
83+
round="0.5"
8384
texttransform="firstLetter"
8485
>
8586
<span>
@@ -95,19 +96,19 @@ exports[`Button states renders loading icon 1`] = `
9596
align-items: center;
9697
position: relative;
9798
font-weight: 500;
98-
font-size: 14px;
99+
font-size: 12px;
99100
white-space: nowrap;
100101
word-break: keep-all;
101102
cursor: pointer;
102103
pointer-events: auto;
103-
padding: 8px;
104+
padding: 4px 12px;
104105
transition: all 150ms;
105106
background-color: #00AB44;
106107
color: #F6F7F7;
107108
border-width: 1px;
108109
border-style: solid;
109110
border-color: #00AB44;
110-
border-radius: 4px;
111+
border-radius: 2px;
111112
box-sizing: border-box;
112113
text-decoration: none;
113114
}
@@ -144,8 +145,8 @@ exports[`Button states renders loading icon 1`] = `
144145
}
145146
146147
.c0.c0 .button-icon {
147-
height: 16px;
148-
width: 16px;
148+
height: 14px;
149+
width: 14px;
149150
fill: #F6F7F7;
150151
}
151152
@@ -180,7 +181,8 @@ exports[`Button states renders loading icon 1`] = `
180181
<button
181182
class="c0"
182183
colors="[object Object]"
183-
padding="2"
184+
padding="1,3"
185+
round="0.5"
184186
texttransform="firstLetter"
185187
>
186188
<svg
@@ -216,19 +218,19 @@ exports[`Button states renders only icon 1`] = `
216218
align-items: center;
217219
position: relative;
218220
font-weight: 500;
219-
font-size: 14px;
221+
font-size: 12px;
220222
white-space: nowrap;
221223
word-break: keep-all;
222224
cursor: pointer;
223225
pointer-events: auto;
224-
padding: 8px;
226+
padding: 4px 12px;
225227
transition: all 150ms;
226228
background-color: rgba(255,255,255,0.0);
227229
color: #00AB44;
228230
border-width: 1px;
229231
border-style: solid;
230232
border-color: #00AB44;
231-
border-radius: 4px;
233+
border-radius: 2px;
232234
box-sizing: border-box;
233235
text-decoration: none;
234236
}
@@ -265,8 +267,8 @@ exports[`Button states renders only icon 1`] = `
265267
}
266268
267269
.c0.c0 .button-icon {
268-
height: 16px;
269-
width: 16px;
270+
height: 14px;
271+
width: 14px;
270272
fill: #00AB44;
271273
}
272274
@@ -305,7 +307,8 @@ exports[`Button states renders only icon 1`] = `
305307
class="c0"
306308
colors="[object Object]"
307309
flavour="hollow"
308-
padding="2"
310+
padding="1,3"
311+
round="0.5"
309312
texttransform="firstLetter"
310313
>
311314
<div
@@ -346,7 +349,7 @@ exports[`Button states renders smaller only icon 1`] = `
346349
border-width: 1px;
347350
border-style: solid;
348351
border-color: #00AB44;
349-
border-radius: 4px;
352+
border-radius: 2px;
350353
box-sizing: border-box;
351354
text-decoration: none;
352355
}
@@ -383,8 +386,8 @@ exports[`Button states renders smaller only icon 1`] = `
383386
}
384387
385388
.c0.c0 .button-icon {
386-
height: 16px;
387-
width: 16px;
389+
height: 14px;
390+
width: 14px;
388391
fill: #00AB44;
389392
}
390393
@@ -424,6 +427,7 @@ exports[`Button states renders smaller only icon 1`] = `
424427
colors="[object Object]"
425428
flavour="hollow"
426429
padding="1,3"
430+
round="0.5"
427431
texttransform="firstLetter"
428432
>
429433
<div
@@ -452,19 +456,19 @@ exports[`Default Button renders 1`] = `
452456
align-items: center;
453457
position: relative;
454458
font-weight: 500;
455-
font-size: 14px;
459+
font-size: 12px;
456460
white-space: nowrap;
457461
word-break: keep-all;
458462
cursor: pointer;
459463
pointer-events: auto;
460-
padding: 8px;
464+
padding: 4px 12px;
461465
transition: all 150ms;
462466
background-color: #00AB44;
463467
color: #F6F7F7;
464468
border-width: 1px;
465469
border-style: solid;
466470
border-color: #00AB44;
467-
border-radius: 4px;
471+
border-radius: 2px;
468472
box-sizing: border-box;
469473
text-decoration: none;
470474
}
@@ -497,8 +501,8 @@ exports[`Default Button renders 1`] = `
497501
}
498502
499503
.c0.c0 .button-icon {
500-
height: 16px;
501-
width: 16px;
504+
height: 14px;
505+
width: 14px;
502506
fill: #F6F7F7;
503507
}
504508
@@ -519,7 +523,8 @@ exports[`Default Button renders 1`] = `
519523
<button
520524
class="c0"
521525
colors="[object Object]"
522-
padding="2"
526+
padding="1,3"
527+
round="0.5"
523528
texttransform="fullWidth"
524529
>
525530
<span>
@@ -535,19 +540,19 @@ exports[`Hollow Button renders 1`] = `
535540
align-items: center;
536541
position: relative;
537542
font-weight: 500;
538-
font-size: 14px;
543+
font-size: 12px;
539544
white-space: nowrap;
540545
word-break: keep-all;
541546
cursor: pointer;
542547
pointer-events: auto;
543-
padding: 8px;
548+
padding: 4px 12px;
544549
transition: all 150ms;
545550
background-color: rgba(255,255,255,0.0);
546551
color: #00AB44;
547552
border-width: 1px;
548553
border-style: solid;
549554
border-color: #00AB44;
550-
border-radius: 4px;
555+
border-radius: 2px;
551556
box-sizing: border-box;
552557
text-decoration: none;
553558
}
@@ -584,8 +589,8 @@ exports[`Hollow Button renders 1`] = `
584589
}
585590
586591
.c0.c0 .button-icon {
587-
height: 16px;
588-
width: 16px;
592+
height: 14px;
593+
width: 14px;
589594
fill: #00AB44;
590595
}
591596
@@ -607,7 +612,8 @@ exports[`Hollow Button renders 1`] = `
607612
class="c0"
608613
colors="[object Object]"
609614
flavour="hollow"
610-
padding="2"
615+
padding="1,3"
616+
round="0.5"
611617
texttransform="firstLetter"
612618
>
613619
<span>

‎src/components/button/button.stories.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export const RadioButtonGroup = args => {
3131
<ButtonGroup
3232
items={radioButtonItems.map(item => ({ ...args, ...item }))}
3333
checked={checked}
34+
buttonProps={args}
3435
onChange={onChange}
3536
/>
3637
)
@@ -51,7 +52,7 @@ export default {
5152
disabled: false,
5253
danger: false,
5354
warning: false,
54-
small: false,
55+
large: false,
5556
neutral: false,
5657
},
5758
argTypes: {
@@ -68,7 +69,7 @@ export default {
6869
disabled: { control: "boolean" },
6970
danger: { control: "boolean" },
7071
warning: { control: "boolean" },
71-
small: { control: "boolean" },
72+
large: { control: "boolean" },
7273
neutral: { control: "boolean" },
7374
},
7475
}

‎src/components/button/styled.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ const colorsByFlavour = ({ flavour = DEFAULT, danger, warning, iconColor }) => {
123123

124124
export const StyledButton = styled.button.attrs(
125125
({ groupFirst, groupLast, groupMiddle, ...props }) => ({
126-
padding: props.padding || props.tiny ? [0.5, 1] : props.small ? [1, 3] : [2],
126+
padding: props.large ? [1.5, 4] : [1, 3],
127127
colors: colorsByFlavour(props),
128128
round: groupFirst
129129
? { side: "left", size: 0.5 }
@@ -143,7 +143,7 @@ export const StyledButton = styled.button.attrs(
143143
${alignSelf};
144144
145145
font-weight: ${({ strong }) => (strong ? 700 : 500)};
146-
font-size: ${({ small, tiny }) => (tiny ? "10px" : small ? "12px" : "14px")};
146+
font-size: ${({ large }) => (large ? "16px" : "12px")};
147147
white-space: nowrap;
148148
word-break: keep-all;
149149

‎src/components/input/styled.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled, { css } from "styled-components"
22
import { Icon } from "@/components/icon"
33
import Flex from "@/components/templates/flex"
4-
import { TextSmall, TextMicro } from "@/components/typography"
4+
import { TextSmall } from "@/components/typography"
55
import { getColor, getValidatedControlColor } from "@/theme/utils"
66

77
const disabledCursorSupport = css`
@@ -22,19 +22,19 @@ export const Input = styled(Flex).attrs(props => ({
2222
_focus: {
2323
border: props.error ? "errorText" : "inputBorderFocus",
2424
},
25-
padding: props.size === "tiny" ? [0.5, 1] : props.size === "small" ? [1, 2] : [2, 3],
26-
height: props.size === "tiny" ? 6 : props.size === "small" ? 7 : 9,
25+
padding: [0.5, 1],
26+
height: 6,
2727
...props,
2828
}))`
29-
font-size: ${({ size }) => (size === "tiny" ? "11px" : size === "small" ? "12px" : "14px")};
29+
font-size: 12px;
3030
color: ${({ disabled, hasValue }) =>
3131
hasValue ? getColor("text") : disabled ? getColor("placeholder") : getColor("textLite")};
3232
${({ hasIconLeft }) => hasIconLeft && "padding-left: 24px;"}
3333
${({ hasIconRight, hasIndicator }) =>
3434
(hasIconRight || hasIndicator) && `padding-right: ${hasIconRight && hasIndicator ? 48 : 24}px;`}
3535
3636
&::placeholder {
37-
font-size: ${({ size }) => (size === "tiny" ? "11px" : size === "small" ? "12px" : "14px")};
37+
font-size: 12px;
3838
color: ${getColor("placeholder")};
3939
opacity: ${({ disabled }) => (disabled ? 0.4 : 1)};
4040
font-weight: normal;
@@ -49,7 +49,7 @@ export const StyledLabel = styled.label`
4949
${disabledCursorSupport};
5050
`
5151
export const LabelText = styled(Flex).attrs(props => ({
52-
as: props.size === "tiny" ? TextMicro : TextSmall,
52+
as: TextSmall,
5353
strong: true,
5454
alignItems: "center",
5555
flex: false,

0 commit comments

Comments
 (0)