v0.1.0-beta

What's Changed

Repo Updates

• Issues Templates #73 by @Jeremy-Walton
  • It is now easier to report a bug or request a new feature! Issue templates prefill the form to help you describe what you are after.
  • Take a look here: New Issue

New Components

• Tables #75 and #91 by @Jeremy-Walton and @zoopmaster
  • Tables have been overhauled. They support multiple variations, data densities, striping, and more.
  • They also support fixed headers and footers, along with a fixed height and different combinations of those.
• Sidebar #83 and #97 by @Jeremy-Walton
  • Sidebar has been completely rewritten from the ground up. It now supports section titles, dividers, active and hover states, drawer and rail states, and responsive support to transition between the drawer and the rail on the medium breakpoint.
• Layout by @Jeremy-Walton
  • There are now Layout classes to provide support for sidebars along with sticky headers and footers in your application.

Refining Changes

• Dark Mode Alert Scales #88 by @Jeremy-Walton
  • The alert scales now support dark mode. This means that tables and flash messages will properly switch to the correct dark version of the colors.
• Form Group and Error Messages #90 by @Jeremy-Walton
  • The .form__group class now uses grid to lay out the contents within it. e.g. .form__input, .form__hint, etc.. Errors, hints, and inputs have been refines to display more consistently. This also removes the need for using margins and other spacing techniques inside the form group. by @Jeremy-Walton
• Customization API #93 by @Jeremy-Walton
  • All the components were written in a way that allowed them to be overridden easily and flatly. After implementing this, we realized it was leading to more confusion as to how to use it. All the component implementations have been simplified to just use standard CSS and SASS patterns with a few minor exceptions that are clearly documented.
• Better Documentation by @Jeremy-Walton
  • Recipes is a new section that gives examples of how to structure the layout of your application with or without a sidebar.
  • There is now a Recipe showing examples of customized sidebars to provide a starting point if your application needs to redefine the look of its sidebar.

Bug Fixes

• Tom Select Single #86 by @Jeremy-Walton
  • The Tom Select addon only overrides the multi-select variant properly. The single select variant now matches styles correctly!
• Button Fixes #87 and #95 by @Jeremy-Walton
  • This fixes buttons so that at mobile breakpoints, they will size up to reflect best practices on minimum button sizes on mobile.
  • Buttons inside of a flex container were not respecting width settings. They now respect it and do not squish in the container.

Breaking Changes

• Tables
  • There shouldn't be any issues with this as the base classes didn't change, but the implementation did change so you may want to review.
• Sidebar
  • If your app was using the existing sidebar styles, it will need to be completely rewritten to match the newly expected structure.
• Alert Scales
  • The alert scale semantic variables will now change in dark mode following a similar pattern to the primary and neutral scales. If your app uses them outside of the flash component, you may want to review them and verify things still work as intended.
• Form Group and Error Messages
  • If your app uses simple form helpers to construct your form groups, you will need to ensure it places validation errors underneath the input instead of inline with the label. This was changed to prevent overlap and wrapping issues found in larger error messages.
    The output should generally look like the following:

  <div class="form__group form__input--error">
    <label class="form__label" for="random">A Label</label>
    <input type="text" placeholder="text" id="random" class="form__input">
    <span class="form__error">Can't be blank</span>
    <div class="form__hint">A Hint</div>
  </div>
  

• Customization API
  • If your app is customizing a base component, you will need to refactor the override implementation to change things correctly.
  • Buttons are the major component that will require refactoring work if you are overriding them. If you are just using the existing styles, you should be fine as the HTML interface is still the same .btn, .btn-primary, etc.

New Contributors

• @zoopmaster made their first contribution in #91

Full Changelog: v0.0.10-beta...v0.1.0-beta