Fix styles in sample app

open-pioneer · Nov 24, 2024 · 3dae510 · 3dae510
1 parent 2dca263
commit 3dae510
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 2 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -4,6 +4,7 @@ packages:
   - src/packages/core
   - src/packages/chakra-integration
   - src/packages/test-utils
+  - src/samples/chakra-sample/**
   # TODO:
   # - src/**
   - "!**/test-data/**"
@@ -30,6 +31,7 @@ catalog:
   react-dom: *react_version
   react-json-view: ^1.21.3
   react-use: ^17.5.1
+  react-icons: ^5.3.0
   react: *react_version
 
   # Devtools

diff --git a/src/packages/chakra-integration/Provider.tsx b/src/packages/chakra-integration/Provider.tsx
@@ -31,7 +31,7 @@ const system = createSystem(
     defaultConfig,
     defineConfig({
         preflight: {
-            scope: ":host"
+            scope: ".pioneer-root"
         },
         cssVarsRoot: ":host",
         conditions: redirectLightCondition(defaultConfig.conditions),

diff --git a/src/packages/runtime/CustomElement.ts b/src/packages/runtime/CustomElement.ts
@@ -386,7 +386,10 @@ class ApplicationInstance {
     private initStyles() {
         // Prevent inheritance of certain css values and normalize to display: block by default.
         // See https://open-wc.org/guides/knowledge/styling/styles-piercing-shadow-dom/
-        const builtinStyles = ":host { all: initial; display: block; }";
+        // NOTE: layer base comes from chakra (used for css resets etc).
+        // TODO: Merge with global styles in chakra integration package
+        // TODO: Perhaps even move the chakra-provider in this package
+        const builtinStyles = "@layer base { :host { all: initial; display: block; } }";
         const builtinStylesNode = document.createElement("style");
         applyStyles(builtinStylesNode, { value: builtinStyles });
 

diff --git a/src/samples/chakra-sample/chakra-app/SampleUI.tsx b/src/samples/chakra-sample/chakra-app/SampleUI.tsx
@@ -3,6 +3,7 @@
 import {
     Button,
     Container,
+    Portal,
     Spinner,
     Stack,
     Text
@@ -22,6 +23,9 @@ export function SampleUI() {
 
             <Text>I am Text</Text>
 
+            {/* TODO: Portal appears at the wrong location (direct child of shadow root instead of .pioneer-root */}
+            <Portal><Button>Hello World</Button></Portal>
+
             <AccordionDemo />
             <Spinner />
         </Container>