[v2] Define Popover as internal component, remove public API (#5545)

public-ui · Nov 9, 2023 · 83ed809 · 83ed809
2 parents 5305eb7 + 6fba67b
commit 83ed809
Show file tree

Hide file tree

Showing 11 changed files with 23 additions and 75 deletions.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -2024,7 +2024,7 @@ export namespace Components {
          */
         "_tooltipAlign"?: TooltipAlignPropType;
     }
-    interface KolPopover {
+    interface KolPopoverWc {
         /**
           * Defines the alignment of the tooltip, popover or tabs in relation to the element.
          */
@@ -2754,11 +2754,11 @@ declare global {
         prototype: HTMLKolPaginationElement;
         new (): HTMLKolPaginationElement;
     };
-    interface HTMLKolPopoverElement extends Components.KolPopover, HTMLStencilElement {
+    interface HTMLKolPopoverWcElement extends Components.KolPopoverWc, HTMLStencilElement {
     }
-    var HTMLKolPopoverElement: {
-        prototype: HTMLKolPopoverElement;
-        new (): HTMLKolPopoverElement;
+    var HTMLKolPopoverWcElement: {
+        prototype: HTMLKolPopoverWcElement;
+        new (): HTMLKolPopoverWcElement;
     };
     interface HTMLKolProgressElement extends Components.KolProgress, HTMLStencilElement {
     }
@@ -2893,7 +2893,7 @@ declare global {
         "kol-modal": HTMLKolModalElement;
         "kol-nav": HTMLKolNavElement;
         "kol-pagination": HTMLKolPaginationElement;
-        "kol-popover": HTMLKolPopoverElement;
+        "kol-popover-wc": HTMLKolPopoverWcElement;
         "kol-progress": HTMLKolProgressElement;
         "kol-quote": HTMLKolQuoteElement;
         "kol-select": HTMLKolSelectElement;
@@ -4818,7 +4818,7 @@ declare namespace LocalJSX {
          */
         "_tooltipAlign"?: TooltipAlignPropType;
     }
-    interface KolPopover {
+    interface KolPopoverWc {
         /**
           * Defines the alignment of the tooltip, popover or tabs in relation to the element.
          */
@@ -5332,7 +5332,7 @@ declare namespace LocalJSX {
         "kol-modal": KolModal;
         "kol-nav": KolNav;
         "kol-pagination": KolPagination;
-        "kol-popover": KolPopover;
+        "kol-popover-wc": KolPopoverWc;
         "kol-progress": KolProgress;
         "kol-quote": KolQuote;
         "kol-select": KolSelect;
@@ -5399,7 +5399,7 @@ declare module "@stencil/core" {
             "kol-modal": LocalJSX.KolModal & JSXBase.HTMLAttributes<HTMLKolModalElement>;
             "kol-nav": LocalJSX.KolNav & JSXBase.HTMLAttributes<HTMLKolNavElement>;
             "kol-pagination": LocalJSX.KolPagination & JSXBase.HTMLAttributes<HTMLKolPaginationElement>;
-            "kol-popover": LocalJSX.KolPopover & JSXBase.HTMLAttributes<HTMLKolPopoverElement>;
+            "kol-popover-wc": LocalJSX.KolPopoverWc & JSXBase.HTMLAttributes<HTMLKolPopoverWcElement>;
             "kol-progress": LocalJSX.KolProgress & JSXBase.HTMLAttributes<HTMLKolProgressElement>;
             "kol-quote": LocalJSX.KolQuote & JSXBase.HTMLAttributes<HTMLKolQuoteElement>;
             "kol-select": LocalJSX.KolSelect & JSXBase.HTMLAttributes<HTMLKolSelectElement>;

diff --git a/packages/components/src/components/popover/component.tsx b/packages/components/src/components/popover/component.tsx
@@ -10,7 +10,7 @@ import { alignFloatingElements } from '../../utils/align-floating-elements';
  * @slot - Der Inhalt des Popover.
  */
 @Component({
-	tag: 'kol-popover',
+	tag: 'kol-popover-wc',
 	styleUrl: './style.css',
 	shadow: false,
 })

diff --git a/packages/components/src/components/popover/test/html.mock.ts b/packages/components/src/components/popover/test/html.mock.ts
@@ -17,10 +17,10 @@ export const getPopoverHtml = (
 		props
 	);
 	return `
-  <kol-popover>
+  <kol-popover-wc>
 		<div class="popover hidden">
 			<div class="arrow ${state._align}"></div>
 			${slots.default !== undefined ? slots.default : ''}
 		</div>
-  </kol-popover>`;
+  </kol-popover-wc>`;
 };
diff --git a/packages/components/src/components/popover/test/snapshot.spec.tsx b/packages/components/src/components/popover/test/snapshot.spec.tsx
@@ -12,7 +12,7 @@ executeTests<Props>(
 	async (props): Promise<SpecPage> => {
 		const page = await newSpecPage({
 			components: COMPONENTS,
-			template: () => <kol-popover {...props} />,
+			template: () => <kol-popover-wc {...props} />,
 		});
 		return page;
 	},

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -81,10 +81,10 @@
 									_variant="normal"
 									:_on="{ onClick: ()=> showLogin = !showLogin }"
 								></kol-button>
-								<kol-popover :_show="showLogin">
+								<kol-popover-wc :_show="showLogin">
 									<kol-input-text>Benutzername</kol-input-text>
 									<kol-input-password>Passwort</kol-input-password>
-								</kol-popover>
+								</kol-popover-wc>
 								<kol-button _label="ghost" _variant="ghost" onclick="createAndShowToast()"></kol-button>
 								<kol-button _label="custom" _variant="custom" onclick="createAndShowToast()"></kol-button>
 								<kol-split-button _label="kick me">
@@ -1534,18 +1534,18 @@
 						</div>
 						<div class="gap-2 col-12 d-grid justify-content-center">
 							<kol-button id="popover-button-top" _label="Oben" _icons="codicon codicon-arrow-up" _variant="primary"></kol-button>
-							<kol-popover id="popover-top">Ich bin oberhalb</kol-popover>
+							<kol-popover-wc id="popover-top">Ich bin oberhalb</kol-popover-wc>
 							<kol-button id="popover-button-right" _label="Rechts" _icons="codicon codicon-arrow-right" _variant="danger"></kol-button>
-							<kol-popover id="popover-right" _align="right">Ich bin rechts</kol-popover>
+							<kol-popover-wc id="popover-right" _align="right">Ich bin rechts</kol-popover-wc>
 							<kol-button id="popover-button-bottom" _label="Unten" _icons="codicon codicon-arrow-down" _variant="secondary"></kol-button>
-							<kol-popover id="popover-bottom" _align="bottom">Ich bin unterhalb</kol-popover>
+							<kol-popover-wc id="popover-bottom" _align="bottom">Ich bin unterhalb</kol-popover-wc>
 							<kol-button id="popover-button-left" _label="Links" _icons="codicon codicon-arrow-left" _variant="normal"></kol-button>
-							<kol-popover id="popover-left" _align="left">Ich bin links</kol-popover>
+							<kol-popover-wc id="popover-left" _align="left">Ich bin links</kol-popover-wc>
 							<kol-button id="popover-button-login" _label="PR starten" _icons="codicon codicon-git-pull-request" _variant="normal"></kol-button>
-							<kol-popover id="popover-login">
+							<kol-popover-wc id="popover-login">
 								<kol-input-text>Benutzername</kol-input-text>
 								<kol-input-password>Passwort</kol-input-password>
-							</kol-popover>
+							</kol-popover-wc>
 						</div>
 					</div>
 				</div>

diff --git a/packages/components/stencil.config.ts b/packages/components/stencil.config.ts
@@ -43,7 +43,6 @@ const TAGS = [
 	'kol-modal',
 	'kol-nav',
 	'kol-pagination',
-	'kol-popover',
 	'kol-progress',
 	'kol-quote',
 	'kol-select',
@@ -60,8 +59,8 @@ const TAGS = [
 ];
 const EXCLUDE_TAGS = [
 	'kol-alert-wc',
-	'kol-avatar-wc',
 	'kol-all',
+	'kol-avatar-wc',
 	'kol-button-group-wc',
 	'kol-button-link-text-switch',
 	'kol-button-wc',
@@ -70,6 +69,7 @@ const EXCLUDE_TAGS = [
 	'kol-heading-wc',
 	'kol-input',
 	'kol-link-wc',
+	'kol-popover-wc',
 	'kol-span-wc',
 	'kol-tooltip-wc',
 ];

diff --git a/packages/samples/react/src/components/popover/basic.tsx b/packages/samples/react/src/components/popover/basic.tsx
diff --git a/packages/samples/react/src/components/popover/routes.ts b/packages/samples/react/src/components/popover/routes.ts
diff --git a/packages/samples/react/src/shares/routes.ts b/packages/samples/react/src/shares/routes.ts
@@ -33,7 +33,6 @@ import { LOGO_ROUTES } from '../components/logo/routes';
 import { MODAL_ROUTES } from '../components/modal/routes';
 import { NAV_ROUTES } from '../components/nav/routes';
 import { PAGINATION_ROUTES } from '../components/pagination/routes';
-import { POPOVER_ROUTES } from '../components/popover/routes';
 import { PROGRESS_ROUTES } from '../components/progress/routes';
 import { QUOTE_ROUTES } from '../components/quote/routes';
 import { SELECT_ROUTES } from '../components/select/routes';
@@ -84,7 +83,6 @@ export const ROUTES: Routes = {
 	...MODAL_ROUTES,
 	...NAV_ROUTES,
 	...PAGINATION_ROUTES,
-	...POPOVER_ROUTES,
 	...PROGRESS_ROUTES,
 	...QUOTE_ROUTES,
 	...SELECT_ROUTES,

diff --git a/packages/schema/src/tag-names.ts b/packages/schema/src/tag-names.ts
@@ -32,7 +32,6 @@ export enum TagEnum {
 	'modal',
 	'nav',
 	'pagination',
-	'popover',
 	'progress',
 	'select',
 	'separator', // TODO: github pr link

diff --git a/packages/tools/visual-tests/tests/sample-app.routes.js b/packages/tools/visual-tests/tests/sample-app.routes.js
@@ -268,11 +268,6 @@ ROUTES.set('pagination/basic', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('popover/basic', {
-	axe: {
-		skipFailures: false,
-	},
-});
 ROUTES.set('progress/basic', {
 	axe: {
 		skipFailures: false,