-
|
I'm working on integrating Paste components into Builder.io, and one of the first things I need is the In Builder.io, when you register a component and inject it with their UI, the component gets wrapped with a
Because of how the columns are calculated, this behaviour results in the I don't have control over the I guess I'm curious if this approach is something that's considered tech debt (because this would be a problem any time someone had an intermediary component above the |
Beta Was this translation helpful? Give feedback.
Replies: 6 comments 2 replies
-
|
🤖 Hey there @cjcodes! 🎉 I'm Dosu, your friendly neighborhood bot, designed to help you solve bugs, answer your questions, and guide you on becoming a contributor. I'm here to bridge the gap while you wait for a human maintainer to join in. I've just caught up with your issue regarding the |
Beta Was this translation helpful? Give feedback.
-
|
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:
|
Beta Was this translation helpful? Give feedback.
-
|
🤖 Based on your description, it seems like the issue arises from the In the Paste codebase, the If the This is not considered tech debt, nor is it working as intended. It seems to be an issue with how the In the meantime, a potential workaround could be to create a wrapper component around the const GridWrapper = ({ children, ...props }) => (
<Grid {...props}>
{React.Children.map(children, child => (
React.cloneElement(child, props)
))}
</Grid>
);This Please note that this is just a workaround and may not work in all cases. It would be best to get a solution from the maintainers of Builder.io if possible. I hope this helps! If you have any other questions or need further clarification, please don't hesitate to ask. Sources
|
Beta Was this translation helpful? Give feedback.
-
|
Oh I just had an idea -- I can set up a |
Beta Was this translation helpful? Give feedback.
-
|
This ended up working, but I would propose that we adjust the implementation here to use a similar context + context provider rather than assuming that the first-level child will be a |
Beta Was this translation helpful? Give feedback.
-
|
this was driving me nuts today as I tried tackling these in my flex project. thanks for the question and suggestion. |
Beta Was this translation helpful? Give feedback.
-
|
Hey, Yeah, this one component falls into the "deep regret" category, in that it seemed like a good idea at the time, but it's really not serving its purpose right now. We've long planned on creating a CSS Grid version of the grid that would be more flexible, and more powerful, but a shrinking team and other priorities has made it difficult to reach above the line. All that to say, we acknowledge the limitations of Grid, we know it needs a revamp. |
Beta Was this translation helpful? Give feedback.
-
|
To resolve the issue of Here is a possible solution:
Here is an example of how you might modify your code to ensure the import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
import type { Space } from "@twilio-paste/style-props";
import * as React from "react";
import type { ColumnProps, ColumnStyleProps } from "./types";
import { getColumnOffset, getColumnPadding, getColumnSpan, getStackedColumns } from "./utils";
export const getColumnStyles = ({
count,
span,
gutter,
offset,
vertical,
stretchColumnContent,
}: ColumnProps): ColumnStyleProps => {
const columnStyles: ColumnStyleProps = {
width: getColumnSpan({ count, span }),
...getColumnPadding({ gutter, vertical }),
};
if (offset) {
columnStyles.marginLeft = getColumnOffset(offset) as Space;
}
if (vertical && !offset) {
columnStyles.minWidth = getStackedColumns(vertical);
columnStyles.marginLeft = "space0";
}
if (stretchColumnContent) {
columnStyles.alignContent = "stretch";
columnStyles.display = "flex";
}
return columnStyles;
};
const Column = React.forwardRef<HTMLDivElement, ColumnProps>(
(
{ as, children, count, element = "COLUMN", gutter, offset, span, stretchColumnContent, vertical, ...props },
ref,
) => {
const ColumnStyles = React.useMemo(
() => getColumnStyles({ count, gutter, offset, span, stretchColumnContent, vertical }),
[count, gutter, offset, span, stretchColumnContent, vertical],
);
return (
<Box {...safelySpreadBoxProps(props)} {...ColumnStyles} as={as} element={element} ref={ref}>
{children}
</Box>
);
},
);
Column.displayName = "Column";
export { Column };
// Example usage with BuilderBlock
const BuilderBlockWrapper = ({ count, children, ...props }) => {
return React.Children.map(children, child =>
React.cloneElement(child, { count, ...props })
);
};
// Usage
<BuilderBlockWrapper count={12}>
<Column span={4}>Column 1</Column>
<Column span={4}>Column 2</Column>
<Column span={4}>Column 3</Column>
</BuilderBlockWrapper>In this example, the Additionally, the |
Beta Was this translation helpful? Give feedback.
Hey,
Yeah, this one component falls into the "deep regret" category, in that it seemed like a good idea at the time, but it's really not serving its purpose right now.
We've long planned on creating a CSS Grid version of the grid that would be more flexible, and more powerful, but a shrinking team and other priorities has made it difficult to reach above the line.
All that to say, we acknowledge the limitations of Grid, we know it needs a revamp.