rough layout of the new form #6960
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
![codescene-delta-analysis[bot]](https://avatars.githubusercontent.com/in/53921?s=60&v=4){kind=small}
Tymek
reviewed
Apr 29, 2024
Comment on lines
14
to
24
| const StyledContainer = styled('form')(({ theme }) => ({ | ||
| background: theme.palette.background.default, | ||
|
|
||
| '> * + *': { | ||
| borderBlockStart: `1px solid ${theme.palette.divider}`, | ||
| }, | ||
|
|
||
| '> *': { | ||
| padding: theme.spacing(7), | ||
| }, | ||
| })); |
There was a problem hiding this comment.
In JSX I prefer local styles over ones defined by ancestor. If I expect that in React "UI is the function of state" it's harder to debug when same component can have a different look depending on where it's placed. When there are styled applied to each item it's easier to have 2 components:
<StyledContainer>
<StyledSection>...</StyledSection>
<StyledSection>...</StyledSection>
</StyledContainer>
In current case, we can use styled section or fieldgroup
There was a problem hiding this comment.
I've fixed these now. I stuck with divs for the form sections because:
- According to MDN, 'Sections should always have a heading, with very few exceptions.' These don't have headings and it doesn't really make sense for them to have them. The grouping is mostly visual.
- There is (or was?) a longstanding bug in Chrome, where
fieldsetelements couldn't usedisplay: flex. Don't know if this has been fixed yet. But also, I'm not sure they're all fieldsets. The template probably wouldn't be part of the same set as the name and description, for instance, and I don't think (though I may be wrong) that form action buttons are usually in a fieldset.
So without a better choice (though I'd love to hear suggestions if you have any!) I went with the generic block-level element: the div.
Tymek
approved these changes
Apr 29, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds a very rough first implementation of the look of the new project form. It is not final and does not work yet.
The important part here is that the layout is roughly right (we'll adjust spacing etc later) and that we've got all the basic elements present.
I'll hook it up to actually work in an upcoming PR.
Note: I know the use of css nesting can be contentious. Please consider this code to be more of a proof of concept. Stubbing things out in CSS is faster than creating styled components everywhere. Happy to refactor it later, but I think the important part now is to get it in.
The missing icon, text alignment, etc, will also be solved later.