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.

Sign up for GitHub

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

Jump to bottom

Adds semantic colors and base styles for form elements #43

Merged
merged 1 commit into from
Oct 5, 2021
Merged

Adds semantic colors and base styles for form elements #43

merged 1 commit into from
Oct 5, 2021

Conversation

stephiescastle
Copy link
Member

@stephiescastle stephiescastle commented Oct 5, 2021 •
edited
Loading

Checklist

  • Include a description of your pull request and instructions for the reviewer to verify your work.
  • Link to the issue if this PR is issue-specific.
  • Create/update the corresponding story if this includes a UI component.
  • Create/update documentation. If not included, tell us why.
  • List the environments / browsers in which you tested your changes.
  • Tests, linting, or other required checks are passing.
  • PR has an informative and human-readable title
    • PR titles are used to generate the change log in releases; good ones make that easier to scan.
    • PRs will be broadly categorized in the change log, but for even easier scanning, consider prefixing with a component name or other useful categorization, e.g., "BaseButton: fix layout bug", or "Storybook: Update dependencies".
  • PR has been tagged with a SemVer label and a general category label, or skip-changelog.
    • These tags are used to do the aforementioned broad categorization in the change log and determine what the next release's version number should be.
    • Release Drafter will attempt to do the category labeling for you! Please double-check its work.

Description

Fixes #42:

  • Updates @tailwindcss/forms to v0.3.4
  • Adds all semantic colors to branding guidelines
  • Adds /src/scss/_forms.scss as base styles for form elements.
  • Adds a few Forms stories to illustrate the updated styles
  • Updates explorer-1.min.css

Breaking changes

  • Input fields will now default to having a gray-light-mid border. For input fields that should not have a border, add class border-0 to them.
  • Projects importing SCSS partials a la carte will need to import the new _forms.scss partial as one of the first imports in the main SCSS file.
  • Projects that have defined their own semantic colors should remove those color definitions from their TailwindCSS config and use those provided by Explorer-1 instead.

Instructions to test

  1. npm run storybook
  2. Check the stories under Components/Forms to see these styles in action.
  3. Check the Colors story to see all semantic colors added.

Tested in the following environments/browsers:

Operating System

  • macOS
  • iOS
  • iPadOS
  • Windows

Browser

  • Chrome
  • Firefox ESR
  • Firefox
  • Safari
  • Edge

@stephiescastle
version bump for @tailwindcss/forms, adds base styles for forms, adds…
8fa5359 
… semantic colors to design system, adds stories for basic form elements, updates explorer-1.min.css
@github-actions github-actions bot added feature storybook This issue relates to Storybook.js labels Oct 5, 2021
@stephiescastle stephiescastle added the minor Contains new features or enhancements label Oct 5, 2021
@stephiescastle stephiescastle changed the title Adds base styles for form elements Adds semantic colors and base styles for form elements Oct 5, 2021
Scotchester
Scotchester approved these changes Oct 5, 2021
View reviewed changes
Copy link
Member

@Scotchester Scotchester left a comment

Choose a reason for hiding this comment

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

Checks out!

I'm going to remove the storybook label so that it doesn't appear in the Docs section of the release notes. I think I need to turn off the autolabeling of storybook when files with that in the path are edited. We really only want a PR in that section of the change log if it's primary purpose is a significant addition or update to Storybook.

@Scotchester Scotchester removed the storybook This issue relates to Storybook.js label Oct 5, 2021
@stephiescastle stephiescastle merged commit ef2f998 into main Oct 5, 2021
@stephiescastle stephiescastle deleted the feature/tailwind-forms-base-styles branch October 5, 2021 22:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Scotchester Scotchester Scotchester approved these changes

Assignees
No one assigned
Labels
minor Contains new features or enhancements
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add base styles for form elements
2 participants
@stephiescastle @Scotchester