Add Box component

Question

Add Box component

Closed this issue 4 years ago · 7 comments

Answer 1 · 2020-02-09T19:10:38.000Z

Based on the docs, I'm confused about what Box actually is and whether it's useful to any Feliz.MaterialUI users. Abandoning this for now. Let me know if you need it, and if so, please explain what Box actually is and how it can/should be used from Feliz.MaterialUI.

Answer 2 · 2021-02-27T12:59:33.000Z

Hello there @cmeeren !

Box is just a helper general component. At work I extensively use it for quick and simple layouts. As the docs say:

The Box component serves as a wrapper component for most of the CSS utility needs.

That in my usecase means that I can easily add specific margins and paddings with a really concise syntax. From the project:

....
            <Box p={5}>
                <Box mb={2}>
                    <Form.Select
                        defaultValue='Estándar'
                    >
                        ...some form values
                    </Form.Select>
                </Box>
                <Box>
                    <Form.TextField
                        name='tracking_number'
                    />
                </Box>
                <Box
                    display='flex'
                    justifyContent='flex-end'
                    alignItems='center'
                    mt={3}
                >
                    <Form.Submit>Enviar</Form.Submit>
                </Box>
            </Box>
....

Basically, you bring all the convenience of the style functions into a single component, which is nice.

An example using theme colors:
https://material-ui.com/system/palette/#background-color

I don't know of other Material UI components that have that, or if it is implemented in this library in another convenient way, today I just started using it (love it btw).

IMO this component is really basic and necessary, helps me avoid using something more complicated like Grid layouts with just Box, etc... and I've been using MaterialUI now for more than a year.

If this style of making quick layouts is already covered in this library, or in Feliz, I'd be really happy to know how :)

Answer 3 · 2021-02-27T14:26:43.000Z

I guess what I'm confused about is what props Box has. All the other components have an API page (like this) that the Feliz.MaterialUI wrappers are generated from, but Box doesn't have that. In order to generate a wrapper, I need to know its API, i.e. which props can it have, what are the expected values, etc.

Answer 4 · 2021-02-28T17:45:54.000Z

You can find the base one here: https://material-ui.com/components/box/#api
This is the base API as they say, and the extended style functions I mentioned are listed here:

https://material-ui.com/system/api/

Looking at the MaterialUI repo you can find the ts types of all the style functions:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui-system/src/index.d.ts

Box prop types:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Box/Box.d.ts

For more detailed examples (expected values of each prop) you can take a look at the full list:
https://material-ui.com/system/basics/#all-inclusive

Answer 5 · 2021-02-28T21:44:48.000Z

Thanks. I'll take a look at implementing this when I have some time and energy to spare. Unfortunately I can't promise it'll be for a while.

Answer 6 · 2021-03-01T16:05:52.000Z

Don't worry :)

I may have 3 days of experience with Fable, but if I can I'll follow the contribution guidelines and see if I can add it by myself.

Answer 7 · 2021-03-01T18:07:50.000Z

Thanks, but the contribution guidelines in the readme are little more than a reminder for myself for how to re-generate the bindings based on updated MUI API docs. The Box component requires a lot of manual work, since it's not documented in the same way as all other components. It's not particularly beginner friendly.