Skip to content

Commit 692dd5f

Browse files
planktonicplanktonic
committed
WIP
- added select styles - adding radio & checkbox styles - Text inputs no lopnger wrapped with labels TODO: - apply the focus styles from feature/757-update-link-component - apply the shadows from feature/749-update-badge-components - update stories - add all the extra checked/unchecked versions of states
1 parent b8bcf11 commit 692dd5f

File tree

9 files changed

+100
-58
lines changed

9 files changed

+100
-58
lines changed

‎scss/bitstyles/base/forms/_index.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ legend {
2222

2323
label {
2424
display: flex;
25-
flex-direction: column;
2625
gap: settings.$label-gap;
27-
margin-bottom: 0;
26+
align-items: baseline;
27+
margin-bottom: settings.$label-gap;
2828
cursor: pointer;
2929
}
3030

‎scss/bitstyles/base/forms/forms.stories.js

Lines changed: 44 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -11,38 +11,50 @@ export default {
1111
argTypes: {},
1212
};
1313

14-
const InputTemplate = (args) => {
15-
let children;
16-
if (args.type && (args.type === 'checkbox' || args.type === 'radio')) {
17-
children = [Input(args), args.label];
18-
} else {
19-
children = [args.label, Input(args)];
20-
}
21-
22-
return Label({
23-
htmlFor: args.id,
24-
ariaInvalid: args.ariaInvalid,
25-
children,
26-
});
27-
};
28-
29-
const SelectTemplate = (args) =>
14+
const TextInputTemplate = (args) =>
3015
Label({
3116
htmlFor: args.id,
3217
ariaInvalid: args.ariaInvalid,
33-
children: [args.label, Select(args)],
18+
children: [args.label, Input(args)],
3419
});
3520

36-
const TextareaTemplate = (args) =>
37-
Label({
21+
const CheckboxTemplate = (args) => {
22+
return Label({
3823
htmlFor: args.id,
3924
ariaInvalid: args.ariaInvalid,
40-
children: [args.label, Textarea(args)],
25+
children: [Input(args), args.label],
4126
});
27+
};
28+
29+
const SelectTemplate = (args) => {
30+
const wrapper = document.createElement('div');
31+
wrapper.appendChild(
32+
Label({
33+
htmlFor: args.id,
34+
ariaInvalid: args.ariaInvalid,
35+
children: [args.label],
36+
})
37+
);
38+
wrapper.appendChild(Select(args));
39+
return wrapper;
40+
};
41+
42+
const TextareaTemplate = (args) => {
43+
const wrapper = document.createElement('div');
44+
wrapper.appendChild(
45+
Label({
46+
htmlFor: args.id,
47+
ariaInvalid: args.ariaInvalid,
48+
children: [args.label],
49+
})
50+
);
51+
wrapper.appendChild(Textarea(args));
52+
return wrapper;
53+
};
4254

4355
// ***** Text inputs with labels ****************** //
4456

45-
export const TextInput = InputTemplate.bind({});
57+
export const TextInput = TextInputTemplate.bind({});
4658
TextInput.args = {
4759
id: 'input-text',
4860
label: 'Delivery address',
@@ -66,7 +78,7 @@ TextInput.parameters = {
6678
],
6779
};
6880

69-
export const TextInputInvalid = InputTemplate.bind({});
81+
export const TextInputInvalid = TextInputTemplate.bind({});
7082
TextInputInvalid.args = {
7183
id: 'input-text',
7284
label: 'Telephone number',
@@ -91,7 +103,7 @@ TextInputInvalid.parameters = {
91103
],
92104
};
93105

94-
export const TextInputInvalidWith = InputTemplate.bind({});
106+
export const TextInputInvalidWith = TextInputTemplate.bind({});
95107
TextInputInvalid.args = {
96108
id: 'input-text',
97109
label: 'Telephone number',
@@ -116,7 +128,7 @@ TextInputInvalid.parameters = {
116128
],
117129
};
118130

119-
export const TextInputDisabled = InputTemplate.bind({});
131+
export const TextInputDisabled = TextInputTemplate.bind({});
120132
TextInputDisabled.args = {
121133
id: 'input-text',
122134
label: 'Full name',
@@ -143,30 +155,30 @@ TextInputDisabled.parameters = {
143155

144156
// ***** Radio inputs with labels ****************** //
145157

146-
export const RadioInput = InputTemplate.bind({});
158+
export const RadioInput = CheckboxTemplate.bind({});
147159
RadioInput.args = {
148160
id: 'input-radio',
149161
type: 'radio',
150162
label: 'X-Large',
151163
};
152164

153-
export const RadioInputChecked = InputTemplate.bind({});
165+
export const RadioInputChecked = CheckboxTemplate.bind({});
154166
RadioInputChecked.args = {
155167
id: 'input-radio',
156168
type: 'radio',
157169
label: 'Large',
158170
checked: true,
159171
};
160172

161-
export const RadioInputInvalid = InputTemplate.bind({});
173+
export const RadioInputInvalid = CheckboxTemplate.bind({});
162174
RadioInputInvalid.args = {
163175
id: 'input-radio',
164176
type: 'radio',
165177
label: 'Medium',
166178
ariaInvalid: true,
167179
};
168180

169-
export const RadioInputDisabled = InputTemplate.bind({});
181+
export const RadioInputDisabled = CheckboxTemplate.bind({});
170182
RadioInputDisabled.args = {
171183
id: 'input-radio',
172184
type: 'radio',
@@ -176,30 +188,30 @@ RadioInputDisabled.args = {
176188

177189
// ***** Radio inputs with labels ****************** //
178190

179-
export const CheckboxInput = InputTemplate.bind({});
191+
export const CheckboxInput = CheckboxTemplate.bind({});
180192
CheckboxInput.args = {
181193
id: 'input-checkbox',
182194
type: 'checkbox',
183195
label: 'X-Large',
184196
};
185197

186-
export const CheckboxInputChecked = InputTemplate.bind({});
198+
export const CheckboxInputChecked = CheckboxTemplate.bind({});
187199
CheckboxInputChecked.args = {
188200
id: 'input-checkbox',
189201
type: 'checkbox',
190202
label: 'Large',
191203
checked: true,
192204
};
193205

194-
export const CheckboxInputInvalid = InputTemplate.bind({});
206+
export const CheckboxInputInvalid = CheckboxTemplate.bind({});
195207
CheckboxInputInvalid.args = {
196208
id: 'input-checkbox',
197209
type: 'checkbox',
198210
label: 'Medium',
199211
ariaInvalid: true,
200212
};
201213

202-
export const CheckboxInputDisabled = InputTemplate.bind({});
214+
export const CheckboxInputDisabled = CheckboxTemplate.bind({});
203215
CheckboxInputDisabled.args = {
204216
id: 'input-checkbox',
205217
type: 'checkbox',

‎scss/bitstyles/base/forms/select.stories.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,26 @@ Base.args = {
1616
value: generateLabel(['textarea']),
1717
placeholder: generateLabel(['textarea', 'placeholder']),
1818
};
19+
Base.parameters = {
20+
zeplinLink: [
21+
{
22+
name: 'base',
23+
link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6447aae722a9183fc59d4449',
24+
},
25+
{
26+
name: 'hover',
27+
link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6447aae838a4ce3f997a0b0b',
28+
},
29+
{
30+
name: 'active',
31+
link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6447aaeae8e2b0449814cad5',
32+
},
33+
],
34+
};
35+
Base.parameters = {
36+
zeplinLink:
37+
'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6447aae722a9183fc59d4449',
38+
};
1939

2040
export const Invalid = Template.bind({});
2141
Invalid.args = {

‎scss/bitstyles/base/input-checkbox/_index.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@
99
flex-shrink: 0;
1010
width: 1em;
1111
height: 1em;
12-
margin-right: settings.$gap;
12+
margin: settings.$gap;
1313
font-size: settings.$size;
1414
vertical-align: middle;
1515
cursor: pointer;
1616
appearance: none;
17+
top: calc(settings.$gap / 2);
1718
}
1819

1920
@supports (-webkit-appearance: none) or (-moz-appearance: none) or

‎scss/bitstyles/base/input-checkbox/_settings.scss

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
1-
@use '../../tools/size';
2-
@use '../../tools/palette';
31
@use '../../tools/color';
2+
@use '../../tools/palette';
3+
@use '../../tools/shadows';
4+
@use '../../tools/size';
45

56
//
67
// Base styles ////////////////////////////////////////
78
$border-radius: size.get('s6') !default;
89
$gap: size.get('s4') !default;
910
$border-width: size.get('s7') !default;
10-
$size: size.get('m') !default;
11+
$size: size.get('l1') !default;
1112

1213
//
1314
// Base colors ////////////////////////////////////////
1415
$color: palette.get('grayscale') !default;
1516
$background-color: palette.get('grayscale', 'white') !default;
1617
$border-color: palette.get('grayscale') !default;
17-
$box-shadow: none !default;
18+
$box-shadow: shadows.get('default') !default;
1819

1920
//
2021
// Hover colors ////////////////////////////////////////

‎scss/bitstyles/base/input-radio/_index.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,12 @@
88
flex-shrink: 0;
99
width: 1em;
1010
height: 1em;
11-
margin-right: settings.$gap;
11+
margin: settings.$gap;
1212
font-size: settings.$size;
1313
vertical-align: middle;
1414
cursor: pointer;
1515
appearance: none;
16+
top: calc(settings.$gap / 2);
1617
}
1718

1819
@supports (-webkit-appearance: none) or (-moz-appearance: none) or

‎scss/bitstyles/base/input-radio/_settings.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
@use '../../settings/layout';
22
@use '../../tools/palette';
3+
@use '../../tools/shadows';
34
@use '../../tools/size';
45

56
//
67
// Base styles ////////////////////////////////////////
78
$border-radius: layout.$border-radius-round !default;
89
$gap: size.get('s4') !default;
910
$border-width: size.get('s7') !default;
10-
$size: size.get('m') !default;
11+
$size: size.get('l2') !default;
1112

1213
//
1314
// Base colors ////////////////////////////////////////
1415
$color: palette.get('grayscale', 'light-1') !default;
1516
$background-color: palette.get('grayscale', 'white') !default;
1617
$border-color: palette.get('grayscale') !default;
17-
$box-shadow: none !default;
18+
$box-shadow: shadows.get('default') !default;
1819

1920
//
2021
// Hover colors ////////////////////////////////////////

‎scss/bitstyles/base/select/_index.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@forward 'settings';
22
@use 'settings';
33
@use '../../settings/animation';
4+
@use '../../settings/typography';
45

56
@supports (-webkit-appearance: none) or (-moz-appearance: none) or
67
(appearance: none) {
@@ -24,7 +25,7 @@
2425
background-position: right 0.75em top 50%;
2526
background-size: 1em;
2627
color: settings.$color;
27-
font: settings.$font;
28+
font-weight: settings.$font-weight;
2829
text-overflow: ellipsis;
2930
cursor: pointer;
3031
appearance: none;

‎scss/bitstyles/base/select/_settings.scss

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,40 @@
1+
@use '../../settings/typography';
12
@use '../../tools/size';
2-
@use '../../tools/palette';
33
@use '../../tools/color';
4+
@use '../../tools/palette';
5+
@use '../../tools/shadows';
46

57
//
68
// Base styles ////////////////////////////////////////
7-
$padding-vertical: size.get('s5') !default;
8-
$padding-horizontal: size.get('s1') !default;
9-
$border-radius: size.get('s5') !default;
10-
$border-width: size.get('s7') !default;
11-
$font: inherit !default;
9+
$padding-vertical: size.get('s2') !default;
10+
$padding-horizontal: size.get('l1') !default;
11+
$border-radius: size.get('s4') !default;
12+
$border-width: 0.1875rem !default;
13+
$font-weight: typography.$font-weight-normal !default;
1214

1315
//
1416
// Base appearance ////////////////////////////////////////
15-
$color: palette.get('grayscale') !default;
16-
$border-color: palette.get('grayscale') !default;
17+
$color: palette.get('grayscale', 'dark-1') !default;
18+
$border-color: palette.get('grayscale', 'dark-1') !default;
1719
$background-color: palette.get('grayscale', 'white') !default;
1820
$background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color(palette.get('grayscale', 'light-1'))}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
21+
$box-shadow: none;
1922

2023
//
2124
// Hover styles ////////////////////////////////////////
2225
$color-hover: palette.get('grayscale', 'dark-1') !default;
23-
$border-color-hover: palette.get('grayscale') !default;
24-
$background-color-hover: palette.get('grayscale') !default;
26+
$border-color-hover: palette.get('grayscale', 'dark-1') !default;
27+
$background-color-hover: palette.get('brand-1', 'light-4') !default;
2528
$background-image-hover: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color($color-hover)}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
29+
$box-shadow: none;
2630

2731
//
2832
// Active styles ////////////////////////////////////////
29-
$color-active: palette.get('grayscale', 'dark-1') !default;
30-
$border-color-active: palette.get('grayscale', 'dark-1') !default;
31-
$background-color-active: transparent !default;
33+
$color-active: palette.get('brand-1', 'dark-1') !default;
34+
$border-color-active: palette.get('brand-1', 'dark-1') !default;
35+
$background-color-active: palette.get('grayscale', 'white') !default;
3236
$background-image-active: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color(palette.get('grayscale', 'light-1'))}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
37+
$box-shadow: shadows.get('default');
3338

3439
//
3540
// Invalid styles ////////////////////////////////////////
@@ -41,6 +46,6 @@ $background-image-invalid: url("data:image/svg+xml,%3Csvg width='20' height='20'
4146
//
4247
// Disabled styles ////////////////////////////////////////
4348
$color-disabled: palette.get('grayscale') !default;
44-
$border-color-disabled: palette.get('grayscale', 'light-2') !default;
45-
$background-color-disabled: palette.get('grayscale', 'light-2') !default;
49+
$border-color-disabled: palette.get('grayscale') !default;
50+
$background-color-disabled: palette.get('grayscale', 'light-3') !default;
4651
$background-image-disabled: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color(palette.get('grayscale', 'light-1'))}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;

0 commit comments

Comments
 (0)