Skip to content

Extract a CheckboxInput component from onboarding flow #16545

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 6 commits into from
Feb 27, 2023

Conversation

selfcontained
Copy link
Contributor

@selfcontained selfcontained commented Feb 24, 2023

Description

Extracts the checkbox input used in the onboarding flow to a CheckboxInput component and also creates a CheckboxInputField that wraps a list of checkboxes in the same styling as other input type components do. This should allow us to use it as a field w/ a list of checkboxes, like the onboarding flow, or as a standalone checkbox like we do in other places.

image

<CheckboxInputField label="My Label">
  <CheckboxInput value="1" label="First Option" checked={true} onChange={handler} />
  <CheckboxInput value="2" label="Second Option" checked={true} onChange={handler} />
  <CheckboxInput value="3" label="Third Option" checked={true} onChange={handler} />
</CheckboxInputField>

Other places in our UI use a <CheckBox/> component that I've referred to for some of the styles here, but plan on replacing those with this <CheckboxInput/> component for consistency. There's a few things to figure out w/ some of our font sizing, weights, and colors for form-related components, so I'll leave that as a separate task.

Related Issue(s)

Relates to #16511

How to test

Release Notes

NONE

Documentation

Build Options:

  • /werft with-github-actions
    Experimental feature to run the build with GitHub Actions (and not in Werft).
  • leeway-no-cache
    leeway-target=components:all
  • /werft no-test
    Run Leeway with --dont-test
Publish Options
  • /werft publish-to-npm
  • /werft publish-to-jb-marketplace
Installer Options
  • with-ee-license
  • with-slow-database
  • with-dedicated-emulation
  • with-ws-manager-mk2
  • workspace-feature-flags
    Add desired feature flags to the end of the line above, space separated

Preview Environment Options:

  • /werft with-local-preview
    If enabled this will build install/preview
  • /werft with-preview
  • /werft with-large-vm
  • /werft with-gce-vm
    If enabled this will create the environment on GCE infra
  • /werft with-integration-tests=all
    Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh

@werft-gitpod-dev-com
Copy link

started the job as gitpod-build-bmh-checkbox-input-component.1 because the annotations in the pull request description changed
(with .werft/ from main)

@selfcontained
Copy link
Contributor Author

selfcontained commented Feb 24, 2023

/werft run with-preview=true

👍 started the job as gitpod-build-bmh-checkbox-input-component.3
(with .werft/ from main)

@selfcontained selfcontained changed the title Bmh/checkbox-input-component Extract CheckboxInput from onboarding Feb 24, 2023
@@ -21,7 +22,7 @@ export const InputField: FunctionComponent<Props> = memo(({ label, id, hint, err
{label && (
<label
className={classNames(
"text-sm font-semibold dark:text-gray-400",
"text-md font-bold dark:text-gray-400",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Slightly increasing size of input labels, and making them bold.

@selfcontained selfcontained marked this pull request as ready for review February 24, 2023 21:28
@selfcontained selfcontained requested a review from a team February 24, 2023 21:28
@github-actions github-actions bot added the team: webapp Issue belongs to the WebApp team label Feb 24, 2023
@selfcontained selfcontained force-pushed the bmh/checkbox-input-component branch from 437352f to 31dabfc Compare February 24, 2023 21:29
@selfcontained selfcontained changed the title Extract CheckboxInput from onboarding Extract a CheckboxInput component from onboarding flow Feb 24, 2023
Copy link
Member

@easyCZ easyCZ left a comment

Choose a reason for hiding this comment

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

LGTM

/hold in case you want feedback from design

@selfcontained
Copy link
Contributor Author

/unhold

@roboquat roboquat merged commit 0fa0927 into main Feb 27, 2023
@roboquat roboquat deleted the bmh/checkbox-input-component branch February 27, 2023 15:57
@roboquat roboquat added the deployed: webapp Meta team change is running in production label Mar 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
deployed: webapp Meta team change is running in production deployed Change is completely running in production release-note-none size/L team: webapp Issue belongs to the WebApp team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants