[PLAY-1435] Fix Dark Mode Styles: Collapsible Kit

powerhome · Jul 17, 2024 · 9dad00a · 9dad00a
1 parent 93377d2
commit 9dad00a
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx b/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx
@@ -10,7 +10,7 @@ const CollapsibleCustomMain = () => {
         collapsed={isCollapsed}
     >
           <Background 
-              backgroundColor="white" 
+              backgroundColor="clear" 
               cursor="pointer"
               htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
               position="sticky" 
@@ -23,8 +23,9 @@ const CollapsibleCustomMain = () => {
               >
                 <Title 
                     size={4} 
-                    text="Custom Main Section" 
+                    text="Custom Main Section"
                 />
+                <Collapsible.Icon collapsed={isCollapsed}/>
               </Flex>
           </Background>
       <Collapsible.Content padding="none">

diff --git a/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx b/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx
@@ -10,7 +10,7 @@ const CollapsibleCustomMainWithIcon = () => {
         collapsed={isCollapsed}
     >
           <Background 
-              backgroundColor="white" 
+              backgroundColor="clear" 
               cursor="pointer"
               htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
               position="sticky" 
@@ -23,7 +23,7 @@ const CollapsibleCustomMainWithIcon = () => {
               >
                 <Title 
                     size={4} 
-                    text="Custom Main Section" 
+                    text="Custom Main Section"
                 />
                 <Collapsible.Icon collapsed={isCollapsed}/>
               </Flex>

diff --git a/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx b/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx
@@ -7,6 +7,7 @@ const CollapsibleIcons = (props) => {
   <>
   <Collapsible
       icon={['plus','minus']}
+      iconColor='white'
   >
     <Collapsible.Main {...props}>
       <div>{'Main Section'}</div>

diff --git a/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx b/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx
@@ -17,6 +17,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -35,6 +36,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -53,6 +55,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
         <Collapsible.Main padding="sm"