Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Multiple form element fixes. #212

Merged
merged 4 commits into from
Jun 13, 2024
Merged

Multiple form element fixes. #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5fd0162
Fixed jumping form elements borders.
AlexSkrypnyk Jun 13, 2024
9ae11b1
Fixed Checkbox and Radio control proportions.
AlexSkrypnyk Jun 13, 2024
a36acc6
Fixed error colours on Textfield, Textarea and Select.
AlexSkrypnyk Jun 13, 2024
1b59069
Fixed icon position in `Field message`.
AlexSkrypnyk Jun 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions components/00-base/_variables.components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,9 +336,9 @@ $ct-textfield-light-hover-color: $ct-textfield-light-color !default;
$ct-textfield-light-focus-background-color: $ct-textfield-light-background-color !default;
$ct-textfield-light-focus-border-color: ct-color-light('interaction-background') !default;
$ct-textfield-light-focus-color: $ct-textfield-light-color !default;
$ct-textfield-light-invalid-background-color: inherit !default;
$ct-textfield-light-invalid-background-color: ct-color-light('background-light') !default;
$ct-textfield-light-invalid-border-color: ct-color-light('error') !default;
$ct-textfield-light-invalid-color: inherit !default;
$ct-textfield-light-invalid-color: ct-color-light('body') !default;
$ct-textfield-light-outline-color: $ct-outline-light !default;
$ct-textfield-dark-background-color: ct-color-dark('background-dark') !default;
$ct-textfield-dark-border-color: ct-color-dark('border-light') !default;
Expand All @@ -349,9 +349,9 @@ $ct-textfield-dark-hover-color: $ct-textfield-dark-color !default;
$ct-textfield-dark-focus-background-color: ct-color-dark('background') !default;
$ct-textfield-dark-focus-border-color: ct-color-dark('interaction-background') !default;
$ct-textfield-dark-focus-color: $ct-textfield-dark-color !default;
$ct-textfield-dark-invalid-background-color: inherit !default;
$ct-textfield-dark-invalid-background-color: ct-color-dark('background-dark') !default;
$ct-textfield-dark-invalid-border-color: ct-color-dark('error') !default;
$ct-textfield-dark-invalid-color: inherit !default;
$ct-textfield-dark-invalid-color: ct-color-dark('body') !default;
$ct-textfield-dark-outline-color: $ct-outline-dark !default;

//
Expand All @@ -370,9 +370,9 @@ $ct-textarea-light-hover-color: $ct-textarea-light-color !default;
$ct-textarea-light-focus-background-color: $ct-textarea-light-background-color !default;
$ct-textarea-light-focus-border-color: ct-color-light('interaction-background') !default;
$ct-textarea-light-focus-color: $ct-textarea-light-color !default;
$ct-textarea-light-invalid-background-color: inherit !default;
$ct-textarea-light-invalid-background-color: ct-color-light('background-light') !default;
$ct-textarea-light-invalid-border-color: ct-color-light('error') !default;
$ct-textarea-light-invalid-color: inherit !default;
$ct-textarea-light-invalid-color: ct-color-light('body') !default;
$ct-textarea-light-outline-color: $ct-outline-light !default;
$ct-textarea-dark-background-color: ct-color-dark('background-dark') !default;
$ct-textarea-dark-border-color: ct-color-dark('border-light') !default;
Expand All @@ -383,9 +383,9 @@ $ct-textarea-dark-hover-color: $ct-textarea-dark-color !default;
$ct-textarea-dark-focus-background-color: ct-color-dark('background') !default;
$ct-textarea-dark-focus-border-color: ct-color-dark('interaction-background') !default;
$ct-textarea-dark-focus-color: $ct-textarea-dark-color !default;
$ct-textarea-dark-invalid-background-color: inherit !default;
$ct-textarea-dark-invalid-background-color: ct-color-dark('background-dark') !default;
$ct-textarea-dark-invalid-border-color: ct-color-dark('error') !default;
$ct-textarea-dark-invalid-color: inherit !default;
$ct-textarea-dark-invalid-color: ct-color-dark('body') !default;
$ct-textarea-dark-outline-color: $ct-outline-dark !default;

