Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit194bd8b

Browse files
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 parent4f8015b commit194bd8b

File tree

6 files changed

+79
-80
lines changed

6 files changed

+79
-80
lines changed

‎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
exportconstStyledButton=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
importstyled,{css}from"styled-components"
22
import{Icon}from"@/components/icon"
33
importFlexfrom"@/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
constdisabledCursorSupport=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
exportconstLabelText=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)
[8]ページ先頭
©2009-2025 Movatter.jp