fixes panel header styles when no theme is applied (#371)

TykTechnologies · Jun 26, 2024 · bf1d8e0 · bf1d8e0
1 parent 8bea0e3
commit bf1d8e0
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/src/components/Panel/Panel.css b/src/components/Panel/Panel.css
@@ -33,7 +33,13 @@
     border: var(--general-border-width) solid var(--color-default-light);
     box-shadow: none;
   }
+}
 
+.tyk-panel--blank,
+.tyk-panel--primary,
+.tyk-panel--success,
+.tyk-panel--danger,
+.tyk-panel--warning {
   .tyk-panel__header {
     border: none;
     font-size: var(--lg-font-size);

diff --git a/src/components/Panel/Readme.md b/src/components/Panel/Readme.md
@@ -4,6 +4,26 @@
 ```js
 import Button from '../Button';
 <>
+<Panel>
+  <Panel.Header>Panel example (no theme)</Panel.Header>
+  <Panel.Body>
+    <label>label</label>
+    Panel body content
+  </Panel.Body>
+</Panel>
+<Panel collapsable theme="success" collapsibleIconPosition="left">
+  {
+    ({toggleCollapse}) => (
+      <>
+        <Panel.Header>Panel example</Panel.Header>
+        <Panel.Body>
+          <Button onClick={toggleCollapse} theme="primary">Collapse</Button>
+          Panel body content 222
+        </Panel.Body>
+      </>
+    )
+  }
+</Panel>
 <Panel theme="primary">
   <Panel.Header>Panel example</Panel.Header>
   <Panel.Body>