Skip to content
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

Customize styling of the porting embed #5

Merged
merged 4 commits into from Mar 1, 2024
Merged

Conversation

timomeh
Copy link
Member

@timomeh timomeh commented Mar 1, 2024

  • Adds the ability to pass in custom class names based on a class name function
    • This supports all kinds of custom stylings: CSS Modules, css-in-js, Tailwind, plain css
  • Still ships with some unique class names (GigsEmbeds-XYZ) so we can ship a default CSS file
  • Adds an option to use a custom formId, which is used together with the submit button
  • Adds an stepChange event which is fired when the wizard step changes
{
  formId: 'myCustomFormId',
  className: {
    form: ({ name, touched, dirty, valid, submitting }) => 'custom-class-name',

    // the actual input
    input: ({ name, touched, dirty, valid }) => 'custom-class-name',

    // the input label
    label: ({ name, touched, dirty, valid }) => 'custom-class-name',

    // the field error
    error: ({ name, touched, dirty }) => 'custom-class-name',

    // the field container (div around input, label, error)
    field: ({ name, touched, dirty, valid }) => 'custom-class-name',
  }
}

@timomeh timomeh marked this pull request as ready for review March 1, 2024 14:29
@timomeh timomeh merged commit 9407d13 into main Mar 1, 2024
3 checks passed
@timomeh timomeh deleted the porting-embed-customization branch March 1, 2024 16:50
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.

None yet

1 participant