Skip to content

Commit a9bc8dd

Browse files
planktonicplanktonic
committed
- Corrects colors
- Cleanup stories - Adds zeplinLinks where available - Adds descriptive children/labels
1 parent c9d64a2 commit a9bc8dd

File tree

13 files changed

+104
-41
lines changed

13 files changed

+104
-41
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ export default ({
22
children,
33
htmlFor = null,
44
ariaInvalid = false,
5+
ariaDisabled = false,
56
classnames = [],
67
}) => {
78
const label = document.createElement('label');
89
children.forEach((child) => {
910
label.append(child);
1011
});
1112
if (ariaInvalid) label.setAttribute('aria-invalid', ariaInvalid);
13+
if (ariaDisabled) label.setAttribute('aria-disabled', ariaDisabled);
1214
if (htmlFor) label.setAttribute('for', htmlFor);
1315
classnames.forEach((classname) => label.classList.add(classname));
1416
return label;

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,11 @@ label {
2626
align-items: baseline;
2727
margin-bottom: settings.$label-gap;
2828
cursor: pointer;
29+
font-weight: settings.$label-font-weight;
30+
31+
&[aria-disabled="true"] {
32+
color: settings.$label-disabled-color;
33+
}
2934
}
3035

3136
[type='color'] {

‎scss/bitstyles/base/forms/_settings.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use '../../settings/typography';
2+
@use '../../tools/palette';
13
@use '../../tools/size';
24

35
//
@@ -20,4 +22,6 @@ $legend-color: inherit !default;
2022
//
2123
// Label ////////////////////////////////////////
2224

23-
$label-gap: size.get('s7');
25+
$label-gap: size.get('s7') !default;
26+
$label-font-weight: typography.$font-weight-medium !default;
27+
$label-disabled-color: palette.get('grayscale') !default;

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

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
22

33
<Meta title="Base/Forms/Overview" />
44

5+
<Story id="ui-data-forms--login-form-with-errors" />
6+
57
# Forms
68

79
## Inputs and labels
@@ -18,37 +20,63 @@ This includes all standard `type="text"` inputs, plus all the text-based inputs
1820
<Story id="base-forms-input-text--text-with-value" />
1921
<Story id="base-forms-input-text--text-with-value-invalid" />
2022
<Story id="base-forms-input-text--text-with-value-disabled" />
23+
</Canvas>
24+
25+
<Canvas isColumn>
2126
<Story id="base-forms-input-text--text-empty" />
2227
<Story id="base-forms-input-text--text-empty-invalid" />
2328
<Story id="base-forms-input-text--text-empty-disabled" />
2429
</Canvas>
2530

2631
## Textareas
2732

33+
### No values
34+
2835
<Canvas isColumn>
29-
<Story id="base-forms-textarea--with-value" />
30-
<Story id="base-forms-textarea--with-value-invalid" />
31-
<Story id="base-forms-textarea--with-value-disabled" />
3236
<Story id="base-forms-textarea--empty" />
3337
<Story id="base-forms-textarea--empty-invalid" />
3438
<Story id="base-forms-textarea--empty-disabled" />
3539
</Canvas>
3640

37-
## Checkboxes and Radios
41+
### With values
42+
43+
<Canvas isColumn>
44+
<Story id="base-forms-textarea--with-value" />
45+
<Story id="base-forms-textarea--with-value-invalid" />
46+
<Story id="base-forms-textarea--with-value-disabled" />
47+
</Canvas>
48+
49+
## Checkboxes
50+
51+
### Unchecked
3852

3953
<Canvas isColumn>
4054
<Story id="base-forms-input-checkbox--base" />
4155
<Story id="base-forms-input-checkbox--invalid" />
4256
<Story id="base-forms-input-checkbox--disabled" />
57+
</Canvas>
58+
59+
### Checked
60+
61+
<Canvas isColumn>
4362
<Story id="base-forms-input-checkbox--checked" />
4463
<Story id="base-forms-input-checkbox--checked-invalid" />
4564
<Story id="base-forms-input-checkbox--checked-disabled" />
4665
</Canvas>
4766

67+
## Radios
68+
69+
### Unchecked
70+
4871
<Canvas isColumn>
4972
<Story id="base-forms-input-radio--base" />
5073
<Story id="base-forms-input-radio--invalid" />
5174
<Story id="base-forms-input-radio--disabled" />
75+
</Canvas>
76+
77+
### Checked
78+
79+
<Canvas isColumn>
5280
<Story id="base-forms-input-radio--checked" />
5381
<Story id="base-forms-input-radio--checked-invalid" />
5482
<Story id="base-forms-input-radio--checked-disabled" />

‎scss/bitstyles/base/forms/input-checkbox.stories.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@ const Template = (args) => {
1212
return Label({
1313
htmlFor: args.id,
1414
ariaInvalid: args.ariaInvalid,
15+
ariaDisabled: args.disabled,
1516
children: [Input(args), args.label],
1617
classname: 'u-items-baseline',
1718
});
1819
};
1920

20-
// ***** Text inputs with values ****************** //
21+
// ***** Unchecked radios ****************** //
2122

2223
export const Base = Template.bind({});
2324
Base.args = { type: 'checkbox', label: 'Unchecked' };
@@ -56,6 +57,8 @@ Disabled.parameters = {
5657
'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc971830548239007431f',
5758
};
5859

60+
// ***** Checked radios ****************** //
61+
5962
export const Checked = Template.bind({});
6063
Checked.args = {
6164
type: 'checkbox',

‎scss/bitstyles/base/forms/input-radio.stories.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@ const Template = (args) => {
1212
return Label({
1313
htmlFor: args.id,
1414
ariaInvalid: args.ariaInvalid,
15+
ariaDisabled: args.disabled,
1516
children: [Input(args), args.label],
1617
classname: 'u-items-baseline',
1718
});
1819
};
1920

20-
// ***** Text inputs with values ****************** //
21+
// ***** Unchecked radios ****************** //
2122

2223
export const Base = Template.bind({});
2324
Base.args = { type: 'radio', label: 'Unchecked' };
@@ -43,6 +44,12 @@ Invalid.args = { type: 'radio', ariaInvalid: true, label: 'Unchecked invalid' };
4344

4445
export const Disabled = Template.bind({});
4546
Disabled.args = { type: 'radio', disabled: true, label: 'Unchecked disabled' };
47+
Disabled.parameters = {
48+
zeplinLink:
49+
'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc2bfc40d7123d9858e06',
50+
};
51+
52+
// ***** Checked radios ****************** //
4653

4754
export const Checked = Template.bind({});
4855
Checked.args = { type: 'radio', checked: true, label: 'Checked' };
@@ -78,3 +85,7 @@ CheckedDisabled.args = {
7885
disabled: true,
7986
label: 'Checked disabled',
8087
};
88+
CheckedDisabled.parameters = {
89+
zeplinLink:
90+
'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc2ba62f9d023b1e53c19',
91+
};

‎scss/bitstyles/base/forms/input-text.stories.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const Template = (args) => {
1313
const label = Label({
1414
htmlFor: args.id,
1515
ariaInvalid: args.ariaInvalid,
16+
ariaDisabled: args.disabled,
1617
children: [args.label],
1718
});
1819
const input = Input(args);
@@ -75,7 +76,7 @@ TextWithValueDisabled.parameters = {
7576
export const TextEmpty = Template.bind({});
7677
TextEmpty.args = {
7778
value: '',
78-
placeholder: 'Input text empty',
79+
placeholder: 'Input text empty placeholder',
7980
label: 'Input text empty',
8081
};
8182
TextEmpty.parameters = {
@@ -98,7 +99,7 @@ TextEmpty.parameters = {
9899
export const TextEmptyInvalid = Template.bind({});
99100
TextEmptyInvalid.args = {
100101
value: '',
101-
placeholder: 'Input text empty invalid',
102+
placeholder: 'Input text empty invalid placeholder',
102103
label: 'Input text empty invalid',
103104
ariaInvalid: true,
104105
};
@@ -110,7 +111,7 @@ TextEmptyInvalid.parameters = {
110111
export const TextEmptyDisabled = Template.bind({});
111112
TextEmptyDisabled.args = {
112113
value: '',
113-
placeholder: 'Input text empty disabled',
114+
placeholder: 'Input text empty disabled placeholder',
114115
label: 'Input text empty disabled',
115116
disabled: true,
116117
};

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,12 @@ Invalid.args = {
2323
ariaInvalid: true,
2424
};
2525

26+
export const Disabled = Template.bind({});
27+
Disabled.args = {
28+
children: ['Simple text label for a disabled input'],
29+
ariaDisabled: true,
30+
};
31+
2632
export const WithFor = Template.bind({});
2733
WithFor.args = {
2834
children: ['Simple text label with a for attribute'],

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import Label from './Label';
22
import Select from './Select';
3-
import { generateLabel } from '../../../../.storybook/helpers';
43

54
export default {
65
title: 'Base/Forms/Select',
@@ -21,8 +20,6 @@ const Template = (args) => {
2120
return wrapper;
2221
};
2322

24-
// ***** Selects with values ****************** //
25-
2623
export const Base = Template.bind({});
2724
Base.args = {
2825
label: 'Select',

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,13 @@
4141
color: settings.$color-hover;
4242
}
4343

44+
&:active {
45+
border-color: settings.$border-color-active;
46+
background-color: settings.$background-color-active;
47+
box-shadow: settings.$box-shadow-active;
48+
color: settings.$color-active;
49+
}
50+
4451
&::after {
4552
content: '';
4653
display: block;

0 commit comments

Comments
 (0)