[RFC] Box component

[govindsingh55]

Introduction

it will provide a container with some basic default properties

Props

• width
• height
• color
• bg
• m
• mt
• mb
• mr
• ml
• mx
• my
• p
• pt
• pb
• pr
• pl
• px
• py
• position
• top
• bottom
• left
• right
• va
• ha

Default Props

• position = "relative"

[prasanna1211]

Few points to discuss:

1. Will there be a dot notation ? If so for what properties (I guess Box.relative / Box.absolute)
2. One thing that I noticed at many places we find it difficult to position something that must have been done easily like

<Box.positionContainer>
  <Box vertical="bottom" horizontal="center">
<Box.positionContainer>

or any other better syntax would do. End goal should be something that is easy to make the box positioned.

3. What are the style props that are not inculded from chakra UI
4. 'as' prop in chakra will be included ?

[prasanna1211]

@govindsingh55 Description needs to be little better.

1. Should include what HTML dom element it will render.
2. Mention about overriding as in chakra.
3. When to use Box (May be say when to use and when to use

[navin-moorthy]

@govindsingh55 Since we are following PriceLine design system, do we need all those position, top, bottom? They are not exposed in Priceline

[prasanna1211]

Priceline is only the benchmark. We can take in the best things but not only limited to it. We must also include whatever problems that we generally face in terms of readability and positioning.

[navin-moorthy]

If thats the case, see the Chakra Box Component has some the styled system style props and some custom

[prasanna1211]

We can stick with the props of chakra unless we don't something that is missing. But definitely add if they are missing something. (which can be done later too).

[govindsingh55]

we can stick with chakra box component props. do we need the as prop. And dot notation limit the reposiveness. chakra is doing well with responsiveness

[prasanna1211]

as is a chakra prop.

[prasanna1211]

Using as many other component has used Box itself so that the props are common across everywhere.

[govindsingh55]

as used to change the html dom change. by default box renders <div></div>, if we want to render <article></article> we need to pass as="article".

[prasanna1211]

Yes, we cannot create every other component like h1, h2, h3 ... p, span which is why they have brought in the as prop. You can see the box being used as P tag in their component itself here.

[prasanna1211]

Also you cannot use

anymore since those needs the styling too as the same way as we do with chakra components.

[govindsingh55]

how about this, expose the box component as it is, but create some predefined version of box like FlexBox and expose them from the same file.

So It will be upto the developer that he want to use predefined one or simple Box component.

[prasanna1211]

By as it is do you mean expose all the props by chakra ? I didn't get your intent. May be can you explain it in detail ?

So It will be upto the developer that he want to use predefined one or simple Box component.

Yes we are going to do this, but we need to draw boundaries clearly.

[govindsingh55]

from our component, we will expose Box component which will expose the all prop of chakra Box component, but we also expose the FlexBox component which will have prop like {isVisible, isInline, etc.}

[prasanna1211]

We are doing the same.

My answer to your question

do we need the as prop.

Yes we need. Reason: How will the users use P or SPAN tag

Do we need dot notation

@SamrithaS @navin-moorthy can you answer ?

[SamrithaS]

dot notation is used for accessing properties of objects right?

[prasanna1211]

Something like <Box.relative /> <Box.absolute />

Even if it is not there I believe atleast for positioning (absolute, relative) something is needed. (or) this API is the ideal one I would prefer

<Box.relative px={4} py={2}>
  <Box as="button" va="bottom" ha="right">
</Box>

This would place a button on the bottom right va and ha for aligning left and right.

Any thoughts on this ?

@navin-moorthy @govindsingh55 @SamrithaS

[SamrithaS]

That's great

[govindsingh55]

dot notation should be used for the sub-component {modal, modal.header, modal.content, modal.footer} instead of passing the props.

[navin-moorthy]

We are doing the same.

My answer to your question

do we need the as prop.

Yes we need. Reason: How will the users use P or SPAN tag

Do we need dot notation

@SamrithaS @navin-moorthy can you answer ?

Yeah, that will remove the styling because we want others only to use the dot notation in most cases which will make someone new to use these components easily.

[navin-moorthy]

We are doing the same. My answer to your question

do we need the as prop.

Yes we need. Reason: How will the users use P or SPAN tag

Do we need dot notation

@SamrithaS @navin-moorthy can you answer ?

Yeah, that will remove the styling because we want others only to use the dot notation in most cases which will make someone new to use these components easily.

But for the Box component like Box.relative & Box.absolute is not needed I guess. Like Example incase of Flex with align-items: center and justify-content: center we can use `

Other's thought?

[prasanna1211]

@navin-moorthy How about va and ha as prop ?

[navin-moorthy]

@navin-moorthy How about va and ha as prop ?

va - vertical align, ha - horizontal align?

Exposing as props is a good for a single style is like an alias. We can use dot notation where we achieve a layout with multiple styles IMO

[prasanna1211]

ok then can we add it to props @govindsingh55 @SamrithaS ?

[govindsingh55]

adding va nad ha

[SamrithaS]

ok then can we add it to props @govindsingh55 @SamrithaS ?

sure

[govindsingh55]

what about the dot notation ?

[prasanna1211]

I feel then dot notation is not needed. Props alone is enough to start the component with. Can we change the status of the RFC to active state and start working on the component ?

[prasanna1211]

Assign a label. That should be good enough. For everything other RFC mark needs clarity as a label.

[govindsingh55]

@prasanna1211 as we discussed the va and ha props, any reference for these props

[prasanna1211]

Reference ?

[govindsingh55]

there are many ways to center the div How to center things with style in CSS

[prasanna1211]

I think we should be clear between positioning and aligning. (Sorry if I had a bad example to call it centered). By va I just want to position on bottom, left, right, top based on absolute or relative position. Making it center would use Flex. May be change of prop name to 'vp' and 'hp' may be @navin-moorthy ? Basically with the intended notation it should be simple enough to position in a layout.

[govindsingh55]

@prasanna1211 @navin-moorthy we gonna to have pseudobox as well right like chakra?

[prasanna1211]

Not yet decided. If adding psuedo CSS elements is the only advantage then every box might be a psuedo box.

[govindsingh55]

as of now, I used the chakra Box and exposed all props that can be passed to the chakra Box except as props

[prasanna1211]

Can you raise a PR ? I will be integrating the docs to development completely today. After which we can start one by one. It is easy to start from then.

[prasanna1211]

Closing this as it is merged in #29