feat(side-panel): add elevation changes

twilio-labs · Jan 29, 2025 · 9014fdc · 9014fdc
1 parent 2fba6b9
commit 9014fdc
Show file tree

Hide file tree

Showing 6 changed files with 3 additions and 17 deletions.
diff --git a/packages/paste-core/components/side-panel/src/SidePanel.tsx b/packages/paste-core/components/side-panel/src/SidePanel.tsx
@@ -96,11 +96,9 @@ const SidePanel = React.forwardRef<HTMLDivElement, SidePanelProps>(
                     maxHeight="100%"
                     flexDirection="column"
                     width={["100%", "size40", "size40"]}
-                    borderStyle="solid"
                     borderRadius={["borderRadius0", "borderRadius70", "borderRadius70"]}
-                    borderWidth="borderWidth10"
-                    borderColor="colorBorderWeaker"
-                    backgroundColor="colorBackgroundBody"
+                    boxShadow="shadowElevation05"
+                    backgroundColor="colorBackgroundWeaker"
                     marginTop="space40"
                     marginBottom={["space0", "space40", "space40"]}
                     paddingBottom="space70"

diff --git a/packages/paste-core/components/side-panel/src/SidePanelFooter.tsx b/packages/paste-core/components/side-panel/src/SidePanelFooter.tsx
@@ -11,7 +11,7 @@ const SidePanelFooter = React.forwardRef<HTMLDivElement, SidePanelFooterProps>(
         paddingX={variant === "chat" ? "space50" : "space70"}
         paddingBottom="space50"
         paddingTop={variant === "chat" ? "space0" : "space50"}
-        boxShadow={variant === "chat" ? "none" : "shadow"}
+        boxShadow={variant === "chat" ? "none" : "shadowElevationTop05"}
         marginBottom="spaceNegative70"
         zIndex="zIndex20"
         display="flex"

diff --git a/packages/paste-core/components/side-panel/stories/components/MessagingInsightsContent.tsx b/packages/paste-core/components/side-panel/stories/components/MessagingInsightsContent.tsx
@@ -14,7 +14,6 @@ import { PlusIcon } from "@twilio-paste/icons/esm/PlusIcon";
 import { Label } from "@twilio-paste/label";
 import { Paragraph } from "@twilio-paste/paragraph";
 import { Option, Select } from "@twilio-paste/select";
-import { Separator } from "@twilio-paste/separator";
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@twilio-paste/tabs";
 import { Text } from "@twilio-paste/text";
 import { useUID } from "@twilio-paste/uid-library";
@@ -74,9 +73,6 @@ export const MessagingInsightsContent: React.FC<React.PropsWithChildren<{ mainCo
                   helpText="Times shown in UTC"
                 />
               </Box>
-              <Box gridArea="separator">
-                <Separator orientation="horizontal" />
-              </Box>
               <Box gridArea="field">
                 <Label htmlFor={fieldId}>Field</Label>
                 <Select id={fieldId}>

diff --git a/packages/paste-core/components/side-panel/stories/components/SidePanelWithAIContent.tsx b/packages/paste-core/components/side-panel/stories/components/SidePanelWithAIContent.tsx
@@ -10,7 +10,6 @@ import { ArtificialIntelligenceIcon } from "@twilio-paste/icons/esm/ArtificialIn
 import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon";
 import { MoreIcon } from "@twilio-paste/icons/esm/MoreIcon";
 import { SendIcon } from "@twilio-paste/icons/esm/SendIcon";
-import { Separator } from "@twilio-paste/separator";
 import * as React from "react";
 
 import { SidePanel, SidePanelBody, SidePanelFooter, SidePanelHeader, SidePanelHeaderActions } from "../../src";
@@ -29,7 +28,6 @@ export const SidePanelWithAIContent: React.FC<React.PropsWithChildren> = () => {
           </Button>
         </SidePanelHeaderActions>
       </SidePanelHeader>
-      <Separator orientation="horizontal" verticalSpacing="space0" />
       <SidePanelBody>
         <Box width="100%">
           <AIChatLog>

diff --git a/packages/paste-core/components/side-panel/stories/components/SidePanelWithFilterContent.tsx b/packages/paste-core/components/side-panel/stories/components/SidePanelWithFilterContent.tsx
@@ -6,7 +6,6 @@ import { Button } from "@twilio-paste/button";
 import { Disclosure, DisclosureContent, DisclosureHeading } from "@twilio-paste/disclosure";
 import { Heading } from "@twilio-paste/heading";
 import { Radio, RadioGroup } from "@twilio-paste/radio-group";
-import { Separator } from "@twilio-paste/separator";
 import * as React from "react";
 
 import { SidePanel, SidePanelBody, SidePanelFooter, SidePanelHeader } from "../../src";
@@ -19,7 +18,6 @@ export const SidePanelWithFilterContent: React.FC<React.PropsWithChildren> = ()
           More filters
         </Heading>
       </SidePanelHeader>
-      <Separator orientation="horizontal" verticalSpacing="space0" />
       <SidePanelBody>
         <Box width="100%" display="flex" paddingTop="space70" flexDirection="column" rowGap="space40">
           <Disclosure variant="contained" visible>

diff --git a/packages/paste-website/src/pages/components/side-panel/index.mdx b/packages/paste-website/src/pages/components/side-panel/index.mdx
@@ -61,9 +61,7 @@ export const SidePanelExample = (): React.ReactNode => {
             </Button>
           </SidePanelHeaderActions>
         </SidePanelHeader>
-        <Separator orientation="horizontal" verticalSpacing="space0" />
         <SidePanelBody>
-          <Separator orientation="horizontal" verticalSpacing="space0" />
           Side Panel content goes here.
         </SidePanelBody>
         <SidePanelFooter>
@@ -134,9 +132,7 @@ export const SidePanelExample = (): React.ReactNode => {
             </Button>
           </SidePanelHeaderActions>
         </SidePanelHeader>
-        <Separator orientation="horizontal" verticalSpacing="space0" />
         <SidePanelBody>
-          <Separator orientation="horizontal" verticalSpacing="space0" />
           Side Panel content goes here.
         </SidePanelBody>
         <SidePanelFooter>