Skip to content

Commit a77f57b

Browse files
evenchange4evenchange4
authored
feat(UI): add custom theme color for kind props in Checkbox Component (#662)
Issue: ## [](#what-i-did)What I did ## [](#how-to-test)How to test
1 parent 40e3cdc commit a77f57b

File tree

2 files changed

+333
-0
lines changed

2 files changed

+333
-0
lines changed

‎packages/mcs-lite-ui/src/Checkbox/Checkbox.example.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
import * as React from 'react';
33
import { storiesOf } from '@storybook/react';
44
import { withInfo } from '@storybook/addon-info';
5+
import { ThemeProvider } from 'styled-components';
6+
import { theme } from 'mcs-lite-theme';
57
import IconPlay from 'mcs-lite-icon/lib/IconPlay';
68
import IconCheck from './IconCheck';
79
import Checkbox from '.';
@@ -71,6 +73,36 @@ storiesOf('Checkbox', module)
7173
</div>
7274
)),
7375
)
76+
.add(
77+
'With custom theme color for kind props',
78+
withInfo({
79+
text: 'custom color',
80+
inline: true,
81+
propTables: [Checkbox],
82+
})(() => (
83+
<ThemeProvider
84+
theme={{
85+
...theme,
86+
color: {
87+
...theme.color,
88+
'#9056ff': '#9056ff',
89+
'#1576af': '#1576af',
90+
'#ab6a32': '#ab6a32',
91+
},
92+
}}
93+
>
94+
<div style={{ display: 'flex', flexDirection: 'column' }}>
95+
<StatefulCheckbox kind="default" /> default
96+
<StatefulCheckbox kind="primary" /> primary
97+
<StatefulCheckbox kind="success" /> success
98+
<StatefulCheckbox kind="error" /> error
99+
<StatefulCheckbox kind="#9056ff" /> #9056ff
100+
<StatefulCheckbox kind="#1576af" /> #1576af
101+
<StatefulCheckbox kind="#ab6a32" /> #ab6a32
102+
</div>
103+
</ThemeProvider>
104+
)),
105+
)
74106
.add(
75107
'With render props',
76108
withInfo({

‎packages/mcs-lite-ui/src/Checkbox/__snapshots__/Checkbox.example.storyshot‎

Lines changed: 301 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,307 @@ exports[`Storyshots Checkbox API 1`] = `
137137
</div>
138138
`;
139139

140+
exports[`Storyshots Checkbox With custom theme color for kind props 1`] = `
141+
.c2 {
142+
line-height: 1em;
143+
font-size: 12px;
144+
border-radius: 2px;
145+
width: 14px;
146+
height: 14px;
147+
box-sizing: border-box;
148+
-webkit-user-select: none;
149+
-moz-user-select: none;
150+
-ms-user-select: none;
151+
user-select: none;
152+
cursor: pointer;
153+
-webkit-transition: background-color 0.5s cubic-bezier(0.23,1,0.32,1),border 0.3s cubic-bezier(0.23,1,0.32,1);
154+
transition: background-color 0.5s cubic-bezier(0.23,1,0.32,1),border 0.3s cubic-bezier(0.23,1,0.32,1);
155+
color: #FFFFFF;
156+
background-color: #00A1DE;
157+
border: 1px solid rgb(0,130,179);
158+
}
159+
160+
.c0 {
161+
line-height: 1em;
162+
font-size: 12px;
163+
border-radius: 2px;
164+
width: 14px;
165+
height: 14px;
166+
box-sizing: border-box;
167+
-webkit-user-select: none;
168+
-moz-user-select: none;
169+
-ms-user-select: none;
170+
user-select: none;
171+
cursor: pointer;
172+
-webkit-transition: background-color 0.5s cubic-bezier(0.23,1,0.32,1),border 0.3s cubic-bezier(0.23,1,0.32,1);
173+
transition: background-color 0.5s cubic-bezier(0.23,1,0.32,1),border 0.3s cubic-bezier(0.23,1,0.32,1);
174+
color: #999A94;
175+
background-color: #FAFAFA;
176+
border: 1px solid rgb(202,202,202);
177+
}
178+
179+
.c3 {
180+
line-height: 1em;
181+
font-size: 12px;
182+
border-radius: 2px;
183+
width: 14px;
184+
height: 14px;
185+
box-sizing: border-box;
186+
-webkit-user-select: none;
187+
-moz-user-select: none;
188+
-ms-user-select: none;
189+
user-select: none;
190+
cursor: pointer;
191+
-webkit-transition: background-color 0.5s cubic-bezier(0.23,1,0.32,1),border 0.3s cubic-bezier(0.23,1,0.32,1);
192+
transition: background-color 0.5s cubic-bezier(0.23,1,0.32,1),border 0.3s cubic-bezier(0.23,1,0.32,1);
193+
color: #FFFFFF;
194+
background-color: #69BE28;
195+
border: 1px solid rgb(85,153,32);
196+
}
197+
198+
.c4 {
199+
line-height: 1em;
200+
font-size: 12px;
201+
border-radius: 2px;
202+
width: 14px;
203+
height: 14px;
204+
box-sizing: border-box;
205+
-webkit-user-select: none;
206+
-moz-user-select: none;
207+
-ms-user-select: none;
208+
user-select: none;
209+
cursor: pointer;
210+
-webkit-transition: background-color 0.5s cubic-bezier(0.23,1,0.32,1),border 0.3s cubic-bezier(0.23,1,0.32,1);
211+
transition: background-color 0.5s cubic-bezier(0.23,1,0.32,1),border 0.3s cubic-bezier(0.23,1,0.32,1);
212+
color: #FFFFFF;
213+
background-color: #F5364E;
214+
border: 1px solid rgb(198,44,63);
215+
}
216+
217+
.c5 {
218+
line-height: 1em;
219+
font-size: 12px;
220+
border-radius: 2px;
221+
width: 14px;
222+
height: 14px;
223+
box-sizing: border-box;
224+
-webkit-user-select: none;
225+
-moz-user-select: none;
226+
-ms-user-select: none;
227+
user-select: none;
228+
cursor: pointer;
229+
-webkit-transition: background-color 0.5s cubic-bezier(0.23,1,0.32,1),border 0.3s cubic-bezier(0.23,1,0.32,1);
230+
transition: background-color 0.5s cubic-bezier(0.23,1,0.32,1),border 0.3s cubic-bezier(0.23,1,0.32,1);
231+
color: #FFFFFF;
232+
background-color: #9056ff;
233+
border: 1px solid rgb(116,69,206);
234+
}
235+
236+
.c6 {
237+
line-height: 1em;
238+
font-size: 12px;
239+
border-radius: 2px;
240+
width: 14px;
241+
height: 14px;
242+
box-sizing: border-box;
243+
-webkit-user-select: none;
244+
-moz-user-select: none;
245+
-ms-user-select: none;
246+
user-select: none;
247+
cursor: pointer;
248+
-webkit-transition: background-color 0.5s cubic-bezier(0.23,1,0.32,1),border 0.3s cubic-bezier(0.23,1,0.32,1);
249+
transition: background-color 0.5s cubic-bezier(0.23,1,0.32,1),border 0.3s cubic-bezier(0.23,1,0.32,1);
250+
color: #FFFFFF;
251+
background-color: #1576af;
252+
border: 1px solid rgb(17,95,141);
253+
}
254+
255+
.c7 {
256+
line-height: 1em;
257+
font-size: 12px;
258+
border-radius: 2px;
259+
width: 14px;
260+
height: 14px;
261+
box-sizing: border-box;
262+
-webkit-user-select: none;
263+
-moz-user-select: none;
264+
-ms-user-select: none;
265+
user-select: none;
266+
cursor: pointer;
267+
-webkit-transition: background-color 0.5s cubic-bezier(0.23,1,0.32,1),border 0.3s cubic-bezier(0.23,1,0.32,1);
268+
transition: background-color 0.5s cubic-bezier(0.23,1,0.32,1),border 0.3s cubic-bezier(0.23,1,0.32,1);
269+
color: #FFFFFF;
270+
background-color: #ab6a32;
271+
border: 1px solid rgb(138,86,40);
272+
}
273+
274+
.c1 {
275+
height: 100%;
276+
width: 100%;
277+
display: -webkit-box;
278+
display: -webkit-flex;
279+
display: -ms-flexbox;
280+
display: flex;
281+
-webkit-align-items: center;
282+
-webkit-box-align: center;
283+
-ms-flex-align: center;
284+
align-items: center;
285+
-webkit-box-pack: center;
286+
-webkit-justify-content: center;
287+
-ms-flex-pack: center;
288+
justify-content: center;
289+
-webkit-transform: scale(1);
290+
-ms-transform: scale(1);
291+
transform: scale(1);
292+
-webkit-transform-origin: 50% 50%;
293+
-ms-transform-origin: 50% 50%;
294+
transform-origin: 50% 50%;
295+
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.23,1,0.32,1);
296+
-webkit-transition: transform 0.5s cubic-bezier(0.23,1,0.32,1);
297+
transition: transform 0.5s cubic-bezier(0.23,1,0.32,1);
298+
}
299+
300+
.c1 svg {
301+
fill: currentColor;
302+
}
303+
304+
<div
305+
style={
306+
Object {
307+
"display": "flex",
308+
"flexDirection": "column",
309+
}
310+
}
311+
>
312+
<div
313+
checked={true}
314+
className="c0"
315+
kind="default"
316+
onClick={[Function]}
317+
size={14}
318+
>
319+
<div
320+
checked={true}
321+
className="c1"
322+
>
323+
<IconCheck.macro
324+
height={8}
325+
width={8}
326+
/>
327+
</div>
328+
</div>
329+
default
330+
<div
331+
checked={true}
332+
className="c2"
333+
kind="primary"
334+
onClick={[Function]}
335+
size={14}
336+
>
337+
<div
338+
checked={true}
339+
className="c1"
340+
>
341+
<IconCheck.macro
342+
height={8}
343+
width={8}
344+
/>
345+
</div>
346+
</div>
347+
primary
348+
<div
349+
checked={true}
350+
className="c3"
351+
kind="success"
352+
onClick={[Function]}
353+
size={14}
354+
>
355+
<div
356+
checked={true}
357+
className="c1"
358+
>
359+
<IconCheck.macro
360+
height={8}
361+
width={8}
362+
/>
363+
</div>
364+
</div>
365+
success
366+
<div
367+
checked={true}
368+
className="c4"
369+
kind="error"
370+
onClick={[Function]}
371+
size={14}
372+
>
373+
<div
374+
checked={true}
375+
className="c1"
376+
>
377+
<IconCheck.macro
378+
height={8}
379+
width={8}
380+
/>
381+
</div>
382+
</div>
383+
error
384+
<div
385+
checked={true}
386+
className="c5"
387+
kind="#9056ff"
388+
onClick={[Function]}
389+
size={14}
390+
>
391+
<div
392+
checked={true}
393+
className="c1"
394+
>
395+
<IconCheck.macro
396+
height={8}
397+
width={8}
398+
/>
399+
</div>
400+
</div>
401+
#9056ff
402+
<div
403+
checked={true}
404+
className="c6"
405+
kind="#1576af"
406+
onClick={[Function]}
407+
size={14}
408+
>
409+
<div
410+
checked={true}
411+
className="c1"
412+
>
413+
<IconCheck.macro
414+
height={8}
415+
width={8}
416+
/>
417+
</div>
418+
</div>
419+
#1576af
420+
<div
421+
checked={true}
422+
className="c7"
423+
kind="#ab6a32"
424+
onClick={[Function]}
425+
size={14}
426+
>
427+
<div
428+
checked={true}
429+
className="c1"
430+
>
431+
<IconCheck.macro
432+
height={8}
433+
width={8}
434+
/>
435+
</div>
436+
</div>
437+
#ab6a32
438+
</div>
439+
`;
440+
140441
exports[`Storyshots Checkbox With kind props 1`] = `
141442
.c2 {
142443
line-height: 1em;

0 commit comments

Comments
 (0)