Skip to content

More form fixes #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Apr 25, 2025
Merged

More form fixes #83

merged 7 commits into from
Apr 25, 2025

Conversation

TomWoodward
Copy link
Member

more fixes for styling forms...

really we should do this in more places, by exporting the a styled component instead of a function component wrapping a styled component you allow that component to be used in selectors like

const MyCoolthing = styled.div`

  ${UI.Button} {
    margin-left: 5rem;   
  }

`

this for some reason doesn't work on the controlled form components that require context, because i guess styled tries to render the components when they're used in the css and that causes the context to throw.

@TomWoodward TomWoodward requested a review from jivey April 22, 2025 15:01
</button>;
})`
${buttonCss}
`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we have the linter set up for this, but missing trailing semicolon

const {
disabled,
isWaiting,
waitingText,
children,
variant = 'primary',
variant,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably just me, but pushing it out makes it a bit longer to tell what the default is and do variant-y stuff inside the component in the future

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we're not able to set the default before its used in the styles, so having a default here seemed confusing (because it would only be defaulted within the component, not in the styles)


&:focus {
outline: solid ${set.outline};
box-shadow: inset 0 0 0 3px ${set.shadow};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This came from the original, but maybe a good time to use rem for consistency?

@TomWoodward TomWoodward merged commit ddb50c1 into main Apr 25, 2025
2 of 3 checks passed
@TomWoodward TomWoodward deleted the more-form-fixes branch April 25, 2025 13:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants