diff --git a/packages/design/assets/design-images/popover/popover-preview.png b/packages/design/assets/design-images/popover/popover-preview.png deleted file mode 100644 index 93ab413d58..0000000000 Binary files a/packages/design/assets/design-images/popover/popover-preview.png and /dev/null differ diff --git a/packages/design/assets/design-images/popover/popover-zoning.png b/packages/design/assets/design-images/popover/popover-zoning.png deleted file mode 100644 index b3b97b567e..0000000000 Binary files a/packages/design/assets/design-images/popover/popover-zoning.png and /dev/null differ diff --git a/packages/design/components/popover/design-popover.mdx b/packages/design/components/popover/design-popover.mdx deleted file mode 100644 index 953691c764..0000000000 --- a/packages/design/components/popover/design-popover.mdx +++ /dev/null @@ -1,28 +0,0 @@ -## Preview -![Preview of popover](design-images/popover/popover-preview.png) - -## Description -A Popover will provide additional information to the user in a clear and concise way. -It is commonly used to appear by click so crucial information should not be displayed in the Popover. - -## Zoning - -![Zoning of popover](design-images/popover/popover-zoning.png) - -A Popover has potentially five areas: - -- A container: It contains the main content of the Popover -- A header: a title to introduce the content below -- A Main content: it displays the Popover text. Links can be added too in this section. -- (optional) A footer: Interactive elements such as buttons or links can be added in this section. -- (not available for the moment) A tip: it shows the relationship between the Popover and where it has been triggered from - -## Behavior - -By default, a Popover is hidden to the user. -It triggers when the user clicks on the Popover's trigger element such as an icon, a text or a button. -The Popover can be closed or dismissed by clicking anywhere on the page outside of the Popover's container. - -## Placement - -Popover has automatic positioning feature. It can detect the edge of the browser so the container always stays visible on a page. diff --git a/packages/libraries/cdk/src/components/surface/ocdk-surface.ts b/packages/libraries/cdk/src/components/surface/ocdk-surface.ts index 9ea0d28057..2f4eed4ca7 100644 --- a/packages/libraries/cdk/src/components/surface/ocdk-surface.ts +++ b/packages/libraries/cdk/src/components/surface/ocdk-surface.ts @@ -248,15 +248,6 @@ export class OcdkSurface extends HTMLElement implements OcdkSurfaceBehaviour { this.controller.setOriginCorner(originCorner); } - /** - * Check if a click is outside of the surface - * @param event - event reference - */ - isClickOutsideSurface(event: Event): boolean { - const srcElement = event.composedPath()[0]; - return this.anchorElement?.contains(event.target as Node) || this.anchorElement?.shadowRoot?.contains(srcElement as Node) || false; - } - private getDefaultAdapter() { const adapter: OcdkSurfaceAdapter = { addClass: (className) => this.classList.add(className), diff --git a/packages/libraries/core/jest.config.ts b/packages/libraries/core/jest.config.ts index 30b719b80d..4a70ed3ccc 100644 --- a/packages/libraries/core/jest.config.ts +++ b/packages/libraries/core/jest.config.ts @@ -19,5 +19,4 @@ const args = process.argv.slice(2); * ``` */ const config: Config.InitialOptions = OdsGetJestConfig({ basePath: '/../../..', stencil: false, args }); -console.log(config); export default config; diff --git a/packages/libraries/core/src/components/popover/popover/ods-popover-controller.ts b/packages/libraries/core/src/components/popover/popover/ods-popover-controller.ts index 0db803e96c..ef7fd4aad5 100644 --- a/packages/libraries/core/src/components/popover/popover/ods-popover-controller.ts +++ b/packages/libraries/core/src/components/popover/popover/ods-popover-controller.ts @@ -47,9 +47,7 @@ export class OdsPopoverController extends OdsComponentController { if(event.key === "Escape") { this.logger.log('EscapeKey on trigger'); - if(this.component.surface) { - this.component.surface.opened = false; - } + this.closeSurface(); } } @@ -59,9 +57,7 @@ export class OdsPopoverController extends OdsComponentController { handleSurfaceKey(event: KeyboardEvent): void { if (event.key === "Escape") { this.logger.log('EscapeKey in surface'); - if(this.component.surface) { - this.component.surface.opened = false; - } + this.closeSurface(); } } @@ -73,7 +69,7 @@ export class OdsPopoverController extends OdsComponentController { return; } else { this.logger.log('Click outside component while it is opened'); - this.component.surface.opened = false; + this.closeSurface(); } } @@ -82,7 +78,7 @@ export class OdsPopoverController extends OdsComponentController { */ closeSurface(): void { if (this.component.surface && this.component.surface.opened) { - this.component.surface.opened = false; + this.component.surface.close(); } } diff --git a/packages/tools/storybook/stories/components/popover/popover.design.stories.mdx b/packages/tools/storybook/stories/components/popover/popover.design.stories.mdx deleted file mode 100644 index ce31fe3ec6..0000000000 --- a/packages/tools/storybook/stories/components/popover/popover.design.stories.mdx +++ /dev/null @@ -1,13 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; -import DesignPopover from '@ovhcloud/ods-design/components/popover/design-popover.mdx'; - -import { getToC } from '../../../core/table-of-contents.mdx'; - - - -# Popover ---- - -<>{getToC(['Preview', 'Description', 'Zoning', 'Behaviour', 'Placement'])} - -