From 32c6c738a757d6ccad59c28594000853e305b8f4 Mon Sep 17 00:00:00 2001 From: Sahitya Buddharaju Date: Wed, 30 Oct 2024 13:54:41 -0500 Subject: [PATCH 1/6] feat(components): full screen dialog and focused page web components --- libs/components/package.json | 10 + libs/components/src/dialog/dialog.scss | 15 +- .../src/focused-page/focused-page.scss | 114 ++++++++++ .../src/focused-page/focused-page.spec.ts | 11 + .../src/focused-page/focused-page.stories.js | 175 +++++++++++++++ .../src/focused-page/focused-page.ts | 201 ++++++++++++++++++ .../full-screen-dialog.scss | 18 ++ .../full-screen-dialog.spec.ts | 11 + .../full-screen-dialog.stories.js | 179 ++++++++++++++++ .../full-screen-dialog/full-screen-dialog.ts | 98 +++++++++ libs/components/src/index.ts | 2 + libs/components/vite.config.js | 2 + 12 files changed, 834 insertions(+), 2 deletions(-) create mode 100644 libs/components/src/focused-page/focused-page.scss create mode 100644 libs/components/src/focused-page/focused-page.spec.ts create mode 100644 libs/components/src/focused-page/focused-page.stories.js create mode 100644 libs/components/src/focused-page/focused-page.ts create mode 100644 libs/components/src/full-screen-dialog/full-screen-dialog.scss create mode 100644 libs/components/src/full-screen-dialog/full-screen-dialog.spec.ts create mode 100644 libs/components/src/full-screen-dialog/full-screen-dialog.stories.js create mode 100644 libs/components/src/full-screen-dialog/full-screen-dialog.ts diff --git a/libs/components/package.json b/libs/components/package.json index 54444d70df..20f05afa71 100644 --- a/libs/components/package.json +++ b/libs/components/package.json @@ -101,11 +101,21 @@ "import": "./expansion-panel-item.mjs", "require": "./expansion-panel-item.js" }, + "./focused-page": { + "types": "./focused-page/focused-page.d.ts", + "import": "./focused-page.mjs", + "require": "./focused-page.js" + }, "./formfield": { "types": "./formfield/formfield.d.ts", "import": "./formfield.mjs", "require": "./formfield.js" }, + "./full-screen-dialog": { + "types": "./full-screen-dialog/full-screen-dialog.d.ts", + "import": "./full-screen-dialog.mjs", + "require": "./full-screen-dialog.js" + }, "./icon": { "types": "./icon/icon.d.ts", "import": "./icon.mjs", diff --git a/libs/components/src/dialog/dialog.scss b/libs/components/src/dialog/dialog.scss index 39a23012ab..4375e25943 100644 --- a/libs/components/src/dialog/dialog.scss +++ b/libs/components/src/dialog/dialog.scss @@ -1,6 +1,17 @@ - :host { --mdc-dialog-heading-ink-color: var(--mdc-theme-text-primary-on-background); --mdc-dialog-content-ink-color: var(--mdc-theme-text-primary-on-background); - --mdc-dialog-scroll-divider-color: var(--mdc-theme-border); + --mdc-dialog-scroll-divider-color: var(--mdc-theme-border); + + // Allow consumer to set border radius and height of the dialog + .mdc-dialog .mdc-dialog__surface { + border-radius: var(--cv-dialog-border-radius, var(--mdc-shape-medium, 4)); + min-height: var(--mdc-dialog-min-height); + } + + // Allow consumer to set padding of the dialog content + .mdc-dialog .mdc-dialog__content { + padding: var(--cv-dialog-vertical-padding, 20px) + var(--cv-dialog-horizontal-padding, 24px); + } } diff --git a/libs/components/src/focused-page/focused-page.scss b/libs/components/src/focused-page/focused-page.scss new file mode 100644 index 0000000000..0e23c89214 --- /dev/null +++ b/libs/components/src/focused-page/focused-page.scss @@ -0,0 +1,114 @@ +:host { + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; +} + +.action-items { + padding: 0.5rem 0.75rem; + text-align: right; +} + +.content { + box-sizing: border-box; + display: flex; + flex: 1; + max-height: 100vh; + overflow: auto; + transition: visibility 0.3s ease; +} + +.fullscreen-container { + border-top: 4px solid var(--cv-theme-tertiary); + box-sizing: border-box; + display: flex; + height: 100%; + width: 100%; + + &:not(.help-open) .help-panel { + width: 0; + + .resize-handle { + display: none; + } + } +} + +.fullscreen-container.hide-border { + border: none; +} + +.help { + --mdc-theme-surface: var(--cv-theme-surface-container-low); + + box-sizing: border-box; + flex: 1; + max-height: 100vh; + overflow-y: auto; +} + +.help-panel { + background: var(--cv-theme-surface-container-low); + box-sizing: border-box; + display: flex; + flex: 0 0 auto; + max-width: 100%; + position: relative; + resize: none; + transition: width 200ms; + width: var(--cv-focused-page-help-width, 320px); + z-index: 5; + + .resize-handle { + cursor: ew-resize; + height: 100%; + opacity: 0; + position: absolute; + transition: opacity 0.3s ease; + user-select: none; + width: 8px; + z-index: 9; + + &::before { + background-color: var(--mdc-theme-primary); + content: ''; + height: 100%; + left: 0; + position: absolute; + top: 0; + transform: translateX(-50%); + width: 2px; + } + } + + .resize-handle:hover, + &.resizing .resize-handle { + opacity: 1; + } +} + +.main { + box-sizing: border-box; + flex: 1; + height: 100%; +} + +@media only screen and (max-width: 479.98px) { + .help-open .help-panel { + width: 100%; + z-index: 100; + } +} + +@media only screen and (max-width: 959.98px) { + .help-open .help-panel { + box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), + 0px 4px 4px 0px rgba(0, 0, 0, 0.3); + + height: 100%; + position: absolute; + right: 0; + } +} diff --git a/libs/components/src/focused-page/focused-page.spec.ts b/libs/components/src/focused-page/focused-page.spec.ts new file mode 100644 index 0000000000..24ad78ad72 --- /dev/null +++ b/libs/components/src/focused-page/focused-page.spec.ts @@ -0,0 +1,11 @@ +/** + * @vitest-environment jsdom + */ +import { it, describe, expect } from 'vitest'; +import { CovalentFocusedPage } from './focused-page'; + +describe('Covalent Focused Page', () => { + it('should work', () => { + expect(new CovalentFocusedPage()).toBeDefined(); + }); +}); diff --git a/libs/components/src/focused-page/focused-page.stories.js b/libs/components/src/focused-page/focused-page.stories.js new file mode 100644 index 0000000000..557d989249 --- /dev/null +++ b/libs/components/src/focused-page/focused-page.stories.js @@ -0,0 +1,175 @@ +import './focused-page'; +import '../button/button'; +import '../toolbar/toolbar'; +import '../icon-button/icon-button'; +import '../icon-button-toggle/icon-button-toggle'; +import '../icon-radio/icon-radio-toggle'; +import '../typography/typography'; +import '../icon/icon'; + +export default { + title: 'Components/Focused Page', + argTypes: {}, + args: { + helpOpen: false, + helpResizable: false, + hideTopBorder: false, + }, + parameters: { + layout: 'fullscreen', + }, +}; + +const Template = ({ helpOpen, helpResizable, hideTopBorder }) => { + document.addEventListener( + 'DOMContentLoaded', + () => { + const helpCloseButton = document.body.querySelector('.help-close'); + helpCloseButton.addEventListener('click', () => { + const dialog = document.body.querySelector('#focused-page'); + dialog.helpOpen = false; + }); + const helpToggleButton = document.body.querySelector('.help-toggle'); + helpToggleButton.addEventListener('click', () => { + const dialog = document.body.querySelector('#focused-page'); + dialog.helpOpen = !dialog.helpOpen; + }); + }, + { once: true } + ); + + return ` + + + +
+ + + + Connect data source + + + + +
+
+
+ + + +
+ + Select model + + + Select the industry data model for your organization + +
+
+
+ + + +
+ + Review details + + + Preview the selected model and sample schema + +
+
+
+ + + +
+ + Install + + + Acknowledge creation of database and install + +
+
+
+
+ + work +
Balanced
+
Every week
+ + + work +
Balanced
+
Every week
+ + + work +
Balanced
+
Every week
+ + + work +
Balanced
+
Every week
+ +
+
+
+ + +
+ + Help + + + +
+ + Ultricies nunc massa, id ut felis sed varius accumsan platea. + +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam + tincidunt lectus risus, id aliquet mi congue sed. + +
+ + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices + pouere cubilia curae; Phasellus tincidunt eros arcu, sollicitudin + laoreet urna aliquet eget. + +
+ + Phasellus porta sed libero vel vulputate. Quisque non nisl sem. + Pellentesque nec pretium magna, et vestibulum neque. Mauris molestie + eros quis nisi pretium, + +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam + tincidunt lectus risus, id aliquet mi congue sed. + +
+ + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices + pouere cubilia curae; Phasellus tincidunt eros arcu, sollicitudin + laoreet urna aliquet eget. + +
+ + Phasellus porta sed libero vel vulputate. Quisque non nisl sem. + Pellentesque nec pretium magna, et vestibulum neque. Mauris molestie + eros quis nisi pretium, + +
+
+`; +}; + +export const Basic = Template.bind({}); diff --git a/libs/components/src/focused-page/focused-page.ts b/libs/components/src/focused-page/focused-page.ts new file mode 100644 index 0000000000..148a702f58 --- /dev/null +++ b/libs/components/src/focused-page/focused-page.ts @@ -0,0 +1,201 @@ +import { + css, + html, + LitElement, + nothing, + PropertyValues, + TemplateResult, + unsafeCSS, +} from 'lit'; +import { customElement, property, query } from 'lit/decorators.js'; +import styles from './focused-page.scss?inline'; +import { classMap } from 'lit/directives/class-map.js'; + +/** + * Focused page + * + * @slot - This element has a slot + */ + +@customElement('cv-focused-page') +export class CovalentFocusedPage extends LitElement { + static override styles = [ + css` + ${unsafeCSS(styles)} + `, + ]; + + /** + * Whether the help section is open or not + */ + @property({ type: Boolean, reflect: true }) + helpOpen = false; + + /** + * Whether the help section is resizable + */ + @property({ type: Boolean, reflect: true }) + helpResizable = false; + + /** + * Whether the help section is resizable + */ + @property({ type: Boolean, reflect: true }) + hideTopBorder = false; + + /** + * DOM element of the container div + */ + @query('.fullscreen-container') + container!: HTMLDivElement; + + /** + * DOM element of the help panel + */ + @query('#help-panel') + helpPanel!: HTMLElement; + + /** + * DOM element of the resize handler + */ + @query('.resize-handle') + resizeHandle!: HTMLElement; + + /** + * Whether the help section is being resized + */ + private _isResizing = false; + + constructor() { + super(); + this._resizerMouseMove = this._resizerMouseMove.bind(this); + this._resizerMouseUp = this._resizerMouseUp.bind(this); + this._startResizing = this._startResizing.bind(this); + this.resetHelpPanelWidth = this.resetHelpPanelWidth.bind(this); + } + + protected firstUpdated(): void { + this.openHelpPanel(); + } + + openHelpPanel(): void { + // Set width of the help panel + const savedWidth = + parseInt(localStorage.getItem('focusedPageHelpWidth') || '') || 320; + this.setHelpPanelWidth(this.helpOpen ? `${savedWidth}px` : '0'); + } + + closeHelpPanel() { + this.setHelpPanelWidth('0'); + this.helpOpen = false; + } + + resetHelpPanelWidth() { + this.setHelpPanelWidth('320px'); + localStorage.setItem('focusedPageHelpWidth', `320`); + } + + setHelpPanelWidth(width: string) { + this.container?.style.setProperty('--cv-focused-page-help-width', width); + } + + protected updated(_changedProperties: PropertyValues): void { + super.updated(_changedProperties); + if (_changedProperties.has('helpOpen')) { + if (this.helpOpen) { + this.openHelpPanel(); + } else { + this.closeHelpPanel(); + } + } + } + + // Called when the resize handler is dragged to resize the help panel + private _resizerMouseMove(e: MouseEvent): void { + if (!this.container || !this.helpPanel || !this._isResizing) return; + const viewportWidth = window.innerWidth; + + const containerRect = this.container.getBoundingClientRect(); + let newWidth; + + if (viewportWidth < 960) { + // Calculate new width based on absolute positioning + const helpPanelRect = this.helpPanel.getBoundingClientRect(); + newWidth = helpPanelRect.right - e.clientX; + } else { + // Calculate new width based on normal positioning + newWidth = containerRect.right - e.clientX; + } + + if ( + viewportWidth < 960 && + newWidth > 320 && + newWidth < viewportWidth - 40 + ) { + this.setHelpPanelWidth(`${newWidth}px`); + localStorage.setItem('focusedPageHelpWidth', `${newWidth}`); + } else if (newWidth > 320 && newWidth < containerRect.width - 600) { + this.setHelpPanelWidth(`${newWidth}px`); + localStorage.setItem('focusedPageHelpWidth', `${newWidth}`); + } + } + + // Called when dragging is finished (i.e. mouse up event on resize handler) + private _resizerMouseUp(): void { + this._isResizing = false; + this.helpPanel.classList.remove('resizing'); + this.helpPanel.style.transition = 'width 200ms'; + document.removeEventListener('mouseup', this._resizerMouseUp); + document.removeEventListener('mousemove', this._resizerMouseMove); + } + + // Called when dragging starts (i.e. mouse down event on resize handler) + private _startResizing(e: MouseEvent): void { + if (e.target !== this.resizeHandle) return; + this._isResizing = true; + this.helpPanel.classList.add('resizing'); + this.helpPanel.style.transition = 'none'; + document.addEventListener('mouseup', this._resizerMouseUp); + document.addEventListener('mousemove', this._resizerMouseMove); + } + + protected render(): TemplateResult<1> { + const classes = { + 'fullscreen-container': true, + 'help-open': this.helpOpen, + 'hide-border': this.hideTopBorder, + }; + const helpClasses = { + 'help-panel': true, + 'help-resizable': this.helpResizable, + }; + return html`
+
+
+ +
+
+ +
`; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'cv-focused-page': CovalentFocusedPage; + } +} + +export default CovalentFocusedPage; diff --git a/libs/components/src/full-screen-dialog/full-screen-dialog.scss b/libs/components/src/full-screen-dialog/full-screen-dialog.scss new file mode 100644 index 0000000000..b31e5cc16b --- /dev/null +++ b/libs/components/src/full-screen-dialog/full-screen-dialog.scss @@ -0,0 +1,18 @@ +:host { + cv-dialog { + --cv-dialog-border-radius: 0; + --cv-dialog-horizontal-padding: 0; + --cv-dialog-vertical-padding: 0; + --cv-side-sheet-width: 100vw; + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100vh; + --mdc-dialog-max-height: 100vh; + } + + .mdc-dialog .mdc-dialog__surface { + border-radius: 0; + min-height: var(--mdc-dialog-min-height); + transition: all 1s ease-in-out !important; + } +} diff --git a/libs/components/src/full-screen-dialog/full-screen-dialog.spec.ts b/libs/components/src/full-screen-dialog/full-screen-dialog.spec.ts new file mode 100644 index 0000000000..dfcca9ea6a --- /dev/null +++ b/libs/components/src/full-screen-dialog/full-screen-dialog.spec.ts @@ -0,0 +1,11 @@ +/** + * @vitest-environment jsdom + */ +import { it, describe, expect } from 'vitest'; +import { CovalentFullscreenDialog } from './full-screen-dialog'; + +describe('Covalent Fullscreen Dialog', () => { + it('should work', () => { + expect(new CovalentFullscreenDialog()).toBeDefined(); + }); +}); diff --git a/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js b/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js new file mode 100644 index 0000000000..222aa38c3a --- /dev/null +++ b/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js @@ -0,0 +1,179 @@ +import './full-screen-dialog'; +import '../dialog/dialog'; +import '../button/button'; +import '../toolbar/toolbar'; +import '../icon-button/icon-button'; +import '../icon-button-toggle/icon-button-toggle'; +import '../icon-radio/icon-radio-toggle'; +import '../typography/typography'; +import '../icon/icon'; + +export default { + title: 'Components/Full-screen Dialog', + argTypes: {}, + args: { + helpOpen: false, + helpResizable: false, + open: false, + escapeKeyAction: 'close', + }, +}; + +const Template = ({ helpOpen, helpResizable, open, escapeKeyAction }) => { + document.addEventListener( + 'DOMContentLoaded', + () => { + const button = document.body.querySelector('#dialog-button'); + button.addEventListener('click', () => { + const dialog = document.body.querySelector('#dialog1'); + dialog.open = true; + }); + const helpCloseButton = document.body.querySelector('.help-close'); + helpCloseButton.addEventListener('click', () => { + const dialog = document.body.querySelector('#dialog1'); + dialog.helpOpen = false; + }); + const helpToggleButton = document.body.querySelector('.help-toggle'); + helpToggleButton.addEventListener('click', () => { + const dialog = document.body.querySelector('#dialog1'); + dialog.helpOpen = !dialog.helpOpen; + }); + const fullscreenCloseButton = document.body.querySelector( + '.full-screen-dialog-close' + ); + fullscreenCloseButton.addEventListener('click', () => { + const dialog = document.body.querySelector('#dialog1'); + dialog.open = false; + }); + }, + { once: true } + ); + + return ` +Open full-screen dialog + + + +
+ + + + Connect data source + + + + + +
+
+
+ + + +
+ + Select model + + + Select the industry data model for your organization + +
+
+
+ + + +
+ + Review details + + + Preview the selected model and sample schema + +
+
+
+ + + +
+ + Install + + + Acknowledge creation of database and install + +
+
+
+
+ + work +
Balanced
+
Every week
+ + + work +
Balanced
+
Every week
+ + + work +
Balanced
+
Every week
+ + + work +
Balanced
+
Every week
+ +
+
+
+ + +
+ + Help + + + +
+ + Ultricies nunc massa, id ut felis sed varius accumsan platea. + +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam + tincidunt lectus risus, id aliquet mi congue sed. + +
+ + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices + pouere cubilia curae; Phasellus tincidunt eros arcu, sollicitudin + laoreet urna aliquet eget. + +
+ + Phasellus porta sed libero vel vulputate. Quisque non nisl sem. + Pellentesque nec pretium magna, et vestibulum neque. Mauris molestie + eros quis nisi pretium, + +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam + tincidunt lectus risus, id aliquet mi congue sed. + +
+
+`; +}; + +export const Basic = Template.bind({}); diff --git a/libs/components/src/full-screen-dialog/full-screen-dialog.ts b/libs/components/src/full-screen-dialog/full-screen-dialog.ts new file mode 100644 index 0000000000..53d43695d2 --- /dev/null +++ b/libs/components/src/full-screen-dialog/full-screen-dialog.ts @@ -0,0 +1,98 @@ +import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import styles from './full-screen-dialog.scss?inline'; +import CovalentDialog from '../dialog/dialog'; +import '../focused-page/focused-page'; + +/** + * Full-screen Dialog + * + * @slot - This element has a slot + */ + +@customElement('cv-full-screen-dialog') +export class CovalentFullscreenDialog extends LitElement { + static override styles = [ + css` + ${unsafeCSS(CovalentDialog.styles)} ${unsafeCSS(styles)} + `, + ]; + + /** + * Whether the component is open + */ + @property({ type: Boolean, reflect: true }) + open = false; + + /** + * Action to be taken when escape button is clicked. + * Set it to '' to prevent any action. + */ + @property({ type: String }) + escapeKeyAction = 'close'; + + /** + * Whether the help section is open or not + */ + @property({ type: Boolean, reflect: true }) + helpOpen = false; + + /** + * Whether the help section is resizable + */ + @property({ type: Boolean, reflect: true }) + helpResizable = false; + + private _handleClose(): void { + this.open = false; + } + + protected firstUpdated(): void { + const dialog = this.renderRoot.querySelector('cv-dialog')?.shadowRoot; + const styles = ` + .mdc-dialog--opening .mdc-dialog__container { + transform: translate(100%, 0); + transition: transform 150ms cubic-bezier(0.4, 0, 1, 1); + } + + .mdc-dialog--closing .mdc-dialog__container { + opacity: 1; + transform: translate(100%, 0); + transition: transform 150ms cubic-bezier(0, 0, 0.2, 1); + } + `; + + // Adding styles for the ease effect when component is opened + const styleElement = document.createElement('style'); + styleElement.textContent = styles; + dialog?.appendChild(styleElement); + } + + protected render(): TemplateResult<1> { + return html` + + + + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'cv-full-screen-dialog': CovalentFullscreenDialog; + } +} + +export default CovalentFullscreenDialog; diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts index 70b39aadf7..6386709fbd 100644 --- a/libs/components/src/index.ts +++ b/libs/components/src/index.ts @@ -15,7 +15,9 @@ export * from './drawer/drawer'; export * from './empty-state/empty-state'; export * from './expansion-panel/expansion-panel'; export * from './expansion-panel/expansion-panel-item'; +export * from './focused-page/focused-page'; export * from './formfield/formfield'; +export * from './full-screen-dialog/full-screen-dialog'; export * from './icon/icon'; export * from './icon-button/icon-button'; export * from './icon-button-toggle/icon-button-toggle'; diff --git a/libs/components/vite.config.js b/libs/components/vite.config.js index c839388730..43ba07545f 100644 --- a/libs/components/vite.config.js +++ b/libs/components/vite.config.js @@ -27,7 +27,9 @@ module.exports = defineConfig(({ mode }) => { 'libs/components/src/empty-state/empty-state', 'libs/components/src/expansion-panel/expansion-panel', 'libs/components/src/expansion-panel/expansion-panel-item', + 'libs/components/src/focused-page/focused-page', 'libs/components/src/formfield/formfield', + 'libs/components/src/full-screen-dialog/full-screen-dialog', 'libs/components/src/icon/icon', 'libs/components/src/icon-button/icon-button', 'libs/components/src/icon-button-toggle/icon-button-toggle', From da44e53538334fc62b0df410947ea3873c3cca44 Mon Sep 17 00:00:00 2001 From: Sahitya Buddharaju Date: Wed, 30 Oct 2024 14:05:53 -0500 Subject: [PATCH 2/6] fix(styles): fix style lint errors --- libs/components/src/focused-page/focused-page.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/libs/components/src/focused-page/focused-page.scss b/libs/components/src/focused-page/focused-page.scss index 0e23c89214..ff4c907197 100644 --- a/libs/components/src/focused-page/focused-page.scss +++ b/libs/components/src/focused-page/focused-page.scss @@ -104,9 +104,8 @@ @media only screen and (max-width: 959.98px) { .help-open .help-panel { - box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), - 0px 4px 4px 0px rgba(0, 0, 0, 0.3); - + box-shadow: 0 8px 12px 6px rgba(0, 0, 0, 15%), + 0 4px 4px 0 rgba(0, 0, 0, 30%); height: 100%; position: absolute; right: 0; From 18775e36fdb205b9d0cc93ca22755e1e32626a55 Mon Sep 17 00:00:00 2001 From: Sahitya Buddharaju Date: Wed, 30 Oct 2024 14:07:25 -0500 Subject: [PATCH 3/6] refactor(storybook): change story names --- libs/components/src/focused-page/focused-page.stories.js | 2 +- .../src/full-screen-dialog/full-screen-dialog.stories.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/components/src/focused-page/focused-page.stories.js b/libs/components/src/focused-page/focused-page.stories.js index 557d989249..738eb32d6f 100644 --- a/libs/components/src/focused-page/focused-page.stories.js +++ b/libs/components/src/focused-page/focused-page.stories.js @@ -8,7 +8,7 @@ import '../typography/typography'; import '../icon/icon'; export default { - title: 'Components/Focused Page', + title: 'Components/Focused page', argTypes: {}, args: { helpOpen: false, diff --git a/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js b/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js index 222aa38c3a..acb1672849 100644 --- a/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js +++ b/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js @@ -9,7 +9,7 @@ import '../typography/typography'; import '../icon/icon'; export default { - title: 'Components/Full-screen Dialog', + title: 'Components/Full-screen dialog', argTypes: {}, args: { helpOpen: false, From 67f10f7e06982d3d79f3e5497ca83af14fc36037 Mon Sep 17 00:00:00 2001 From: Sahitya Buddharaju Date: Fri, 1 Nov 2024 12:02:48 -0500 Subject: [PATCH 4/6] fix(components): change full-screen dialog implementation --- .../full-screen-dialog.scss | 20 +--- .../full-screen-dialog/full-screen-dialog.ts | 97 ++++++++----------- 2 files changed, 47 insertions(+), 70 deletions(-) diff --git a/libs/components/src/full-screen-dialog/full-screen-dialog.scss b/libs/components/src/full-screen-dialog/full-screen-dialog.scss index b31e5cc16b..03dbfdee4f 100644 --- a/libs/components/src/full-screen-dialog/full-screen-dialog.scss +++ b/libs/components/src/full-screen-dialog/full-screen-dialog.scss @@ -1,18 +1,6 @@ :host { - cv-dialog { - --cv-dialog-border-radius: 0; - --cv-dialog-horizontal-padding: 0; - --cv-dialog-vertical-padding: 0; - --cv-side-sheet-width: 100vw; - --mdc-dialog-min-width: 100vw; - --mdc-dialog-max-width: 100vw; - --mdc-dialog-min-height: 100vh; - --mdc-dialog-max-height: 100vh; - } - - .mdc-dialog .mdc-dialog__surface { - border-radius: 0; - min-height: var(--mdc-dialog-min-height); - transition: all 1s ease-in-out !important; - } + --cv-dialog-border-radius: 0; + --cv-dialog-horizontal-padding: 0; + --cv-dialog-vertical-padding: 0; + --cv-side-sheet-width: 100vw; } diff --git a/libs/components/src/full-screen-dialog/full-screen-dialog.ts b/libs/components/src/full-screen-dialog/full-screen-dialog.ts index 53d43695d2..47cff266e5 100644 --- a/libs/components/src/full-screen-dialog/full-screen-dialog.ts +++ b/libs/components/src/full-screen-dialog/full-screen-dialog.ts @@ -1,6 +1,7 @@ -import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit'; +import { css, html, TemplateResult, unsafeCSS } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import styles from './full-screen-dialog.scss?inline'; +import sideSheetStyles from '../side-sheet/side-sheet.scss?inline'; import CovalentDialog from '../dialog/dialog'; import '../focused-page/focused-page'; @@ -11,26 +12,15 @@ import '../focused-page/focused-page'; */ @customElement('cv-full-screen-dialog') -export class CovalentFullscreenDialog extends LitElement { +export class CovalentFullscreenDialog extends CovalentDialog { static override styles = [ css` - ${unsafeCSS(CovalentDialog.styles)} ${unsafeCSS(styles)} + ${unsafeCSS(CovalentDialog.styles)} ${unsafeCSS( + sideSheetStyles + )} ${unsafeCSS(styles)} `, ]; - /** - * Whether the component is open - */ - @property({ type: Boolean, reflect: true }) - open = false; - - /** - * Action to be taken when escape button is clicked. - * Set it to '' to prevent any action. - */ - @property({ type: String }) - escapeKeyAction = 'close'; - /** * Whether the help section is open or not */ @@ -43,49 +33,48 @@ export class CovalentFullscreenDialog extends LitElement { @property({ type: Boolean, reflect: true }) helpResizable = false; - private _handleClose(): void { - this.open = false; - } + /** + * Since the default, action slots of mdc-dialog have been replaced with the focused page component, + * override this method to return focused page as the initial focus element + */ + protected override getInitialFocusEl(): HTMLElement | null { + const initFocusSelector = `[${this.initialFocusAttribute}]`; + + // only search light DOM. This typically handles all the cases + const lightDomQs = this.querySelector(initFocusSelector); - protected firstUpdated(): void { - const dialog = this.renderRoot.querySelector('cv-dialog')?.shadowRoot; - const styles = ` - .mdc-dialog--opening .mdc-dialog__container { - transform: translate(100%, 0); - transition: transform 150ms cubic-bezier(0.4, 0, 1, 1); - } - - .mdc-dialog--closing .mdc-dialog__container { - opacity: 1; - transform: translate(100%, 0); - transition: transform 150ms cubic-bezier(0, 0, 0.2, 1); - } - `; + if (lightDomQs) { + return lightDomQs as HTMLElement; + } - // Adding styles for the ease effect when component is opened - const styleElement = document.createElement('style'); - styleElement.textContent = styles; - dialog?.appendChild(styleElement); + const focusedPage = this.renderRoot.querySelector('cv-focused-page'); + return focusedPage; } - protected render(): TemplateResult<1> { - return html` { + return html`
- - - - - `; +
+
+
+ + + + +
+
+
+
+
`; } } From c9ee07b9d297017d6b4e16ef7e1755d07b3aacab Mon Sep 17 00:00:00 2001 From: Sahitya Buddharaju Date: Mon, 4 Nov 2024 10:25:10 -0600 Subject: [PATCH 5/6] fix(storybook): update toggled state in fullscreen dialog --- .../src/focused-page/focused-page.stories.js | 146 ++++++++-------- .../full-screen-dialog.stories.js | 159 +++++++++--------- 2 files changed, 155 insertions(+), 150 deletions(-) diff --git a/libs/components/src/focused-page/focused-page.stories.js b/libs/components/src/focused-page/focused-page.stories.js index 738eb32d6f..0757c293fb 100644 --- a/libs/components/src/focused-page/focused-page.stories.js +++ b/libs/components/src/focused-page/focused-page.stories.js @@ -25,11 +25,14 @@ const Template = ({ helpOpen, helpResizable, hideTopBorder }) => { 'DOMContentLoaded', () => { const helpCloseButton = document.body.querySelector('.help-close'); + const helpToggleButton = document.body.querySelector('.help-toggle'); helpCloseButton.addEventListener('click', () => { const dialog = document.body.querySelector('#focused-page'); dialog.helpOpen = false; + helpToggleButton.on = false; + helpToggleButton.toggledOn = false; }); - const helpToggleButton = document.body.querySelector('.help-toggle'); + helpToggleButton.addEventListener('click', () => { const dialog = document.body.querySelector('#focused-page'); dialog.helpOpen = !dialog.helpOpen; @@ -44,82 +47,81 @@ const Template = ({ helpOpen, helpResizable, hideTopBorder }) => { }${helpOpen ? ' helpOpen' : ''}${hideTopBorder ? ' hideTopBorder' : ''}> -
- - - - Connect data source - - - - -
-
-
- - - -
- - Select model - - - Select the industry data model for your organization - -
-
-
- - - -
- - Review details - - - Preview the selected model and sample schema - -
+ + + + + Connect data source + + + + +
+
+
+ + + +
+ + Select model + + + Select the industry data model for your organization +
-
- - - -
- - Install - - - Acknowledge creation of database and install - -
+
+
+ + + +
+ + Review details + + + Preview the selected model and sample schema +
-
- - work -
Balanced
-
Every week
- - - work -
Balanced
-
Every week
- - - work -
Balanced
-
Every week
- - - work -
Balanced
-
Every week
- +
+ + + +
+ + Install + + + Acknowledge creation of database and install + +
+
+ + work +
Balanced
+
Every week
+ + + work +
Balanced
+
Every week
+ + + work +
Balanced
+
Every week
+ + + work +
Balanced
+
Every week
+ +
diff --git a/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js b/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js index acb1672849..aedabb7b1f 100644 --- a/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js +++ b/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js @@ -24,23 +24,27 @@ const Template = ({ helpOpen, helpResizable, open, escapeKeyAction }) => { 'DOMContentLoaded', () => { const button = document.body.querySelector('#dialog-button'); + const helpCloseButton = document.body.querySelector('.help-close'); + const helpToggleButton = document.body.querySelector('.help-toggle'); + const fullscreenCloseButton = document.body.querySelector( + '.full-screen-dialog-close' + ); button.addEventListener('click', () => { const dialog = document.body.querySelector('#dialog1'); dialog.open = true; }); - const helpCloseButton = document.body.querySelector('.help-close'); + helpCloseButton.addEventListener('click', () => { const dialog = document.body.querySelector('#dialog1'); dialog.helpOpen = false; + helpToggleButton.on = false; + helpToggleButton.toggledOn = false; }); - const helpToggleButton = document.body.querySelector('.help-toggle'); + helpToggleButton.addEventListener('click', () => { const dialog = document.body.querySelector('#dialog1'); dialog.helpOpen = !dialog.helpOpen; }); - const fullscreenCloseButton = document.body.querySelector( - '.full-screen-dialog-close' - ); fullscreenCloseButton.addEventListener('click', () => { const dialog = document.body.querySelector('#dialog1'); dialog.open = false; @@ -58,84 +62,83 @@ const Template = ({ helpOpen, helpResizable, open, escapeKeyAction }) => { }${helpOpen ? ' helpOpen' : ''}> -
- - - - Connect data source - - - - - -
-
-
- - - -
- - Select model - - - Select the industry data model for your organization - -
-
-
- - - -
- - Review details - - - Preview the selected model and sample schema - -
+ + + + + Connect data source + + + + + +
+
+
+ + + +
+ + Select model + + + Select the industry data model for your organization +
-
- - - -
- - Install - - - Acknowledge creation of database and install - -
+
+
+ + + +
+ + Review details + + + Preview the selected model and sample schema +
-
- - work -
Balanced
-
Every week
- - - work -
Balanced
-
Every week
- - - work -
Balanced
-
Every week
- - - work -
Balanced
-
Every week
- +
+ + + +
+ + Install + + + Acknowledge creation of database and install + +
+
+ + work +
Balanced
+
Every week
+ + + work +
Balanced
+
Every week
+ + + work +
Balanced
+
Every week
+ + + work +
Balanced
+
Every week
+ +
From 5a32bcd1c9f0ffa1cfc9f84c17c914667dc368dd Mon Sep 17 00:00:00 2001 From: Sahitya Buddharaju Date: Mon, 4 Nov 2024 11:38:26 -0600 Subject: [PATCH 6/6] fix(full-screen-dialog): remove help close button --- .../src/focused-page/focused-page.stories.js | 12 +----------- .../full-screen-dialog.stories.js | 14 ++------------ 2 files changed, 3 insertions(+), 23 deletions(-) diff --git a/libs/components/src/focused-page/focused-page.stories.js b/libs/components/src/focused-page/focused-page.stories.js index 0757c293fb..d93ba35eb7 100644 --- a/libs/components/src/focused-page/focused-page.stories.js +++ b/libs/components/src/focused-page/focused-page.stories.js @@ -24,14 +24,7 @@ const Template = ({ helpOpen, helpResizable, hideTopBorder }) => { document.addEventListener( 'DOMContentLoaded', () => { - const helpCloseButton = document.body.querySelector('.help-close'); const helpToggleButton = document.body.querySelector('.help-toggle'); - helpCloseButton.addEventListener('click', () => { - const dialog = document.body.querySelector('#focused-page'); - dialog.helpOpen = false; - helpToggleButton.on = false; - helpToggleButton.toggledOn = false; - }); helpToggleButton.addEventListener('click', () => { const dialog = document.body.querySelector('#focused-page'); @@ -50,9 +43,7 @@ const Template = ({ helpOpen, helpResizable, hideTopBorder }) => { - - Connect data source - + Connect data source @@ -129,7 +120,6 @@ const Template = ({ helpOpen, helpResizable, hideTopBorder }) => { Help -
diff --git a/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js b/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js index aedabb7b1f..471c98097d 100644 --- a/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js +++ b/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js @@ -24,7 +24,6 @@ const Template = ({ helpOpen, helpResizable, open, escapeKeyAction }) => { 'DOMContentLoaded', () => { const button = document.body.querySelector('#dialog-button'); - const helpCloseButton = document.body.querySelector('.help-close'); const helpToggleButton = document.body.querySelector('.help-toggle'); const fullscreenCloseButton = document.body.querySelector( '.full-screen-dialog-close' @@ -34,17 +33,11 @@ const Template = ({ helpOpen, helpResizable, open, escapeKeyAction }) => { dialog.open = true; }); - helpCloseButton.addEventListener('click', () => { - const dialog = document.body.querySelector('#dialog1'); - dialog.helpOpen = false; - helpToggleButton.on = false; - helpToggleButton.toggledOn = false; - }); - helpToggleButton.addEventListener('click', () => { const dialog = document.body.querySelector('#dialog1'); dialog.helpOpen = !dialog.helpOpen; }); + fullscreenCloseButton.addEventListener('click', () => { const dialog = document.body.querySelector('#dialog1'); dialog.open = false; @@ -65,9 +58,7 @@ const Template = ({ helpOpen, helpResizable, open, escapeKeyAction }) => { - - Connect data source - + Connect data source @@ -146,7 +137,6 @@ const Template = ({ helpOpen, helpResizable, open, escapeKeyAction }) => { Help -