//
Expand All @@ -406,9 +406,9 @@ $ct-select-light-hover-color: $ct-select-light-color !default;
$ct-select-light-focus-background-color: $ct-select-light-background-color !default;
$ct-select-light-focus-border-color: ct-color-light('interaction-background') !default;
$ct-select-light-focus-color: $ct-select-light-color !default;
$ct-select-light-invalid-background-color: inherit !default;
$ct-select-light-invalid-background-color: ct-color-light('background-light') !default;
$ct-select-light-invalid-border-color: ct-color-light('error') !default;
$ct-select-light-invalid-color: inherit !default;
$ct-select-light-invalid-color: ct-color-light('body') !default;
$ct-select-light-outline-color: $ct-outline-light !default;
$ct-select-light-icon: url("data:image/svg+xml,%3Csvg width='38' height='28' viewBox='0 0 38 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0H0V28H1V0Z' fill='black' fill-opacity='0.6'/%3E%3Cpath d='M17.0916 13.1714L19 13.1666C19 13.1666 20.7334 13.1666 20.9083 13.1666C21.0831 13.1666 21.0831 13.1666 21.0831 13.1666L21.5 13.1714C21.5 13.1714 21.7189 13.1497 21.8204 13.1074C21.922 13.0651 22.0141 13.0031 22.0916 12.9249C22.1697 12.8475 22.2317 12.7553 22.274 12.6538C22.3163 12.5522 22.3381 12.4433 22.3381 12.3333C22.3381 12.2233 22.3163 12.1144 22.274 12.0128C22.2317 11.9113 22.1697 11.8191 22.0916 11.7416L19.5916 9.24162C19.5141 9.16351 19.422 9.10151 19.3204 9.05921C19.2189 9.0169 19.11 8.99512 19 8.99512C18.8899 8.99512 18.781 9.0169 18.6795 9.05921C18.5779 9.10151 18.4858 9.16351 18.4083 9.24162L15.9083 11.7416C15.7514 11.8985 15.6632 12.1114 15.6632 12.3333C15.6632 12.5552 15.7514 12.768 15.9083 12.9249C16.0652 13.0819 16.278 13.17 16.5 13.17C16.7219 13.17 17.0916 13.1714 17.0916 13.1714ZM20.9083 15.6666H19H17.0916C16.9165 15.6666 16.9165 15.6632 16.8202 15.6632C16.4998 15.6632 16.6098 15.6632 16.5 15.6632C16.3901 15.6632 16.2813 15.6848 16.1797 15.7269C16.0782 15.7689 15.986 15.8306 15.9083 15.9083C15.8306 15.986 15.769 16.0782 15.7269 16.1797C15.6849 16.2813 15.6632 16.3901 15.6632 16.4999C15.6632 16.6098 15.6849 16.7186 15.7269 16.8202C15.769 16.9217 15.8306 17.0139 15.9083 17.0916L18.4083 19.5916C18.4858 19.6697 18.5779 19.7317 18.6795 19.774C18.781 19.8163 18.8899 19.8381 19 19.8381C19.11 19.8381 19.2189 19.8163 19.3204 19.774C19.422 19.7317 19.5141 19.6697 19.5916 19.5916L22.0916 17.0916C22.2485 16.9347 22.3367 16.7219 22.3367 16.4999C22.3367 16.278 22.2485 16.0652 22.0916 15.9083C21.9347 15.7514 21.7219 15.6632 21.5 15.6632C21.278 15.6632 21.0831 15.6666 20.9083 15.6666Z' fill='black' fill-opacity='0.6'/%3E%3C/svg%3E%0A");
$ct-select-dark-background-color: ct-color-dark('background-dark') !default;
Expand All @@ -422,9 +422,9 @@ $ct-select-dark-hover-color: $ct-select-dark-color !default;
$ct-select-dark-focus-background-color: ct-color-dark('background') !default;
$ct-select-dark-focus-border-color: ct-color-dark('interaction-background') !default;
$ct-select-dark-focus-color: $ct-select-dark-color !default;
$ct-select-dark-invalid-background-color: inherit !default;
$ct-select-dark-invalid-background-color: ct-color-dark('background') !default;
$ct-select-dark-invalid-border-color: ct-color-dark('error') !default;
$ct-select-dark-invalid-color: inherit !default;
$ct-select-dark-invalid-color: ct-color-dark('body') !default;
$ct-select-dark-outline-color: $ct-outline-dark !default;
$ct-select-dark-icon: url("data:image/svg+xml,%3Csvg width='38' height='28' viewBox='0 0 38 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0H0V28H1V0Z' fill='white' fill-opacity='0.9'/%3E%3Cpath d='M17.0916 13.1714L19 13.1666C19 13.1666 20.7334 13.1666 20.9083 13.1666C21.0831 13.1666 21.0831 13.1666 21.0831 13.1666L21.5 13.1714C21.5 13.1714 21.7189 13.1497 21.8204 13.1074C21.922 13.0651 22.0141 13.0031 22.0916 12.9249C22.1697 12.8475 22.2317 12.7553 22.274 12.6538C22.3163 12.5522 22.3381 12.4433 22.3381 12.3333C22.3381 12.2233 22.3163 12.1144 22.274 12.0128C22.2317 11.9113 22.1697 11.8191 22.0916 11.7416L19.5916 9.24162C19.5141 9.16351 19.422 9.10151 19.3204 9.05921C19.2189 9.0169 19.11 8.99512 19 8.99512C18.8899 8.99512 18.781 9.0169 18.6795 9.05921C18.5779 9.10151 18.4858 9.16351 18.4083 9.24162L15.9083 11.7416C15.7514 11.8985 15.6632 12.1114 15.6632 12.3333C15.6632 12.5552 15.7514 12.768 15.9083 12.9249C16.0652 13.0819 16.278 13.17 16.5 13.17C16.7219 13.17 17.0916 13.1714 17.0916 13.1714ZM20.9083 15.6666H19H17.0916C16.9165 15.6666 16.9165 15.6632 16.8202 15.6632C16.4998 15.6632 16.6098 15.6632 16.5 15.6632C16.3901 15.6632 16.2813 15.6848 16.1797 15.7269C16.0782 15.7689 15.986 15.8306 15.9083 15.9083C15.8306 15.986 15.769 16.0782 15.7269 16.1797C15.6849 16.2813 15.6632 16.3901 15.6632 16.4999C15.6632 16.6098 15.6849 16.7186 15.7269 16.8202C15.769 16.9217 15.8306 17.0139 15.9083 17.0916L18.4083 19.5916C18.4858 19.6697 18.5779 19.7317 18.6795 19.774C18.781 19.8163 18.8899 19.8381 19 19.8381C19.11 19.8381 19.2189 19.8163 19.3204 19.774C19.422 19.7317 19.5141 19.6697 19.5916 19.5916L22.0916 17.0916C22.2485 16.9347 22.3367 16.7219 22.3367 16.4999C22.3367 16.278 22.2485 16.0652 22.0916 15.9083C21.9347 15.7514 21.7219 15.6632 21.5 15.6632C21.278 15.6632 21.0831 15.6666 20.9083 15.6666Z' fill='white' fill-opacity='0.9'/%3E%3C/svg%3E%0A");

