fix(disclosure): add a background color to disclosure content (#1454)

* fix(disclosure): add a background color to disclosure content * chore: changeset
twilio-labs · May 17, 2021 · 46495f4 · 46495f4
1 parent fd6cef8
commit 46495f4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/.changeset/poor-insects-repeat.md b/.changeset/poor-insects-repeat.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/disclosure': patch
+'@twilio-paste/core': patch
+---
+
+Add a background color to disclosure content for when it is placed on top of a background color that is not the body color
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -93,11 +93,25 @@ export const decorators = [
                   <Story />
                 </Box>
               </Theme.Provider>
+              <Theme.Provider theme="default">
+                <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space20">
+                  <Box margin="space40" padding="space40" backgroundColor="colorBackground">
+                    <Story />
+                  </Box>
+                </Box>
+              </Theme.Provider>
               <Theme.Provider theme="dark">
                 <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space80">
                   <Story />
                 </Box>
               </Theme.Provider>
+              <Theme.Provider theme="dark">
+                <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space20">
+                  <Box margin="space40" padding="space40" backgroundColor="colorBackground">
+                    <Story />
+                  </Box>
+                </Box>
+              </Theme.Provider>
             </Stack>
           </>
         );

diff --git a/packages/paste-core/components/disclosure/src/DisclosureContent.tsx b/packages/paste-core/components/disclosure/src/DisclosureContent.tsx
@@ -27,6 +27,7 @@ const DisclosureContent = React.forwardRef<HTMLDivElement, DisclosureContentProp
         {...disclosure}
         {...safelySpreadBoxProps(props)}
         as={AnimatedDisclosureContent}
+        backgroundColor="colorBackgroundBody"
         padding="space50"
         ref={ref}
         style={{