Paragraph option in Side Modal Header

[ceyerkes]

Hi! Wondering if it's possible/recommended to add paragraph text to the Side Modal Header. Spacing seems a little off if added in the body:

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Customizable Modals (updated: 08/08/2022, similarity score: 85%)
• Updated side modal, broke padding in all slot modal components - Answer (updated: 07/30/2024, similarity score: 85%)
• Extra wide side modal - Answer (updated: 04/17/2023, similarity score: 85%)

[dosubot[bot]]

To add paragraph text to the Side Modal Header while maintaining design consistency, you can use the children prop of the SideModalHeader component. This allows you to include additional text elements, such as paragraphs, directly within the header. You can also use the CustomizationProvider from the Paste design system to ensure that your customizations align with the overall theme and design standards. Here's an example:

import { SideModalHeader, SideModalHeading } from './SideModalHeader';
import { CustomizationProvider } from '@twilio-paste/customization';
import { useTheme } from '@twilio-paste/theme';

const CustomSideModalHeader = () => {
  const currentTheme = useTheme();

  return (
    <CustomizationProvider
      theme={currentTheme}
      elements={{
        SIDE_MODAL_HEADER: {
          padding: "space80",
          borderBottomWidth: "borderWidth30",
        },
        SIDE_MODAL_HEADING: {
          fontSize: "fontSize60",
          lineHeight: "lineHeight60",
        },
      }}
    >
      <SideModalHeader>
        <SideModalHeading>Main Title</SideModalHeading>
        <p>Additional paragraph text providing more context or information.</p>
      </SideModalHeader>
    </CustomizationProvider>
  );
};

This approach ensures that the additional text is styled consistently with the rest of the design system ^[1][2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[nkrantz]

Hey @ceyerkes! Yeah, that spacing is definitely off. We have a ticket in the backlog to make some visual improvements to Side Modal, so we'll be sure to take a look at the spacing between the heading and the body. For now you should be able to reduce the top padding of the body in Figma, and if your engineers need to build before we get around to that ticket, they should be able to solve it by wrapping the body content in a Box with some negative top margin spacing.

<SideModal aria-label="Basic Side Modal">
  <SideModalHeader>
    <SideModalHeading>...</SideModalHeading>
  </SideModalHeader>
  <SideModalBody>
    <Box marginTop="spaceNegative100">
      <Paragraph>...</Paragraph>
    </Box>
  </SideModalBody>
</SideModal>

[ceyerkes]

sounds good, thanks!