Skip to content

Commit 11a6c0d

Browse files
gordonbrandergordonbrander
authored
More work on lookslike saga components (#69)
* Add exports * Stop using container units ...Unfortunately they do not work across slot boundaries. The container unit is sized by the light dom container, not the shadow dom container. See w3c/csswg-drafts#5984 Solution: use percentage units instead. Oddly enough, these do work across shadow boundaries. * Update all classes to use Common prefix
1 parent 60c05df commit 11a6c0d

File tree

13 files changed

+60
-25
lines changed

13 files changed

+60
-25
lines changed

‎typescript/packages/lookslike-sagas/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<body class="theme">
1111
<common-screen>
1212
<common-app>
13-
<common-vstack pad="md" gap="md">
13+
<common-list>
1414
<common-media src="example/mitchell-orr-jQqR2xGkesc-unsplash.jpg">
1515
Hello!
1616
</common-media>
@@ -29,7 +29,7 @@
2929
<common-media src="example/mitchell-orr-jQqR2xGkesc-unsplash.jpg">
3030
Hello!
3131
</common-media>
32-
</common-vstack>
32+
</common-list>
3333
<div slot="secondary">
3434
<common-suggestion>
3535
Buy milk

‎typescript/packages/lookslike-sagas/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"license": "UNLICENSED",
77
"private": true,
88
"type": "module",
9+
"exports": "./lib/index.js",
910
"scripts": {
1011
"dev": "vite",
1112
"build": "wireit",

‎typescript/packages/lookslike-sagas/src/components/app.ts

+8-5
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,20 @@ import { customElement } from "lit/decorators.js";
33
import { baseStyles } from "./style.js";
44

55
@customElement("common-app")
6-
export class AppElement extends LitElement {
6+
export class CommonAppElement extends LitElement {
77
static override styles = [
88
baseStyles,
99
css`
1010
:host {
1111
display: block;
12+
height: 100%;
13+
width: 100%;
1214
}
1315
1416
.app {
15-
height: 100cqh;
1617
display: grid;
18+
height: 100%;
19+
width: 100%;
1720
grid-template-columns: 1fr;
1821
grid-template-rows: 1fr min-content min-content;
1922
grid-template-areas:
@@ -32,10 +35,12 @@ export class AppElement extends LitElement {
3235
3336
.app-secondary {
3437
grid-area: secondary;
38+
container-type: inline-size;
3539
}
3640
3741
.app-search {
3842
grid-area: search;
43+
container-type: inline-size;
3944
background-color: var(--secondary-background);
4045
display: block;
4146
padding: var(--gap);
@@ -47,9 +52,7 @@ export class AppElement extends LitElement {
4752
return html`
4853
<div class="app">
4954
<main class="app-primary">
50-
<common-scroll>
51-
<slot></slot>
52-
</common-scroll>
55+
<slot></slot>
5356
</main>
5457
<nav class="app-secondary">
5558
<slot name="secondary"></slot>

‎typescript/packages/lookslike-sagas/src/components/common/button.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { customElement } from "lit/decorators.js";
33
import { baseStyles } from "../style.js";
44

55
@customElement("common-button")
6-
export class ButtonElement extends LitElement {
6+
export class CommonButtonElement extends LitElement {
77
static override styles = [
88
baseStyles,
99
css`

‎typescript/packages/lookslike-sagas/src/components/common/img.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { LitElement, html, css } from "lit";
22
import { customElement, property, state } from "lit/decorators.js";
33

44
@customElement("common-img")
5-
export class ImgElement extends LitElement {
5+
export class CommonImgElement extends LitElement {
66
static override styles = css`
77
:host {
88
display: block;

‎typescript/packages/lookslike-sagas/src/components/common/media.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { customElement, property } from "lit/decorators.js";
33
import { baseStyles } from "../style.js";
44

55
@customElement("common-media")
6-
export class MediaElement extends LitElement {
6+
export class CommonMediaElement extends LitElement {
77
static override styles = [
88
baseStyles,
99
css`

‎typescript/packages/lookslike-sagas/src/components/layout/hstack.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { customElement } from "lit/decorators.js";
33
import { baseStyles } from "../style.js";
44

55
@customElement("common-hstack")
6-
export class HstackElement extends LitElement {
6+
export class CommonHstackElement extends LitElement {
77
static override styles = [
88
baseStyles,
99
css`

‎typescript/packages/lookslike-sagas/src/components/layout/list.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { LitElement, html, css } from "lit";
2+
import { customElement } from "lit/decorators.js";
3+
import { baseStyles } from "../style.js";
4+
5+
@customElement("common-list")
6+
export class CommonListElement extends LitElement {
7+
static override styles = [
8+
baseStyles,
9+
css`
10+
:host {
11+
display: block;
12+
height: 100%;
13+
width: 100%;
14+
}
15+
`
16+
];
17+
18+
override render() {
19+
return html`
20+
<common-scroll>
21+
<common-vstack gap="md" pad="md">
22+
<slot></slot>
23+
</common-vstack>
24+
</common-scroll>
25+
`;
26+
}
27+
}

‎typescript/packages/lookslike-sagas/src/components/layout/screen.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { LitElement, html, css } from "lit";
22
import {customElement} from "lit/decorators.js";
33

44
@customElement("common-screen")
5-
export class ScreenElement extends LitElement {
5+
export class CommonScreenElement extends LitElement {
66
static override styles = css`
77
:host {
88
display: block;

‎typescript/packages/lookslike-sagas/src/components/layout/scroll.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,21 @@ import { customElement } from "lit/decorators.js";
33
import { baseStyles } from "../style.js";
44

55
@customElement("common-scroll")
6-
export class ScrollElement extends LitElement {
6+
export class CommonScrollElement extends LitElement {
77
static override styles = [
88
baseStyles,
99
css`
1010
:host {
1111
display: block;
12+
height: 100%;
13+
width: 100%;
1214
}
1315
1416
.scroll {
1517
overflow-y: auto;
1618
overflow-x: hidden;
17-
height: 100cqh;
19+
height: 100%;
20+
width: 100%;
1821
container-type: size;
1922
container-name: scroll;
2023
}

‎typescript/packages/lookslike-sagas/src/components/layout/vstack.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { customElement } from "lit/decorators.js";
33
import { baseStyles } from "../style.js";
44

55
@customElement("common-vstack")
6-
export class VstackElement extends LitElement {
6+
export class CommonVstackElement extends LitElement {
77
static override styles = [
88
baseStyles,
99
css`

‎typescript/packages/lookslike-sagas/src/components/unibox.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { customElement, property } from "lit/decorators.js";
33
import { baseStyles } from "./style.js";
44

55
@customElement("common-unibox")
6-
export class UniboxElement extends LitElement {
6+
export class CommonUniboxElement extends LitElement {
77
static override styles = [
88
baseStyles,
99
css`

‎typescript/packages/lookslike-sagas/src/main.ts

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
export { ScrollElement } from './components/layout/scroll.js';
2-
export { ScreenElement } from './components/layout/screen.js';
3-
export { VstackElement } from './components/layout/vstack.js';
4-
export { HstackElement } from './components/layout/hstack.js';
5-
export { MediaElement } from './components/common/media.js';
6-
export { ImgElement } from './components/common/img.js';
7-
export { ButtonElement } from './components/common/button.js';
1+
export { CommonScrollElement } from './components/layout/scroll.js';
2+
export { CommonScreenElement } from './components/layout/screen.js';
3+
export { CommonVstackElement } from './components/layout/vstack.js';
4+
export { CommonHstackElement } from './components/layout/hstack.js';
5+
export { CommonListElement } from './components/layout/list.js';
6+
export { CommonMediaElement } from './components/common/media.js';
7+
export { CommonImgElement } from './components/common/img.js';
8+
export { CommonButtonElement as ButtonElement } from './components/common/button.js';
89
export { CommonInputElement } from './components/common/input.js';
910
export { CommonSuggestionElement } from './components/suggestion.js';
10-
export { AppElement } from './components/app.js';
11-
export { UniboxElement } from './components/unibox.js';
11+
export { CommonAppElement } from './components/app.js';
12+
export { CommonUniboxElement } from './components/unibox.js';

0 commit comments

Comments
 (0)