Skip to content

Commit c7332a6

Browse files
logonofflogonoff
committed
feat(header): add compact variant
1 parent b766fc4 commit c7332a6

9 files changed

Lines changed: 72 additions & 70 deletions

File tree

‎workspaces/core/scss/components/_command-bar.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
display: flex;
1010
align-items: center;
1111
color: var(--#{$shale}text-colour);
12-
}
1312

14-
.#{$shale}command-bar--gutter {
15-
padding-inline: var(--#{$shale}font-2);
16-
padding-block: var(--#{$shale}font--1);
13+
&-gutter {
14+
padding-inline: var(--#{$shale}font--3);
15+
padding-block: var(--#{$shale}font--3);
16+
}
1717
}

‎workspaces/core/scss/components/_dialog.scss‎

Lines changed: 29 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -6,87 +6,57 @@
66
.#{$shale}dialog {
77
--#{$shale}dialog-transition-duration: 0.125s;
88

9-
transition:
10-
display var(--#{$shale}dialog-transition-duration) allow-discrete,
11-
overlay var(--#{$shale}dialog-transition-duration) allow-discrete;
12-
animation: #{$shale}dialog-exit var(--#{$shale}dialog-transition-duration)
13-
ease-out;
149
background: var(--#{$shale}background);
1510
border-radius: 0.4em;
1611
border: 1px solid var(--#{$shale}secondary-border);
1712
box-shadow: var(--#{$shale}shadow-puffy);
1813
padding: 0;
1914

15+
// Closed state
16+
opacity: 0;
17+
transform: scaleY(0);
18+
19+
transition:
20+
opacity var(--#{$shale}dialog-transition-duration) ease-out,
21+
transform var(--#{$shale}dialog-transition-duration) ease-out,
22+
display var(--#{$shale}dialog-transition-duration) allow-discrete,
23+
overlay var(--#{$shale}dialog-transition-duration) allow-discrete;
24+
2025
&::backdrop {
21-
animation: #{$shale}dialog-backdrop-exit
22-
var(--#{$shale}dialog-transition-duration) ease-in;
23-
transition: overlay var(--#{$shale}dialog-transition-duration)
24-
allow-discrete;
2526
background: var(--#{$shale}dialog-backdrop);
27+
opacity: 0;
28+
transition:
29+
opacity var(--#{$shale}dialog-transition-duration) ease-out,
30+
overlay var(--#{$shale}dialog-transition-duration) allow-discrete;
2631
}
2732

33+
// Open state
2834
&[open] {
29-
animation: #{$shale}dialog-enter var(--#{$shale}dialog-transition-duration)
30-
ease-out;
35+
opacity: 1;
36+
transform: scaleY(1);
3137
}
3238
&[open]::backdrop {
33-
animation: #{$shale}dialog-backdrop-enter
34-
var(--#{$shale}dialog-transition-duration) ease-in;
39+
opacity: 1;
40+
}
41+
42+
// Starting style for entry animation
43+
@starting-style {
44+
&[open] {
45+
opacity: 0;
46+
transform: scaleY(0);
47+
}
48+
&[open]::backdrop {
49+
opacity: 0;
50+
}
3551
}
3652
}
3753

3854
@media (prefers-reduced-motion: reduce) {
3955
.#{$shale}dialog {
4056
transition: none !important;
41-
animation: none !important;
4257

4358
&::backdrop {
4459
transition: none !important;
45-
animation: none !important;
4660
}
4761
}
4862
}
49-
50-
@keyframes #{$shale}dialog-enter {
51-
from {
52-
opacity: 0;
53-
transform: scaleX(1) scaleY(0);
54-
}
55-
56-
to {
57-
opacity: 1;
58-
transform: scaleX(1) scaleY(1);
59-
}
60-
}
61-
62-
@keyframes #{$shale}dialog-exit {
63-
from {
64-
opacity: 1;
65-
transform: scaleX(1) scaleY(1);
66-
}
67-
68-
to {
69-
opacity: 0;
70-
transform: scaleX(1) scaleY(0);
71-
}
72-
}
73-
74-
@keyframes #{$shale}dialog-backdrop-enter {
75-
from {
76-
opacity: 0;
77-
}
78-
79-
to {
80-
opacity: 1;
81-
}
82-
}
83-
84-
@keyframes #{$shale}dialog-backdrop-exit {
85-
from {
86-
opacity: 1;
87-
}
88-
89-
to {
90-
opacity: 0;
91-
}
92-
}

workspaces/core/scss/components/_menu.scss renamed to workspaces/core/scss/components/_header.scss

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
align-items: center;
99
display: flex;
1010
gap: 0.75rem;
11-
height: 3rem;
11+
height: var(--#{$shale}header-height, 3rem);
1212
padding-right: 0.75rem;
1313
pointer-events: auto;
1414
position: absolute;
@@ -29,13 +29,15 @@
2929

3030
/* Header + Menu Bar */
3131
.#{$shale}header {
32+
--#{$shale}header-height: 3rem;
33+
3234
background: var(--#{$shale}header-background);
3335
border-bottom: 1px solid var(--#{$shale}secondary-border);
3436
box-shadow: var(--#{$shale}shadow-moderate);
3537
color: var(--#{$shale}header-text);
3638
display: block;
3739
position: sticky;
38-
top: -3rem;
40+
top: calc(-1 * var(--#{$shale}header-height));
3941
user-select: none;
4042
width: 100%;
4143
z-index: 41;
@@ -45,6 +47,24 @@
4547
border-bottom: 0;
4648
}
4749

50+
&-compact {
51+
--#{$shale}header-height: 2.25rem;
52+
box-shadow: none;
53+
display: flex;
54+
flex-direction: column;
55+
justify-content: space-between;
56+
57+
& .#{$shale}header-title {
58+
align-items: center;
59+
flex-grow: 1;
60+
font-size: 1rem;
61+
}
62+
63+
& .#{$shale}caption-menu {
64+
height: var(--#{$shale}header-height);
65+
}
66+
}
67+
4868
&[disabled],
4969
&#{$disabled} {
5070
--#{$shale}header-background: var(--#{$shale}header-background-disabled);
@@ -53,8 +73,8 @@
5373

5474
.#{$shale}header-title {
5575
font-size: var(--#{$shale}font-1);
56-
height: 3rem;
57-
line-height: 3rem;
76+
height: var(--#{$shale}header-height);
77+
line-height: var(--#{$shale}header-height);
5878
opacity: 0.7;
5979
text-align: center;
6080
text-shadow: var(--#{$shale}text-shadow-puffy);

‎workspaces/core/scss/shale.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@
1919
@use "components/container";
2020
@use "components/dialog";
2121
@use "components/footer";
22+
@use "components/header";
2223
@use "components/icons";
2324
@use "components/input";
2425
@use "components/link";
25-
@use "components/menu";
2626
@use "components/notes";
2727
@use "components/scrollbar";
2828
@use "components/select";

‎workspaces/core/scss/theme/_base.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ $indeterminate: ".#{$shale}-indeterminate" !default;
2929
--#{$shale}font-1: calc(var(--#{$shale}font-0) * var(--#{$shale}font-scale));
3030
--#{$shale}font-0: 1rem;
3131
--#{$shale}font--1: calc(var(--#{$shale}font-0) / var(--#{$shale}font-scale));
32+
--#{$shale}font--2: calc(var(--#{$shale}font--1) / var(--#{$shale}font-scale));
33+
--#{$shale}font--3: calc(var(--#{$shale}font--2) / var(--#{$shale}font-scale));
3234

3335
/* Shadows */
3436
--#{$shale}shadow-subtle: 0 2px 4px 0 rgba(0, 0, 0, 0.12);

‎workspaces/react/reports/react.api.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ export interface BaseFlexContainerProps {
2727

2828
// @alpha (undocumented)
2929
export interface BaseHeaderProps {
30+
compact?: boolean;
31+
invertBorder?: boolean;
3032
state?: StateVariant;
3133
}
3234

‎workspaces/react/src/components/CommandBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const CommandBar: PolymorphicComponent<
3434
className={css(
3535
"shale-v1-command-bar",
3636
{ "shale-v1-flex-grow": flexGrow },
37-
{ "shale-v1-command-bar--gutter": gutter },
37+
{ "shale-v1-command-bar-gutter": gutter },
3838
props?.className,
3939
)}
4040
/>

‎workspaces/react/src/components/Dialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export interface DialogProps extends React.HTMLAttributes<HTMLDialogElement> {}
1414
* <Button type="button" command="show-modal" commandfor="my-dialog" aria-haspopup="dialog">Open Dialog</Button>
1515
*
1616
* <Dialog id="my-dialog" style={{ minWidth: "400px" }}>
17-
* <Header>
17+
* <Header compact>
1818
* <HeaderTitle>
1919
* <HeaderText>This is a dialog</HeaderText>
2020
* </HeaderTitle>

‎workspaces/react/src/components/Header.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import { css } from "../utils/css";
66
export interface BaseHeaderProps {
77
/** The initial state of the header (if you want to force a specific state) */
88
state?: StateVariant;
9+
/** Move the border to the top instead of the bottom */
10+
invertBorder?: boolean;
11+
/** More compact styles for use in a titlebar */
12+
compact?: boolean;
913
}
1014

1115
/**
@@ -86,13 +90,17 @@ export interface BaseHeaderProps {
8690
export const Header: PolymorphicComponent<"header", BaseHeaderProps> = ({
8791
Component = "header",
8892
state,
93+
invertBorder = false,
94+
compact = false,
8995
...props
9096
}) => (
9197
<Component
9298
{...props}
9399
className={css(
94100
"shale-v1-header",
95101
{ [`shale-v1--${state}`]: state },
102+
{ "shale-v1-header-invert-border": invertBorder },
103+
{ "shale-v1-header-compact": compact },
96104
props?.className,
97105
)}
98106
/>

0 commit comments

Comments
 (0)