diff --git a/.changeset/sixty-seals-eat.md b/.changeset/sixty-seals-eat.md new file mode 100644 index 00000000..bd8b783d --- /dev/null +++ b/.changeset/sixty-seals-eat.md @@ -0,0 +1,8 @@ +--- +'@eventstore-ui/layout': minor +--- + +Allow `es-panel` and `es-sized-panel` to target the header area + +Previously, the `header` area was considered a special case, as it would always contain the header. +We now allow the area to be targetted by panels and is treated like any other layout area. diff --git a/packages/layout/src/components/panel/demos/layout-button-collapsed.demo.tsx b/packages/layout/src/components/panel/demos/layout-button-collapsed.demo.tsx index cfc358e2..0fd0ea35 100644 --- a/packages/layout/src/components/panel/demos/layout-button-collapsed.demo.tsx +++ b/packages/layout/src/components/panel/demos/layout-button-collapsed.demo.tsx @@ -10,7 +10,8 @@ import { import type { TargetableArea } from '../types'; /** - * es-layout-button and es-layout-link collapsed demo + * Button and link collapsing + * @group Panels */ @Component({ tag: 'es-layout-button-collapsed-demo', diff --git a/packages/layout/src/components/panel/demos/panel-all.demo.tsx b/packages/layout/src/components/panel/demos/panel-all.demo.tsx index ceb0bca3..b1ea22b9 100644 --- a/packages/layout/src/components/panel/demos/panel-all.demo.tsx +++ b/packages/layout/src/components/panel/demos/panel-all.demo.tsx @@ -10,7 +10,8 @@ import { router } from '@eventstore-ui/router'; import { Page, ES_LAYOUT_ICON_NAMESPACE } from '../../../../'; /** - * es-panel-placement + * All panel placements + * @group Panels */ @Component({ tag: 'es-panel-all-demo', @@ -25,11 +26,11 @@ export class PanelPlacementDemo { render() { return ( - - - {'hello'} + + {'Header Panel'} + {'Cookie Panel'} diff --git a/packages/layout/src/components/panel/demos/panel-close.demo.tsx b/packages/layout/src/components/panel/demos/panel-close.demo.tsx index 851ea0e2..ae2a97b9 100644 --- a/packages/layout/src/components/panel/demos/panel-close.demo.tsx +++ b/packages/layout/src/components/panel/demos/panel-close.demo.tsx @@ -6,7 +6,8 @@ import { areas } from './validPositions'; import type { PanelMode } from '../types'; /** - * es-panel close demo + * Panel closing + * @group Panels */ @Component({ tag: 'es-panel-close-demo', @@ -33,7 +34,6 @@ export class PanelPlacementDemo { return ( -
{'header'}
- - - {'hello'} diff --git a/packages/layout/src/components/panel/demos/validPositions.ts b/packages/layout/src/components/panel/demos/validPositions.ts index d5909f6f..a2139fd0 100644 --- a/packages/layout/src/components/panel/demos/validPositions.ts +++ b/packages/layout/src/components/panel/demos/validPositions.ts @@ -2,8 +2,8 @@ import type { TargetableArea, TargetableEdge } from '../types'; type Edges = TargetableEdge[]; -const verticalStarts: Edges = ['banner', 'body', 'panel', 'cookie']; -const verticalEnds: Edges = ['banner', 'body', 'panel', 'cookie']; +const verticalStarts: Edges = ['header', 'banner', 'body', 'panel', 'cookie']; +const verticalEnds: Edges = ['header', 'banner', 'body', 'panel', 'cookie']; const horizontalStarts: Edges = ['edge', 'sidebar', 'body', 'toolbar']; const horizontalEnds: Edges = ['sidebar', 'body', 'toolbar', 'edge']; @@ -12,6 +12,7 @@ export const areas: Array<[area: TargetableArea, starts: Edges, ends: Edges]> = ['panel', horizontalStarts, horizontalEnds], ['toolbar', verticalStarts, verticalEnds], ['banner', horizontalStarts, horizontalEnds], + ['header', horizontalStarts, horizontalEnds], ['sidebar', verticalStarts, verticalEnds], ['cookie', horizontalStarts, horizontalEnds], ]; diff --git a/packages/layout/src/components/panel/es-panel/es-panel.css b/packages/layout/src/components/panel/es-panel/es-panel.css index 9fac882c..ad26942c 100644 --- a/packages/layout/src/components/panel/es-panel/es-panel.css +++ b/packages/layout/src/components/panel/es-panel/es-panel.css @@ -23,6 +23,9 @@ :host([area='cookie']) { height: var(--layout-cookie-height); } +:host([area='header']) { + height: var(--layout-header-height); +} :host([area='banner']) { height: var(--layout-banner-height); } @@ -57,6 +60,7 @@ /* Horizontal */ :host([area='panel']), :host([area='cookie']), +:host([area='header']), :host([area='banner']) { & .handle { left: 0; @@ -81,6 +85,7 @@ } /* Bottom */ +:host([area='header']), :host([area='banner']) { & .handle { bottom: 0; diff --git a/packages/layout/src/components/panel/es-panel/es-panel.tsx b/packages/layout/src/components/panel/es-panel/es-panel.tsx index 7a1cbed5..0a1ad252 100644 --- a/packages/layout/src/components/panel/es-panel/es-panel.tsx +++ b/packages/layout/src/components/panel/es-panel/es-panel.tsx @@ -210,6 +210,7 @@ export class Panel { } switch (this.area) { + case 'header': case 'banner': case 'panel': case 'cookie': { @@ -251,6 +252,8 @@ export class Panel { private getCssVar = (area: TargetableArea) => { switch (area) { + case 'header': + return headerHeight; case 'panel': return panelHeight; case 'cookie': @@ -294,6 +297,7 @@ export class Panel { private calcSize = (x: number, y: number) => { const { top, right, bottom, left } = this.host.getBoundingClientRect(); switch (this.area) { + case 'header': case 'banner': return y - top; case 'panel': diff --git a/packages/layout/src/components/panel/es-panel/readme.md b/packages/layout/src/components/panel/es-panel/readme.md index b0a5d6d0..dec8fe6d 100644 --- a/packages/layout/src/components/panel/es-panel/readme.md +++ b/packages/layout/src/components/panel/es-panel/readme.md @@ -24,19 +24,19 @@ export default () => ( ## Properties -| Property | Attribute | Description | Type | Default | -| -------------- | --------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ----------- | -| `area` | `area` | Where to place the panel. | `"banner" \| "cookie" \| "panel" \| "sidebar" \| "toolbar"` | `'panel'` | -| `closeAt` | `close-at` | When to snap the panel closed (if a closed mode is set). | `number` | `100` | -| `closedMode` | `closed-mode` | How the panel should respond to being closed. | `"collapsed" \| "none"` | `'none'` | -| `closedSize` | `closed-size` | How large the panel should be when closed. | `number` | `34` | -| `defaultSize` | `default-size` | What size to default to. | `number` | `200` | -| `end` | `end` | Where to end the panel, inclusive. Must be the opposite axis to the area. | `"banner" \| "body" \| "cookie" \| "edge" \| "panel" \| "sidebar" \| "toolbar" \| undefined` | `undefined` | -| `maximumSize` | `maximum-size` | The maximum possible size to resize to. | `number` | `Infinity` | -| `minimumSize` | `minimum-size` | The minimum possible size to resize to. | `number` | `100` | -| `rememberMode` | `remember-mode` | If the last mode of the panel should be kept in local storage. | `boolean \| string \| undefined` | `undefined` | -| `rememberSize` | `remember-size` | If the size of the panel should be kept in local storage. | `boolean \| string \| undefined` | `undefined` | -| `start` | `start` | Where to start the panel, inclusive. Must be the opposite axis to the area. | `"banner" \| "body" \| "cookie" \| "edge" \| "panel" \| "sidebar" \| "toolbar" \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------- | --------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ----------- | +| `area` | `area` | Where to place the panel. | `"banner" \| "cookie" \| "header" \| "panel" \| "sidebar" \| "toolbar"` | `'panel'` | +| `closeAt` | `close-at` | When to snap the panel closed (if a closed mode is set). | `number` | `100` | +| `closedMode` | `closed-mode` | How the panel should respond to being closed. | `"collapsed" \| "none"` | `'none'` | +| `closedSize` | `closed-size` | How large the panel should be when closed. | `number` | `34` | +| `defaultSize` | `default-size` | What size to default to. | `number` | `200` | +| `end` | `end` | Where to end the panel, inclusive. Must be the opposite axis to the area. | `"banner" \| "body" \| "cookie" \| "edge" \| "header" \| "panel" \| "sidebar" \| "toolbar" \| undefined` | `undefined` | +| `maximumSize` | `maximum-size` | The maximum possible size to resize to. | `number` | `Infinity` | +| `minimumSize` | `minimum-size` | The minimum possible size to resize to. | `number` | `100` | +| `rememberMode` | `remember-mode` | If the last mode of the panel should be kept in local storage. | `boolean \| string \| undefined` | `undefined` | +| `rememberSize` | `remember-size` | If the size of the panel should be kept in local storage. | `boolean \| string \| undefined` | `undefined` | +| `start` | `start` | Where to start the panel, inclusive. Must be the opposite axis to the area. | `"banner" \| "body" \| "cookie" \| "edge" \| "header" \| "panel" \| "sidebar" \| "toolbar" \| undefined` | `undefined` | ## Events diff --git a/packages/layout/src/components/panel/es-sized-panel/es-sized-panel.tsx b/packages/layout/src/components/panel/es-sized-panel/es-sized-panel.tsx index dd5e3c61..77ae5567 100644 --- a/packages/layout/src/components/panel/es-sized-panel/es-sized-panel.tsx +++ b/packages/layout/src/components/panel/es-sized-panel/es-sized-panel.tsx @@ -3,6 +3,7 @@ import { Component, h, Host, Watch, Element, Prop } from '@stencil/core'; import { bannerHeight, cookieHeight, + headerHeight, panelHeight, sidebarWidth, toolbarWidth, @@ -66,6 +67,7 @@ export class SizedPanel { private setSize = ({ inlineSize, blockSize }: ResizeObserverSize) => { switch (this.area) { + case 'header': case 'panel': case 'cookie': case 'banner': { @@ -90,6 +92,8 @@ export class SizedPanel { return panelHeight; case 'cookie': return cookieHeight; + case 'header': + return headerHeight; case 'banner': return bannerHeight; case 'sidebar': diff --git a/packages/layout/src/components/panel/es-sized-panel/readme.md b/packages/layout/src/components/panel/es-sized-panel/readme.md index 9bf29202..d1434c0d 100644 --- a/packages/layout/src/components/panel/es-sized-panel/readme.md +++ b/packages/layout/src/components/panel/es-sized-panel/readme.md @@ -24,11 +24,11 @@ export default () => ( ## Properties -| Property | Attribute | Description | Type | Default | -| -------- | --------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ----------- | -| `area` | `area` | Where to place the panel. | `"banner" \| "cookie" \| "panel" \| "sidebar" \| "toolbar"` | `'panel'` | -| `end` | `end` | Where to end the panel, inclusive. Must be the opposite axis to the area. | `"banner" \| "body" \| "cookie" \| "edge" \| "panel" \| "sidebar" \| "toolbar" \| undefined` | `undefined` | -| `start` | `start` | Where to start the panel, inclusive. Must be the opposite axis to the area. | `"banner" \| "body" \| "cookie" \| "edge" \| "panel" \| "sidebar" \| "toolbar" \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------- | --------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ----------- | +| `area` | `area` | Where to place the panel. | `"banner" \| "cookie" \| "header" \| "panel" \| "sidebar" \| "toolbar"` | `'panel'` | +| `end` | `end` | Where to end the panel, inclusive. Must be the opposite axis to the area. | `"banner" \| "body" \| "cookie" \| "edge" \| "header" \| "panel" \| "sidebar" \| "toolbar" \| undefined` | `undefined` | +| `start` | `start` | Where to start the panel, inclusive. Must be the opposite axis to the area. | `"banner" \| "body" \| "cookie" \| "edge" \| "header" \| "panel" \| "sidebar" \| "toolbar" \| undefined` | `undefined` | ---------------------------------------------- diff --git a/packages/layout/src/components/panel/placement.css b/packages/layout/src/components/panel/placement.css index e82f9eaa..504074f5 100644 --- a/packages/layout/src/components/panel/placement.css +++ b/packages/layout/src/components/panel/placement.css @@ -10,6 +10,12 @@ left: 0; } +:host([area='header']) { + top: 0; + right: 0; + left: 0; +} + :host([area='banner']) { top: var(--layout-header-height); right: 0; @@ -32,6 +38,10 @@ Horizontal starts Top to Bottom */ +:host([area='sidebar'][start='header']), +:host([area='toolbar'][start='header']) { + top: 0; +} :host([area='sidebar'][start='banner']), :host([area='toolbar'][start='banner']) { top: var(--layout-header-height); @@ -53,6 +63,10 @@ Horizontal ends Top to Bottom */ +:host([area='sidebar'][end='header']), +:host([area='toolbar'][end='header']) { + bottom: calc(100vh - var(--layout-header-height)); +} :host([area='sidebar'][end='banner']), :host([area='toolbar'][end='banner']) { bottom: calc( @@ -76,24 +90,25 @@ Vertical starts Left to right */ +:host([area='header'][start='edge']), :host([area='banner'][start='edge']), :host([area='panel'][start='edge']), :host([area='cookie'][start='edge']) { left: 0; } - +:host([area='header'][start='sidebar']), :host([area='banner'][start='sidebar']), :host([area='panel'][start='sidebar']), :host([area='cookie'][start='sidebar']) { left: var(--layout-current-edge); } - +:host([area='header'][start='body']), :host([area='banner'][start='body']), :host([area='panel'][start='body']), :host([area='cookie'][start='body']) { left: calc(var(--layout-current-edge) + var(--layout-sidebar-width)); } - +:host([area='header'][start='toolbar']), :host([area='banner'][start='toolbar']), :host([area='panel'][start='toolbar']), :host([area='cookie'][start='toolbar']) { @@ -106,6 +121,7 @@ Vertical ends Left to right */ +:host([area='header'][end='sidebar']), :host([area='banner'][end='sidebar']), :host([area='panel'][end='sidebar']), :host([area='cookie'][end='sidebar']) { @@ -113,16 +129,19 @@ 100vw - var(--layout-current-edge) - var(--layout-sidebar-width) ); } +:host([area='header'][end='body']), :host([area='banner'][end='body']), :host([area='panel'][end='body']), :host([area='cookie'][end='body']) { right: calc(var(--layout-current-edge) + var(--layout-toolbar-width)); } +:host([area='header'][end='toolbar']), :host([area='banner'][end='toolbar']), :host([area='panel'][end='toolbar']), :host([area='cookie'][end='toolbar']) { right: var(--layout-current-edge); } +:host([area='header'][end='edge']), :host([area='banner'][end='edge']), :host([area='panel'][end='edge']), :host([area='cookie'][end='edge']) { diff --git a/packages/layout/src/components/panel/types.ts b/packages/layout/src/components/panel/types.ts index cc1d0fa1..5ed16869 100644 --- a/packages/layout/src/components/panel/types.ts +++ b/packages/layout/src/components/panel/types.ts @@ -1,4 +1,5 @@ export type TargetableArea = + | 'header' | 'banner' | 'sidebar' | 'panel' diff --git a/packages/layout/src/dev.css b/packages/layout/src/dev.css index f25998d5..1925ceb1 100644 --- a/packages/layout/src/dev.css +++ b/packages/layout/src/dev.css @@ -1,22 +1,8 @@ @import url('./css/root.css'); -@import url('~@eventstore-ui/assets/font-face.css'); -body ul.links { - grid-area: body; - list-style: none; - padding: 20px; - display: flex; - flex-direction: row; - gap: 20px; - flex-wrap: wrap; +:root { + --layout-header-base-height: 0px; } -body ul.links li a { - display: flex; - flex-direction: column; - text-decoration: none; - border-radius: 12px; - color: #435261; - border: 2px solid #f6f6f6; - padding: 20px; -} +@import url('~@eventstore-ui/assets/spacing.css'); +@import url('~@eventstore-ui/assets/font-face.css'); diff --git a/tools/stencilConfig/dev/devMode.ts b/tools/stencilConfig/dev/devMode.ts index 7c7b1a69..9d9266e0 100644 --- a/tools/stencilConfig/dev/devMode.ts +++ b/tools/stencilConfig/dev/devMode.ts @@ -101,43 +101,6 @@ const buildIndex = ({ name, devComponents }: IndexBuilder) => ` -
    @@ -160,18 +123,57 @@ const buildIndex = ({ name, devComponents }: IndexBuilder) => ` ) .join('\n'); - if (group === DEFAULT_GROUP && groups.length === 1) { - return children; - } - return `
  • -

    ${group}

    + ${ + group === DEFAULT_GROUP && + groups.length === 1 + ? '' + : `

    ${group}

    ` + }
      ${children}
    • `; }) .join('\n')} +