Expand Down
7 changes: 7 additions & 0 deletions components/00-base/mixins/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,10 @@
pointer-events: none;
}
}

//
// Set inset border for a control.
//
@mixin ct-form-control-border-inset($color, $width: ct-particle(0.125)) {
box-shadow: inset 0 0 0 $width $color;
}
6 changes: 3 additions & 3 deletions components/01-atoms/checkbox/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
// The dimensions of the checkbox control's elements are based on the label size.
$_width: $_label-font-size * 1.625;
$_height: $_label-font-size * 1.625;
$_border-width: $_width * 0.0384;
$_hover-border-width: $_width * 0.0769;
$_checked-border-width: $_width * 0.0769;
$_border-width: ct-particle(0.125);
$_hover-border-width: $_border-width * 2;
$_checked-border-width: $_hover-border-width;
$_checked-square-width: $_width * 0.6923;
$_checked-square-height: $_height * 0.6923;
$_checked-hover-border-width: $_checked-border-width;
Expand Down
6 changes: 5 additions & 1 deletion components/01-atoms/field-message/field-message.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,19 @@
//

@use 'sass:map';
@use 'sass:math';

//
// Mixins.
//

.ct-field-message {
$root: &;
$_padding: ct-spacing();

display: block;
border-radius: $ct-field-message-border-radius;
padding: ct-spacing();
padding: $_padding;
border-width: ct-particle(0.125);
border-style: solid;

Expand Down Expand Up @@ -88,6 +90,8 @@

#{$root}__icon {
color: map.get($values, 'icon-color');
vertical-align: top;
margin-top: math.div($_padding, 2);
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions components/01-atoms/radio/radio.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
// The dimensions of the radio control's elements are based on the label size.
$_width: $_label-font-size * 1.625;
$_height: $_label-font-size * 1.625;
$_border-width: $_width * 0.0384;
$_hover-border-width: $_width * 0.0769;
$_border-width: ct-particle(0.125);
$_hover-border-width: $_border-width * 2;
$_checked-border-width: $_width * 0.1154;
$_checked-circle-width: $_width * 0.5385;
$_checked-circle-height: $_height * 0.5385;
Expand Down
11 changes: 2 additions & 9 deletions components/01-atoms/select/select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,9 @@
@include ct-form-control-disabled($ct-select-disabled-opacity);
@include ct-typography($_label-size);

box-sizing: content-box;
border-radius: $ct-select-border-radius;
border-style: solid;
border-width: $_border-width;
margin: $_hover-border-width - $_border-width $_hover-border-width - $_border-width;
padding: ct-spacing(1.625) $_vertical-padding;
width: 100%;

Expand All @@ -32,17 +30,10 @@
background-repeat: no-repeat;
background-size: $_icon-height;

&:hover {
border-width: $_hover-border-width;
margin: 0;
}

&:focus-visible {
outline-style: solid;
outline-width: $ct-select-outline-width;
outline-offset: $ct-select-outline-offset;
margin: 0;
border-width: $_hover-border-width;
}

@include ct-component-theme($root) using($root, $theme) {
Expand Down Expand Up @@ -81,6 +72,7 @@
@include ct-component-property($root, $theme, hover, color);
@include ct-component-property($root, $theme, hover, border-color);
@include ct-component-property($root, $theme, hover, background-color);
@include ct-form-control-border-inset(ct-component-var($root, $theme, hover, border-color), $_hover-border-width - $_border-width);
}

&:focus-visible {
Expand All @@ -94,6 +86,7 @@
@include ct-component-property($root, $theme, invalid, color);
@include ct-component-property($root, $theme, invalid, border-color);
@include ct-component-property($root, $theme, invalid, background-color);
@include ct-form-control-border-inset(ct-component-var($root, $theme, invalid, border-color), $_hover-border-width - $_border-width);

&::placeholder {
@include ct-component-property($root, $theme, invalid, color);
Expand Down
10 changes: 2 additions & 8 deletions components/01-atoms/textarea/textarea.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,17 @@
border-radius: $ct-textarea-border-radius;
border-style: solid;
border-width: $_border-width;
margin: $_hover-border-width - $_border-width $_hover-border-width - $_border-width;
padding: ct-spacing(1.625) ct-spacing(2);
width: 100%;

// Fix additional bottom spacing added due to <textarea> being an
// inline-block element.
vertical-align: bottom;

&:hover {
border-width: $_hover-border-width;
margin: 0;
}

&:focus-visible {
outline-style: solid;
outline-width: $ct-textarea-outline-width;
outline-offset: $ct-textarea-outline-offset;
margin: 0;
border-width: $_hover-border-width;
}

@include ct-component-theme($root) using($root, $theme) {
Expand All @@ -54,6 +46,7 @@
@include ct-component-property($root, $theme, hover, color);
@include ct-component-property($root, $theme, hover, border-color);
@include ct-component-property($root, $theme, hover, background-color);
@include ct-form-control-border-inset(ct-component-var($root, $theme, hover, border-color), $_hover-border-width - $_border-width);
}

&:focus-visible {
Expand All @@ -67,6 +60,7 @@
@include ct-component-property($root, $theme, invalid, color);
@include ct-component-property($root, $theme, invalid, border-color);
@include ct-component-property($root, $theme, invalid, background-color);
@include ct-form-control-border-inset(ct-component-var($root, $theme, invalid, border-color), $_hover-border-width - $_border-width);

&::placeholder {
@include ct-component-property($root, $theme, invalid, color);
Expand Down
11 changes: 2 additions & 9 deletions components/01-atoms/textfield/textfield.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,16 @@
@include ct-form-control-disabled($ct-textfield-disabled-opacity);
@include ct-typography('label-small');

box-sizing: border-box;
border-radius: $ct-textfield-border-radius;
border-style: solid;
border-width: $_border-width;
margin: $_hover-border-width - $_border-width $_hover-border-width - $_border-width;
padding: ct-spacing(1.625) ct-spacing(2);
width: 100%;

&:hover {
border-width: $_hover-border-width;
margin: 0;
}

&:focus-visible {
outline-style: solid;
outline-width: $ct-textfield-outline-width;
outline-offset: $ct-textfield-outline-offset;
margin: 0;
border-width: $_hover-border-width;
}

@include ct-component-theme($root) using($root, $theme) {
Expand All @@ -50,6 +41,7 @@
@include ct-component-property($root, $theme, hover, color);
@include ct-component-property($root, $theme, hover, border-color);
@include ct-component-property($root, $theme, hover, background-color);
@include ct-form-control-border-inset(ct-component-var($root, $theme, hover, border-color), $_hover-border-width - $_border-width);
}

&:focus-visible {
Expand All @@ -63,6 +55,7 @@
@include ct-component-property($root, $theme, invalid, color);
@include ct-component-property($root, $theme, invalid, border-color);
@include ct-component-property($root, $theme, invalid, background-color);
@include ct-form-control-border-inset(ct-component-var($root, $theme, invalid, border-color), $_hover-border-width - $_border-width);

&::placeholder {
@include ct-component-property($root, $theme, invalid, color);
Expand Down
2 changes: 1 addition & 1 deletion components/02-molecules/field/field.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ export const Field = (parentKnobs = {}) => {
parentKnobs.knobTab,
),
label: knobText('Label', 'Field label', parentKnobs.label, parentKnobs.knobTab),
message: knobText('Message', 'Message content sample with long text that spans on the multiple lines to test text vertical spacing', parentKnobs.message, parentKnobs.knobTab),
description: knobText('Description', 'Description content sample with long text that spans on the multiple lines to test text vertical spacing', parentKnobs.description, parentKnobs.knobTab),
message: knobText('Message', 'Message content sample with long text that spans on the multiple lines to test text vertical spacing', parentKnobs.message, parentKnobs.knobTab),
is_required: knobBoolean('Required', false, parentKnobs.is_required, parentKnobs.knobTab),
is_invalid: knobBoolean('Has error', false, parentKnobs.is_invalid, parentKnobs.knobTab),
is_disabled: knobBoolean('Disabled', false, parentKnobs.is_disabled, parentKnobs.knobTab),
Expand Down