tmp: v11 PopoverContent

Author: gregorw

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 163 components exported from [email protected].
+> 164 components exported from [email protected].
 
 ## Components
 
@@ -95,6 +95,7 @@
 - [`PaginationSkeleton`](#paginationskeleton)
 - [`PasswordInput`](#passwordinput)
 - [`Popover`](#popover)
+- [`PopoverContent`](#popovercontent)
 - [`ProgressBar`](#progressbar)
 - [`ProgressIndicator`](#progressindicator)
 - [`ProgressIndicatorSkeleton`](#progressindicatorskeleton)
@@ -2806,6 +2807,24 @@ None.
 | :------------ | :--------- | :------------------------------------ |
 | click:outside | dispatched | <code>{ target: HTMLElement; }</code> |
 
+## `PopoverContent`
+
+### Props
+
+| Prop name | Required | Kind             | Reactive | Type | Default value     | Description |
+| :-------- | :------- | :--------------- | :------- | ---- | ----------------- | ----------- |
+| className | No       | <code>let</code> | No       | --   | <code>null</code> | --          |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+None.
+
 ## `ProgressBar`
 
 ### Props

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 163,
+  "total": 164,
   "components": [
     {
       "moduleName": "Accordion",
@@ -8910,6 +8910,27 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },
+    {
+      "moduleName": "PopoverContent",
+      "filePath": "src/Popover/PopoverContent.svelte",
+      "props": [
+        {
+          "name": "className",
+          "kind": "let",
+          "value": "null",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "moduleExports": [],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "span" }
+    },
     {
       "moduleName": "ProgressBar",
       "filePath": "src/ProgressBar/ProgressBar.svelte",

docs/src/pages/components/Popover.svx

@@ -1,5 +1,9 @@
+---
+components: ["Popover", "PopoverContent"]
+---
+
 <script>
-  import { Popover } from "carbon-components-svelte";
+  import { Popover, PopoverContent } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -8,9 +12,9 @@
 By default, the position of the popover component is absolute.
 
 <div data-outline>
-    Parent
     <Popover open>
-        <div style="padding: var(--bx-spacing-05)">Content</div>
+        Parent
+        <PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent>
     </Popover>
 </div>
 

src/Popover/Popover.svelte

@@ -46,7 +46,7 @@
 
 <div
   bind:this="{ref}"
-  class:bx--popover="{true}"
+  class:bx--popover-container="{true}"
   class:bx--popover--caret="{caret}"
   class:bx--popover--light="{light}"
   class:bx--popover--high-contrast="{highContrast}"
@@ -67,7 +67,5 @@
   {...$$restProps}
   style="{$$restProps.style}; {relative && 'position: relative'}"
 >
-  <div class:bx--popover-contents="{true}">
-    <slot />
-  </div>
+  <slot />
 </div>

src/Popover/PopoverContent.svelte

@@ -0,0 +1,10 @@
+<script>
+  export let className = null;
+</script>
+
+<span class:bx--popover="{true}" {...$$restProps}>
+  <span class:bx--popover-content="{true}" class="{className}">
+    <slot />
+  </span>
+  <span class:bx--popover-caret="{true}"></span>
+</span>

src/Popover/index.js

@@ -1 +1,2 @@
 export { default as Popover } from "./Popover.svelte";
+export { default as PopoverContent } from "./PopoverContent.svelte";

src/index.js

@@ -84,7 +84,7 @@ export { OrderedList } from "./OrderedList";
 export { OverflowMenu, OverflowMenuItem } from "./OverflowMenu";
 export { Pagination, PaginationSkeleton } from "./Pagination";
 export { PaginationNav } from "./PaginationNav";
-export { Popover } from "./Popover";
+export { Popover, PopoverContent } from "./Popover";
 export { ProgressBar } from "./ProgressBar";
 export {
   ProgressIndicator,

tests/Popover.test.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Popover } from "../types";
+  import { Popover, PopoverContent } from "../types";
 
   let open = false;
 </script>
@@ -16,5 +16,5 @@
     console.log('on:click:outside');
   }}"
 >
-  <div style="padding: var(--bx-spacing-05)">Content</div>
+  <PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent>
 </Popover>

types/Popover/PopoverContent.svelte.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="svelte" />
+import type { SvelteComponentTyped } from "svelte";
+
+export interface PopoverContentProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["span"]> {
+  /**
+   * @default null
+   */
+  className?: undefined;
+}
+
+export default class PopoverContent extends SvelteComponentTyped<
+  PopoverContentProps,
+  {},
+  { default: {} }
+> {}

types/index.d.ts

@@ -91,6 +91,7 @@ export { default as Pagination } from "./Pagination/Pagination.svelte";
 export { default as PaginationSkeleton } from "./Pagination/PaginationSkeleton.svelte";
 export { default as PaginationNav } from "./PaginationNav/PaginationNav.svelte";
 export { default as Popover } from "./Popover/Popover.svelte";
+export { default as PopoverContent } from "./Popover/PopoverContent.svelte";
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte";
 export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndicator.svelte";
 export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicatorSkeleton.svelte";