This repository has been archived by the owner on Jun 29, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: new calcite-shell-center-row component and updated slot for cal…
…cite-shell (#950) * #935 add slot "bottom-panel" and deprecate "tip-manager" on shell * working but still some issues * Adjustments to keep bottom-panel from pusing contextual-panel off frame. * Added calcite-shell-center-row component and associated styles. TODO: collapsed event. * Added content node in order to recieve the `hidden` attribute for the `collapsed` property. * Reverted the removal of the tip-manager slot. Arranged nodes in shell to put center-row after contextual-panel and added associated flex order. * Added demo app for center-row. * added e2e * updated e2e * Rearranged nodes. Nixed styles no longer needed after rearranging nodes. * Added shell-center-row to shell Storybook. * Removed collapsed property and associated tests. Added expand/collpase toggle to demo. * Removed collapsed property from storybook. * Removed unused Watch import. * Fixed e2e test. * restored tip-manager slot references * Fixed e2e test. Reset block-configuration demo. * removed non-behavioral test. Co-authored-by: Matt Driscoll <MDriscoll@esri.com>
- Loading branch information
Showing
13 changed files
with
625 additions
and
20 deletions.
There are no files selected for viewing
26 changes: 26 additions & 0 deletions
26
src/components/calcite-shell-center-row/calcite-shell-center-row.e2e.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { accessible, defaults, hidden, renders } from "../../tests/commonTests"; | ||
|
|
||
| describe("calcite-shell-center-row", () => { | ||
| it("renders", async () => renders("calcite-shell-center-row")); | ||
|
|
||
| it("honors hidden attribute", async () => hidden("calcite-shell-center-row")); | ||
|
|
||
| it("defaults", async () => | ||
| defaults("calcite-shell-center-row", [ | ||
| { | ||
| propertyName: "detached", | ||
| defaultValue: false | ||
| }, | ||
| { | ||
| propertyName: "heightScale", | ||
| defaultValue: "s" | ||
| }, | ||
| { | ||
| propertyName: "position", | ||
| defaultValue: "end" | ||
| } | ||
| ])); | ||
|
|
||
| it("should be accessible", async () => | ||
| accessible("<calcite-shell-center-row><div>content</div></calcite-shell-center-row>")); | ||
| }); |
58 changes: 58 additions & 0 deletions
58
src/components/calcite-shell-center-row/calcite-shell-center-row.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| :host { | ||
| @extend %component-host; | ||
| overflow: hidden; | ||
| transition: height var(--calcite-app-animation-time) ease-in-out; | ||
|
|
||
| --calcite-app-shell-center-row-height-small: 33%; | ||
| --calcite-app-shell-center-row-height-medium: 70%; | ||
| --calcite-app-shell-center-row-height-large: 100%; | ||
| } | ||
|
|
||
| @import "../../scss/includes/_component"; | ||
|
|
||
| .content { | ||
| background-color: var(--calcite-app-background-content); | ||
| border: 1px solid var(--calcite-app-border); | ||
| flex: 1 0 0; | ||
| height: 100%; | ||
| margin: 0; | ||
| overflow: hidden; | ||
| width: 100%; | ||
| } | ||
|
|
||
| :host([detached]) { | ||
| animation: calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function); | ||
| border-radius: var(--calcite-app-border-radius); | ||
| box-shadow: var(--calcite-app-shadow-0); | ||
| margin: var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) | ||
| var(--calcite-app-cap-spacing-plus-half); | ||
| } | ||
|
|
||
| :host([position="end"]) { | ||
| align-self: flex-end; | ||
| } | ||
|
|
||
| :host([position="start"]) { | ||
| align-self: flex-start; | ||
| } | ||
|
|
||
| :host([height-scale="s"]) { | ||
| height: var(--calcite-app-shell-center-row-height-small); | ||
| } | ||
|
|
||
| :host([height-scale="m"]) { | ||
| height: var(--calcite-app-shell-center-row-height-medium); | ||
| } | ||
|
|
||
| :host([height-scale="l"]) { | ||
| height: var(--calcite-app-shell-center-row-height-large); | ||
| } | ||
|
|
||
| :host([height-scale="l"][detached]) { | ||
| height: calc(var(--calcite-app-shell-center-row-height-large) - var(--calcite-app-cap-spacing-double)); | ||
| } | ||
|
|
||
| ::slotted(calcite-panel) { | ||
| width: 100%; | ||
| height: 100%; | ||
| } |
51 changes: 51 additions & 0 deletions
51
src/components/calcite-shell-center-row/calcite-shell-center-row.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import { Component, Host, Prop, h, VNode } from "@stencil/core"; | ||
| import { CSS } from "./resources"; | ||
| import { CalcitePosition, CalciteScale } from "../interfaces"; | ||
|
|
||
| /** | ||
| * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel. | ||
| * @slot - A slot for adding content to the shell panel. | ||
| */ | ||
| @Component({ | ||
| tag: "calcite-shell-center-row", | ||
| styleUrl: "calcite-shell-center-row.scss", | ||
| shadow: true | ||
| }) | ||
| export class CalciteShellCenterRow { | ||
| // -------------------------------------------------------------------------- | ||
| // | ||
| // Properties | ||
| // | ||
| // -------------------------------------------------------------------------- | ||
|
|
||
| /** | ||
| * This property makes the content area appear like a "floating" panel. | ||
| */ | ||
| @Prop({ reflect: true }) detached = false; | ||
|
|
||
| /** | ||
| * Specifies the maxiumum height of the row. | ||
| */ | ||
| @Prop({ reflect: true }) heightScale: CalciteScale = "s"; | ||
|
|
||
| /** | ||
| * Arranges the component depending on the elements 'dir' property. | ||
| */ | ||
| @Prop({ reflect: true }) position: CalcitePosition = "end"; | ||
|
|
||
| // -------------------------------------------------------------------------- | ||
| // | ||
| // Render Methods | ||
| // | ||
| // -------------------------------------------------------------------------- | ||
|
|
||
| render(): VNode { | ||
| return ( | ||
| <Host> | ||
| <div class={CSS.content}> | ||
| <slot /> | ||
| </div> | ||
| </Host> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export const CSS = { | ||
| content: "content" | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -415,4 +415,4 @@ <h3 class="heading" slot="header-content">WE CARE A LOT</h3> | |
| </script> | ||
| </main> | ||
| </body> | ||
| </html> | ||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.