Utilizing the SideModal with Flex UI 2.6.1

[sinisternoob]

Background

The customer is looking to add a Paste SideModal to their Flex UI to incorporate a new app integration. I do recognize that it appears because Flex is fairly behind in dependency versions, it Seems the Paste/Core 15.x does not have this component.

Looking into seeing if there might be some way to work around this as it will likely take some time before the dependency is updated.

Feedback

Given the example code provided here https://paste.twilio.design/components/side-modal.

I am looking to see if there might be some way to incorporate this into a Flex plugin. I did attempt to install the component specifically, but still ran into some dependency issues.

Is there maybe a way to use the Modal to accomplish similar behavior?

Stage of design

No response

Research

No response

Relevant links

No response

Are you looking for visual design support?

• Yes

Additional Information

No response

[dosubot[bot]]

Hey there, @mcharguej! 👋 I'm Dosu, your friendly neighborhood bot here to lend a hand with bugs, answer your queries, and guide you on your journey to becoming a stellar contributor while the human maintainers are busy. Don't worry, I've got your back and am here to help in the meantime. I'm diving into your SideModal conundrum right now and will circle back with insights shortly. Hang tight! 🤖🔍

[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:

• Use latest versions of Paste for Flex plugin development (updated: 11/07/2023, similarity score: 87%)
• Release Phase Modal - Answer (updated: 10/20/2023, similarity score: 86%)
• Plans for a replacement of (updated: 05/19/2023, similarity score: 86%)

[dosubot[bot]]

Given the dependency version conflicts you're facing with Paste/Core 15.x not including the SideModal component, a potential workaround could be to use the Modal component from Paste to create a similar functionality. Here's a workaround using the Modal component to mimic the SideModal behavior:

1. Use the Modal Component: Since the SideModal component is not available in your version, you can use the Modal component from Paste to create a dialog that behaves similarly to a SideModal. The key is to customize the Modal's styling to make it appear from the side.

2. Custom Styling: Apply custom CSS to position the Modal to the side of the screen. You might need to override some default styles to achieve the desired side modal effect.

3. Visual Design Support: For integrating and styling the Modal to look and feel like a SideModal, consider using CSS Flexbox or Grid layouts to position the Modal on the side of the screen. Additionally, leverage the Paste Theme Customization features to align the Modal's design with your application's visual design requirements.

Here's an example code snippet demonstrating how to use the Modal component to simulate a SideModal:

import React from 'react';
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from '@twilio-paste/core/modal';
import { Box } from '@twilio-paste/core/box';
import { Paragraph } from '@twilio-paste/core/paragraph';

const SideModalExample = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const handleOpen = () => setIsOpen(true);
  const handleClose = () => setIsOpen(false);

  return (
    <Box display="flex" flexDirection="column">
      <Button variant="primary" onClick={handleOpen}>
        Open Side Modal
      </Button>
      <Modal isOpen={isOpen} onDismiss={handleClose} ariaLabelledby="side_modal_heading" size="default">
        <ModalHeader>Heading</ModalHeader>
        <ModalBody>
          <Paragraph>
            A Modal is a dialog that appears over the main content and moves the system into a special mode requiring user interaction.
          </Paragraph>
          <Paragraph>
            You can compose a Modal content area to support your use case, but elements such as Paragraph and Form Input are commonly used. See examples for common Modal patterns and dos/don'ts.
          </Paragraph>
        </ModalBody>
        <ModalFooter>
          <Button variant="secondary" onClick={handleClose}>Close</Button>
        </ModalFooter>
      </Modal>
    </Box>
  );
};

export default SideModalExample;

This example uses the Modal component and manipulates it to function similarly to a SideModal. You'll need to adjust the CSS and possibly the layout to achieve the exact look and feel you desire. This approach allows you to bypass the dependency conflict and still achieve a side modal functionality within your Flex UI plugin.

Regarding the specific dependency issues you encountered when trying to install the SideModal component directly into the Flex UI, these stem from the peerDependencies listed in the package.json file. These dependencies must be met by the consuming application (in this case, Flex UI) for the SideModal component to work correctly. The key dependencies and potential issues include React and React DOM Versions, Twilio Paste Components and Libraries, Design Tokens and Styling Libraries, TypeScript and Type Definitions, and Animation, Icons, and Utility Libraries. To resolve these issues, ensure that Flex UI includes compatible versions of these dependencies or is capable of integrating them without conflicts. This may involve upgrading or downgrading certain libraries within Flex UI, or potentially making adjustments to the SideModal component or its dependencies to achieve compatibility.

Typically, the main difference between a modal and a side modal (or drawer) is the way they appear and disappear on the screen. A modal usually appears in the center of the screen, overlaying the content, while a side modal slides in from the side (left or right) of the screen. The interaction patterns and use cases for both can also vary based on the design system guidelines.

Sources

• Use latest versions of Paste for Flex plugin development
• packages/paste-website/src/component-examples/SideModalExamples.ts
• packages/paste-core/components/side-modal/package.json

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[TheSisb]

Hi @mcharguej,

The best and safest option is to update Paste core's version. Alternatively...

• you can try to build your own SideModal (see code) using the https://paste.twilio.design/primitives/non-modal-dialog-primitive
• You can try installing the dependency directly, but as you pointed out, you may run into some dependency mismatch issues being so far behind.

I definitely recommend advocating for updating Paste, as ejecting and rolling your own solution is a lot of technical debt and pulls you further away from Paste as time goes on. Future Paste upgrades will be much harder as you will need to update all the new components you spun up as well. It's just not worth it to eject in most cases. Your time is best spent not duplicating work our team does, but instead providing customers with value.