Skip to content

Commit 290ddcd

Browse files
planktonicplanktonic
committed
- Buttons now have the correct line-height & font-size
- Selects 7 inputs subtract their border from their height in order to match the designs - Input-texts inside an `o-joined-ui` now work properly (border-radiuses etc)
1 parent b19e591 commit 290ddcd

File tree

8 files changed

+70
-19
lines changed

8 files changed

+70
-19
lines changed

‎scss/bitstyles/atoms/button-shapes/_settings.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@use '../../settings/layout';
33
@use '../../settings/typography';
44
@use '../../tools/font-size';
5+
@use '../../tools/line-height';
56
@use '../../tools/size';
67

78
/* stylelint-disable length-zero-no-unit */
@@ -12,8 +13,8 @@ $default: (
1213
'border-radius': size.get('s4'),
1314
'min-height': 1em,
1415
'min-width': 0,
15-
'font-size': font-size.get('2'),
1616
'font-weight': typography.$font-weight-semibold,
17+
'line-height': line-height.get('4'),
1718
) !default;
1819
/* stylelint-enable length-zero-no-unit */
1920
$small: (

‎scss/bitstyles/atoms/button/_index.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
max-width: 100%;
2222
min-height: var(#{custom-property.get($items: ('button', 'min-height'))});
2323
margin: 0;
24-
padding:
24+
padding:
2525
calc(var(#{custom-property.get($items: ('button', 'padding-vertical'))}) - var(#{custom-property.get($items: ('button', 'border-width'))}, 0rem))
2626
calc(var(#{custom-property.get($items: ('button','padding-horizontal'))}) - var(#{custom-property.get($items: ('button', 'border-width'))}, 0rem));
2727
overflow: visible;
@@ -39,8 +39,9 @@
3939
box-shadow: var(#{custom-property.get($items: ('button', 'box-shadow'))});
4040
color: var(#{custom-property.get($items: ('button', 'color'))});
4141
font-family: settings.$font-family;
42-
font-size: var(#{custom-property.get($items: ('button', 'font-size'))});
43-
font-weight: var(#{custom-property.get($items: ('button', 'font-weight'))});
42+
font-size: var(#{custom-property.get($items: ('button', 'font-size'))}, inherit);
43+
font-weight: var(#{custom-property.get($items: ('button', 'font-weight'))}, inherit);
44+
line-height: var(#{custom-property.get($items: ('button', 'line-height'))}, inherit);
4445
text-align: center;
4546
text-decoration: none;
4647
white-space: nowrap;

‎scss/bitstyles/atoms/button/_settings.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ $allowed-shape-properties: (
2929
'min-width',
3030
'font-size',
3131
'font-weight',
32+
'line-height',
3233
'justify-content'
3334
) !default;
3435
$outline-color: palette.get('brand-2') !default;

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,14 @@ textarea {
4242
#{custom-property.get($items: ('input-text', 'border-bottom-right-radius'))}: settings.$border-radius;
4343
#{custom-property.get($items: ('input-text', 'border-bottom-left-radius'))}: settings.$border-radius;
4444
#{custom-property.get($items: ('input-text', 'border-top-left-radius'))}: settings.$border-radius;
45+
#{custom-property.get($items: ('input-text', 'padding-vertical'))}: settings.$padding-vertical;
46+
#{custom-property.get($items: ('input-text', 'padding-horizontal'))}: settings.$padding-horizontal;
47+
#{custom-property.get($items: ('input-text', 'border-width'))}: settings.$border-width;
4548
display: block;
4649
width: 100%;
47-
padding: settings.$padding-vertical settings.$padding-horizontal;
50+
padding:
51+
calc(var(#{custom-property.get($items: ('input-text', 'padding-vertical'))}) - var(#{custom-property.get($items: ('input-text', 'border-width'))}, 0rem))
52+
calc(var(#{custom-property.get($items: ('input-text','padding-horizontal'))}) - var(#{custom-property.get($items: ('input-text', 'border-width'))}, 0rem));
4853
border: settings.$border-width solid settings.$border-color;
4954
border-radius:
5055
var(#{custom-property.get($items: ('input-text', 'border-top-left-radius'))})

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
//
77
// Base styles ////////////////////////////////////////
88

9-
$padding-vertical: size.get('s3') !default;
9+
$padding-vertical: size.get('s2') !default;
1010
$padding-horizontal: size.get('m') !default;
1111
$border-radius: size.get('s4') !default;
1212
$border-width: 0.1875rem !default;

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,20 @@
33
@use '../../settings/animation';
44
@use '../../settings/focus';
55
@use '../../settings/typography';
6+
@use '../../tools/custom-property';
67

78
@supports (-webkit-appearance: none) or (-moz-appearance: none) or
89
(appearance: none) {
910
/* stylelint-disable selector-max-type */
1011
select {
12+
#{custom-property.get($items: ('select', 'padding-vertical'))}: settings.$padding-vertical;
13+
#{custom-property.get($items: ('select', 'padding-horizontal'))}: settings.$padding-horizontal;
14+
#{custom-property.get($items: ('select', 'border-width'))}: settings.$border-width;
1115
display: block;
1216
width: 100%;
13-
padding: settings.$padding-vertical calc(settings.$padding-horizontal * 2)
14-
settings.$padding-vertical settings.$padding-horizontal;
17+
padding:
18+
calc(var(#{custom-property.get($items: ('select', 'padding-vertical'))}) - var(#{custom-property.get($items: ('select', 'border-width'))}, 0rem))
19+
calc(var(#{custom-property.get($items: ('select','padding-horizontal'))}) - var(#{custom-property.get($items: ('select', 'border-width'))}, 0rem));
1520
overflow: hidden;
1621
transition: color animation.$transition-duration
1722
animation.$transition-easing,

‎scss/bitstyles/organisms/joined-ui/_index.scss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
/* prettier-ignore */
77

88
#{classname.get($classname-items: 'joined-ui', $layer: 'organism')} {
9+
/* Buttons */
910
$button-classname: classname.get($classname-items: 'button', $layer: 'atom');
1011
$button-border-top-left-radius-name: custom-property.get($items: ('button', 'border', 'top', 'left', 'radius'));
1112
$button-border-top-right-radius-name: custom-property.get($items: ('button', 'border', 'top', 'right', 'radius'));
@@ -14,6 +15,14 @@
1415
$button-border-width-name: custom-property.get($items: ('button', 'border', 'width'));
1516
$button-box-shadow-name: custom-property.get($items: ('button', 'box-shadow'));
1617

18+
/* Text inputs */
19+
$input-text-border-top-left-radius-name: custom-property.get($items: ('input-text', 'border', 'top', 'left', 'radius'));
20+
$input-text-border-top-right-radius-name: custom-property.get($items: ('input-text', 'border', 'top', 'right', 'radius'));
21+
$input-text-border-bottom-right-radius-name: custom-property.get($items: ('input-text', 'border', 'bottom', 'right', 'radius'));
22+
$input-text-border-bottom-left-radius-name: custom-property.get($items: ('input-text', 'border', 'bottom', 'left', 'radius'));
23+
$input-text-border-width-name: custom-property.get($items: ('input-text', 'border', 'width'));
24+
$input-text-box-shadow-name: custom-property.get($items: ('input-text', 'box-shadow'));
25+
1726
border-radius: settings.$border-radius;
1827
box-shadow: settings.$box-shadow;
1928

@@ -25,6 +34,14 @@
2534
margin-right: calc(var(#{$button-border-width-name}) * -1);
2635
}
2736

37+
> :first-child input,
38+
> input:first-child {
39+
#{$input-text-box-shadow-name}: none;
40+
#{$input-text-border-top-right-radius-name}: #{0};
41+
#{$input-text-border-bottom-right-radius-name}: #{0};
42+
margin-right: calc(var(#{$input-text-border-width-name}) * -1);
43+
}
44+
2845
> :last-child #{$button-classname},
2946
> #{$button-classname}:last-child {
3047
#{$button-box-shadow-name}: none;
@@ -33,6 +50,14 @@
3350
margin-right: 0;
3451
}
3552

53+
> :last-child input,
54+
> input:last-child {
55+
#{$input-text-box-shadow-name}: none;
56+
#{$input-text-border-top-left-radius-name}: #{0};
57+
#{$input-text-border-bottom-left-radius-name}: #{0};
58+
margin-right: 0;
59+
}
60+
3661
> :not(:first-child):not(:last-child) #{$button-classname},
3762
> #{$button-classname}:not(:first-child):not(:last-child) {
3863
#{$button-border-top-left-radius-name}: #{0};
@@ -41,4 +66,13 @@
4166
#{$button-border-bottom-left-radius-name}: #{0};
4267
margin-right: calc(var(#{$button-border-width-name}) * -1);
4368
}
69+
70+
> :not(:first-child):not(:last-child) input,
71+
> input:not(:first-child):not(:last-child) {
72+
#{$input-text-border-top-left-radius-name}: #{0};
73+
#{$input-text-border-top-right-radius-name}: #{0};
74+
#{$input-text-border-bottom-right-radius-name}: #{0};
75+
#{$input-text-border-bottom-left-radius-name}: #{0};
76+
margin-right: calc(var(#{$input-text-border-width-name}) * -1);
77+
}
4478
}

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

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -303,10 +303,12 @@ The `role="search"` attribute highlights this functionality for screenreader use
303303
<Canvas>
304304
<Story name="Search form">
305305
{`
306-
<form role="search" action="" method="POST" class="u-flex o-joined-ui">
306+
<form role="search" action="" method="POST">
307307
<label for="search" class="u-sr-only">Search users</label>
308-
<input type="search" id="search" placeholder="Username or email…" class="u-flex-grow-1" />
309-
<button type="submit" class="a-button a-button--outline">Search</button>
308+
<div class="u-flex o-joined-ui">
309+
<input type="search" id="search" placeholder="Username or email…" class="u-flex-grow-1" />
310+
<button type="submit" class="a-button a-button--outline">Search</button>
311+
</div>
310312
</form>
311313
`}
312314
</Story>
@@ -315,15 +317,17 @@ The `role="search"` attribute highlights this functionality for screenreader use
315317
<Canvas>
316318
<Story name="Search form with icon button">
317319
{`
318-
<form role="search" action="" method="POST" class="u-flex o-joined-ui">
320+
<form role="search" action="" method="POST">
319321
<label for="search" class="u-sr-only">Search users</label>
320-
<input type="search" id="search" placeholder="Username or email…" class="u-flex-grow-1" />
321-
<button type="submit" class="a-button a-button--outline" title="Search users">
322-
<svg width="18" height="18" class="a-icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
323-
<use xlink:href="${icons}#icon-search"></use>
324-
</svg>
325-
<span class="u-sr-only">Search</span>
326-
</button>
322+
<div class="u-flex o-joined-ui">
323+
<input type="search" id="search" placeholder="Username or email…" class="u-flex-grow-1" />
324+
<button type="submit" class="a-button a-button--outline" title="Search users">
325+
<svg width="18" height="18" class="a-icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
326+
<use xlink:href="${icons}#icon-search"></use>
327+
</svg>
328+
<span class="u-sr-only">Search</span>
329+
</button>
330+
</div>
327331
</form>
328332
`}
329333
</Story>

0 commit comments

Comments
 (0)