Skip to content

Commit c30d619

Browse files
scriptcodedscriptcoded
committed
fix: various fixes for j26-app
1 parent 12613f2 commit c30d619

File tree

12 files changed

+222
-132
lines changed

12 files changed

+222
-132
lines changed

‎.changeset/sour-jars-worry.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@scouterna/ui-webc": patch
3+
---
4+
5+
Various fixes for j26-app

‎packages/storybook/src/stories/input.stories.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,18 @@ export const BasicExample = meta.story({
1818
render: (args) => <ScoutInput {...args} />,
1919
});
2020

21+
export const Large = BasicExample.extend({
22+
args: {
23+
size: "large",
24+
},
25+
});
26+
27+
export const Elevated = BasicExample.extend({
28+
args: {
29+
variant: "elevated",
30+
},
31+
});
32+
2133
export const Disabled = BasicExample.extend({
2234
args: {
2335
disabled: true,

‎packages/ui-webc/src/components/app-bar/app-bar.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
}
55

66
::slotted(scout-button) {
7-
height: 100%;
7+
/* biome-ignore lint/complexity/noImportantStyles: This is a cheeky override, so we're good with it */
8+
height: 100% !important;
89
}
910

1011
.container {

‎packages/ui-webc/src/components/button/button.css‎

Lines changed: 91 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,119 @@
1-
:host {
1+
scout-button {
22
display: inline-block;
3-
}
4-
5-
.button {
6-
flex: 1;
7-
display: inline-flex;
83
height: var(--spacing-10);
9-
align-items: center;
10-
justify-content: center;
11-
gap: var(--spacing-3);
12-
padding: 0 var(--spacing-4);
13-
font: var(--type-body-base);
14-
border-radius: var(--spacing-2);
15-
border: 1px solid transparent;
16-
cursor: pointer;
17-
text-decoration: none;
18-
}
19-
20-
.icon {
21-
width: var(--spacing-5);
22-
height: var(--spacing-5);
23-
margin: 0 calc(var(--spacing-1) * -1);
24-
}
25-
26-
.icon svg {
27-
width: 100%;
28-
height: 100%;
29-
}
304

31-
.button.icon-only {
32-
aspect-ratio: 1 / 1;
33-
justify-content: center;
34-
padding: 0;
35-
}
5+
.button {
6+
flex: 1;
7+
display: inline-flex;
8+
height: 100%;
9+
align-items: center;
10+
justify-content: center;
11+
gap: var(--spacing-3);
12+
padding: 0 var(--spacing-4);
13+
font: var(--type-body-base);
14+
border-radius: var(--spacing-2);
15+
border: 1px solid transparent;
16+
cursor: pointer;
17+
text-decoration: none;
18+
box-sizing: border-box;
19+
}
3620

37-
.button.icon-only .icon {
38-
margin: 0;
39-
}
21+
.icon {
22+
width: var(--spacing-5);
23+
height: var(--spacing-5);
24+
margin: 0 calc(var(--spacing-1) * -1);
25+
}
4026

41-
.button.icon-only .content {
42-
/* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */
43-
clip: rect(0 0 0 0);
44-
clip-path: inset(50%);
45-
height: 1px;
46-
overflow: hidden;
47-
position: absolute;
48-
white-space: nowrap;
49-
width: 1px;
50-
}
27+
.icon svg {
28+
width: 100%;
29+
height: 100%;
30+
}
5131

52-
.button.primary {
53-
background-color: var(--color-background-brand-base);
54-
color: var(--color-text-brand-inverse);
32+
&.icon-only .button {
33+
aspect-ratio: 1 / 1;
34+
justify-content: center;
35+
padding: 0;
36+
}
5537

56-
&:hover {
57-
background-color: var(--color-background-brand-hovered);
38+
&.icon-only .icon {
39+
margin: 0;
5840
}
5941

60-
&:active {
61-
background-color: var(--color-background-brand-pressed);
42+
&.icon-only .content {
43+
/* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */
44+
clip: rect(0 0 0 0);
45+
clip-path: inset(50%);
46+
height: 1px;
47+
overflow: hidden;
48+
position: absolute;
49+
white-space: nowrap;
50+
width: 1px;
6251
}
63-
}
6452

65-
.button.outlined {
66-
background-color: transparent;
67-
border-color: var(--color-background-brand-subtle-base);
68-
color: var(--color-text-brand-base);
53+
.button.primary {
54+
background-color: var(--color-background-brand-base);
55+
color: var(--color-text-brand-inverse);
6956

70-
&:hover {
71-
background-color: var(--color-background-brand-subtle-hovered);
72-
}
57+
&:hover {
58+
background-color: var(--color-background-brand-hovered);
59+
}
7360

74-
&:active {
75-
background-color: var(--color-background-brand-subtle-pressed);
61+
&:active {
62+
background-color: var(--color-background-brand-pressed);
63+
}
7664
}
77-
}
7865

79-
.button.text {
80-
background-color: transparent;
81-
border-color: transparent;
82-
color: var(--color-text-brand-base);
66+
.button.outlined {
67+
background-color: transparent;
68+
border-color: var(--color-background-brand-subtle-base);
69+
color: var(--color-text-brand-base);
8370

84-
&:hover {
85-
background-color: var(--color-background-brand-subtle-hovered);
86-
}
71+
&:hover {
72+
background-color: var(--color-background-brand-subtle-hovered);
73+
}
8774

88-
&:active {
89-
background-color: var(--color-background-brand-subtle-pressed);
75+
&:active {
76+
background-color: var(--color-background-brand-subtle-pressed);
77+
}
9078
}
91-
}
9279

93-
.button.caution {
94-
background-color: var(--color-background-caution-bold-base);
95-
color: var(--color-text-caution-bold-base);
80+
.button.text {
81+
background-color: transparent;
82+
border-color: transparent;
83+
color: var(--color-text-brand-base);
9684

97-
&:hover {
98-
background-color: var(--color-background-caution-bold-hovered);
99-
}
85+
&:hover {
86+
background-color: var(--color-background-brand-subtle-hovered);
87+
}
10088

101-
&:active {
102-
background-color: var(--color-background-caution-bold-pressed);
89+
&:active {
90+
background-color: var(--color-background-brand-subtle-pressed);
91+
}
10392
}
104-
}
10593

106-
.button.danger {
107-
background-color: var(--color-background-danger-bold-base);
108-
color: var(--color-text-danger-bold-base);
94+
.button.caution {
95+
background-color: var(--color-background-caution-bold-base);
96+
color: var(--color-text-caution-bold-base);
10997

110-
&:hover {
111-
background-color: var(--color-background-danger-bold-hovered);
98+
&:hover {
99+
background-color: var(--color-background-caution-bold-hovered);
100+
}
101+
102+
&:active {
103+
background-color: var(--color-background-caution-bold-pressed);
104+
}
112105
}
113106

114-
&:active {
115-
background-color: var(--color-background-danger-bold-pressed);
107+
.button.danger {
108+
background-color: var(--color-background-danger-bold-base);
109+
color: var(--color-text-danger-bold-base);
110+
111+
&:hover {
112+
background-color: var(--color-background-danger-bold-hovered);
113+
}
114+
115+
&:active {
116+
background-color: var(--color-background-danger-bold-pressed);
117+
}
116118
}
117119
}

‎packages/ui-webc/src/components/button/button.tsx‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import { Component, Event, type EventEmitter, h, Prop } from "@stencil/core";
1+
import {
2+
Component,
3+
Event,
4+
type EventEmitter,
5+
h,
6+
Host,
7+
Prop,
8+
} from "@stencil/core";
29

310
export type Variant = "primary" | "outlined" | "text" | "caution" | "danger";
411

@@ -10,7 +17,6 @@ export type Variant = "primary" | "outlined" | "text" | "caution" | "danger";
1017
@Component({
1118
tag: "scout-button",
1219
styleUrl: "button.css",
13-
scoped: true,
1420
})
1521
export class ScoutButton {
1622
@Prop() type: "button" | "submit" | "reset" | "link" = "button";
@@ -53,17 +59,19 @@ export class ScoutButton {
5359
const icon = this.icon && <span class="icon" innerHTML={this.icon} />;
5460

5561
return (
56-
<Tag
57-
class={`button ${this.variant} ${this.iconOnly ? "icon-only" : ""}`}
58-
onClick={() => this.scoutClick.emit()}
59-
{...props}
60-
>
61-
{this.iconPosition === "before" && icon}
62-
<span class="content">
63-
<slot />
64-
</span>
65-
{this.iconPosition === "after" && icon}
66-
</Tag>
62+
<Host class={this.iconOnly ? "icon-only" : ""}>
63+
<Tag
64+
class={`button ${this.variant}`}
65+
onClick={() => this.scoutClick.emit()}
66+
{...props}
67+
>
68+
{this.iconPosition === "before" && icon}
69+
<span class="content">
70+
<slot />
71+
</span>
72+
{this.iconPosition === "after" && icon}
73+
</Tag>
74+
</Host>
6775
);
6876
}
6977
}

‎packages/ui-webc/src/components/input/input.css‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,24 @@
1-
.input {
1+
:host {
2+
display: flex;
23
height: var(--spacing-10);
3-
padding: var(--spacing-2);
4-
font: var(--type-body-base);
4+
--scout-input-padding: var(--spacing-2);
5+
--scout-input-border-radius: var(--spacing-2);
6+
--scout-input-type: var(--type-body-base);
7+
}
8+
9+
:host(.large) {
10+
height: var(--spacing-14);
11+
--scout-input-padding: var(--spacing-3);
12+
--scout-input-border-radius: var(--spacing-3);
13+
--scout-input-type: var(--type-body-lg);
14+
}
15+
16+
.input {
17+
flex: 1;
18+
padding: var(--scout-input-padding);
19+
font: var(--scout-input-type);
520
border: 1px solid var(--color-gray-300);
6-
border-radius: var(--spacing-2);
21+
border-radius: var(--scout-input-border-radius);
722
background-color: var(--color-white);
823
color: var(--color-text-base);
924
}
@@ -13,3 +28,10 @@
1328
color: var(--color-gray-700);
1429
cursor: not-allowed;
1530
}
31+
32+
:host(.elevated) .input {
33+
box-shadow:
34+
0 4px 6px -1px rgb(0 0 0 / 0.1),
35+
0 2px 4px -2px rgb(0 0 0 / 0.1);
36+
border-color: transparent;
37+
}

0 commit comments

Comments
 (0)