V0.2.4

What's Changed

Refining Changes

• Prevent form-error from shifting form-group [fix #138] by @OutlawAndy in #139
  • Form groups in a form were shifting when errors displayed due to grid usage.
  • Checkboxes and Radios were not laying out correctly inside of form groups

New Contributors

• @OutlawAndy made their first contribution in #139

Full Changelog: v0.2.3...v0.2.4

v0.2.3

What's Changed

A couple of Minor bug fixes and a project rename!

Repo Updates

• Rename project and update documentation #128 by @Jeremy-Walton

Refining Changes

• Form Group Refactor #135 by @Jeremy-Walton
  • Form controls should not set a grid-column when they are not in a form-group
• Deployment Strategy #134 by @Jeremy-Walton
  • In order to support projects who pull private RoleModel packages from GitHub Packages, we need to publish to both locations so organization scopes still work.
• Select Bug #127 by @Jeremy-Walton
  • The Select dropdown had an issue where the arrow would overlap contents strangely. This has been resolved and cleaned up.
  • When using a multiple select, the dropdown arrow is hidden and the input gets a larger minimum height.

Breaking Changes

Since the project repository and package have a new name, the project will need to be added to your package.json as @rolemodel/optics.
Additionally, all imports from the package will need to be updated.
E.G.
@import '@rolemodel/rolemodel-design-system'; changes to @import '@rolemodel/optics';
@import '@rolemodel/rolemodel-design-system/dist/scss/rolemodel-design-system'; changes to @import '@rolemodel/optics/dist/scss/optics';
@import '@rolemodel/rolemodel-design-system/dist/scss/addons/...'; changes to @import '@rolemodel/optics/dist/scss/addons/...';

The existing package @rolemodel/rolemodel-design-system will still work so you won't need to update immediately. However, all versions after v0.1.3-beta will be published as @rolemodel/optics.

Another minor note is that we are now more closely following Semantic Versioning, though we will not update the major number on breaking changes until we have reached a v1.0.0 at which point we will follow it normally. All breaking changes will be documented in release notes.

Full Changelog: v0.1.3-beta...v0.2.3

v0.1.3-beta

What's Changed

Repo Updates

• Version in Docs #123 by @Jeremy-Walton
  • The documentation now includes the current version of the design system on the welcome page.
• Documentation dependency updates by @dependabot
  • Bump json5 from 1.0.1 to 1.0.2 #122

Refining Changes

• Colors and Scales #117 by @Jeremy-Walton
  • There were example colors (blue, green, yellow, etc) that existed but were not needed. They have been removed.
  • The alert colors are no longer based on those example colors. Instead they each (danger, warning, notice, info) have their own HSL values that can be set in your theme.
  • As we have used the color scales and needed to customize them, it was clear we needed more luminosity options. Instead of limiting ourselves to a set luminosity scale, we have removed those scales and set the semantic scales directly to luminosity values. This allows for much more flexibility in overriding as well as simplifying the number of tokens in the system. It also removes the potential for someone using one of those variables directly (which wasn't really the intention of it). You can still use an HSL value directly as needed but should name it so it can be handled in themes and theme modes. e.g. --rm-my-custom-component-color: hsl(var(--rm-color-primary-h), hsl(--rm-color-primary-s), 42%);
• Forms Revisited #118 by @Jeremy-Walton
  • All of the form classes have been refactored to simplify their usage and implementation.
  • All input elements should get the .form-control class and they will each be styled correctly based on their type.
  • .form__group is now .form-group since it is not an element according to BEM practices.
  • .form__error is now .form-error since it is not an element according to BEM practices.
  • .form__label is now .form-label since it is not an element according to BEM practices.
  • .form__input--error is now .form-group--error since it is intended to be used at the group level.
  • .form__hint is now .form-hint since it is not an element according to BEM practices.
  • .form__error-summary is now .form-error-summary since it is not an element according to BEM practices.
  • Form elements now have a focus style!
• Tom Select Revisited #120 by @Jeremy-Walton
  • The Tom Select Add on has been rewritten to only override and apply our scale colors in the appropriate places. It should look and feel more integrated out of the box.
• Buttons Revisited #119 by @Jeremy-Walton
  • Buttons now have a focus state!
  • The .btn--no-border modifier was setting the font weight to bold which was too bold as a default. This has been removed as it didn't make sense as the correct behavior.

Breaking Changes

• Colors and Scales #117 by @Jeremy-Walton
  • With the removal of the luminosity scales, it is going to require any customization of your scales (primary, neutral, warning, danger, info, notice) to be refactored. Additionally, any usage of those luminosity values will need to be changed.
• Forms Revisited #118 by @Jeremy-Walton
  • All of the form classes have been refactored to simplify their usage and implementation. As a result, their classes are changed.
  • .form__input no longer exists.
  • All input elements should get the .form-control class and they will each be styled correctly based on their type.
  • .form__group is now .form-group
  • .form__error is now .form-error
  • .form__label is now .form-label
  • .form__input--error is now .form-group--error
  • .form__hint is now .form-hint
  • .form__error-summary is now .form-error-summary
  • If you have customized form controls, this change will require a refactor of those customizations.
• Tom Select Revisited #120 by @Jeremy-Walton
  • If you are customizing Tom Select in any way, you may need to refactor that to avoid conflict with this simplifying change.
  • It may actually reduce your need to override since it should be styling things better out of the box.
• Buttons Revisited #119 by @Jeremy-Walton
  • If you wanted the bold text on a button with no border, you will need to use the following css to add that behavior back.

    %btn-global {
      &.btn--no-border {
        font-weight: var(--rm-font-weight-bold);
      }
    }

Full Changelog: v0.1.2-beta...v0.1.3-beta

v0.1.2-beta

What's Changed

Repo Updates

• Code Linting #116 by @Jeremy-Walton
  • There is now CSS and JS (docs) code linting to ensure code quality in the project.
  • There are also CI tests to verify linting was checked.
• PR Template #121 by @Jeremy-Walton
  • With the addition of linting, additional sanity checks have been added to the PR Template to help ensure they are run and work.
• Documentation dependency updates by @dependabot
  • Bump loader-utils from 1.4.0 to 1.4.2 #106
  • Bump decode-uri-component from 0.2.0 to 0.2.2 #110

New Components

• Alert #121 by @Jeremy-Walton
  • Alert components that can act as highlights or banners have been added.
  • They support three styles: filled, muted, outlined.
  • They support four colors: Warning, Danger, Info, Notice
  • The can be customized to have titles, icons, and close if you want to build dismissible functionality, and any combination of using or not using those!
• Button Group #104 by @Jeremy-Walton
  • Button groups allow you to create connected buttons in a row.
  • It also introduces a button group toolbar that acts as a collection of button groups with wrapping built in. E.G. Rich text editor toolbar

Refining Changes

• Standardize Utilities #105 by @Jeremy-Walton
  • The line we have generally drawn is that utilities should be for layout and position, not for look and feel. Therefore, the font size and weight, and shadow utilities are deprecated. This moves us more in line with that goal.
• Checkbox and Radio Simplification #107 by @Jeremy-Walton
  • The implementation of these controls has been simplified and cleaned up.
  • They no longer animate when selected, but their look is much more consistent and implementation is way simpler.
  • With a simplified implementation, the indeterminate state for checkboxes is now supported and documented!

Bug Fixes

• Color Scales #121 by @Jeremy-Walton
  • Some alert scales were missing luminosity stops

Breaking Changes

• Standardize Utilities #105 by @Jeremy-Walton
  • If you are using the font size, font weight, or shadow utilities, they no longer exist. The underlying tokens still exist are should be used, but the utility classes are removed
• Checkbox and Radio Simplification #107 by @Jeremy-Walton
  • This is less of a breaking change but if your app was customizing these controls, you may need to review and/or refactor.

Full Changelog: v0.1.1-beta...v0.1.2-beta

v0.1.1-beta

What's Changed

Refining Changes

• The default theme now uses RoleModel blue as the primary color.
• Semantic Stops #102 by @Jeremy-Walton
  • Semantic tokens now use words instead of numbers so --rm-color-primary-plus-3 would read --rm-color-primary-plus-three
  • We now have plus-eight down through minus-eight
• Semantic utilities like .background-primary-plus-3 are now deprecated as a part of trying to move away from the look and feel utilities.

Breaking Changes

• The Semantic utilities are no longer available. .background-primary-plus-3 etc. If you used them in places such as cards, consider making that style the default card style or making a custom card class. The tokens they used are still very much available and encouraged to be used.
• Semantic stops have more fidelity which means plus 3 doesn't mean what it used to mean. Here is a mapping reference if you want to maintain what you may have been using.
  Anything using plus-3 should now use plus-seven
  Anything using plus-2 should now use plus-four
  Anything using plus-1 should now use plus-three
  Anything using minus-3 should now use minus-seven
  Anything using minus-2 should now use minus-five
  Anything using minus-1 should now use minus-three
  Anything using on-plus-3 should now use on-plus-seven
  Anything using on-plus-2 should now use on-plus-four
  Anything using on-plus-1 should now use on-plus-three
  Anything using on-minus-3 should now use on-minus-seven
  Anything using on-minus-2 should now use on-minus-five
  Anything using on-minus-1 should now use on-minus-three

If your application is adjusting the default scales, you will need to compare the new values to what you used to determine the best mapping for your needs.

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

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

v0.0.10-beta

What's Changed

• API Update and fixes by @Jeremy-Walton in #80
  • Major changes to the button, badge, and card implementation

Breaking Changes

• From a usage perspective, no classes changed
• From a customizing or overriding perspective, how you achieve that is vastly different

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

v0.0.9-beta

What's Changed

• [GHI #77] Remove Placeholder Selectors by @Jeremy-Walton in #78

Full Changelog: v0.0.8-beta...v0.0.9-beta

v0.0.8-beta

What's Changed

• [GHI #36] Improved Importing and documentation by @Jeremy-Walton in #55
  • Remove tom select, modal, and panel from being imported by default.
  • Add documentation for "Addons" explaining ^ and how to use them.
  • Add index files for tokens and components to allow for importing the whole folder instead of all files.
• [GHI #23] Theme Switching by @Jeremy-Walton in #56
  • Documentation now allows you to change light and dark mode.
  • Data Attributes for controlling which theme and what mode your app is using have been added.
  • Add documentation for how to theme, customize dark and light mode, and use the above-mentioned data attributes.
  • Deprecate data-allow-dark-mode-preference='false' in favor of data-theme-mode='light'.
• [GHI #58] Add MIT License by @Jeremy-Walton in #64
• [GHI #59] Badges by @Jeremy-Walton in #63
  • New component has been added!
  • Documentation is included.
• [GHI #62] Center modal class by @Jeremy-Walton in #67
  • The modal addon assumed utility classes were applied in the HTML instead of just defining the style.
• [GHI #61] Button Icon with Size by @Jeremy-Walton in #66
  • Buttons using the icon and size modifiers now scale correctly
• [GHI #60] Use real token and fix default icon vertical alignment by @Jeremy-Walton in #65
  • Added documentation for existing icon styles.
  • Fix potential alignment issues by standardizing line height and vertical alignment of icons.
• [GHI #22] Flash Documentation by @Jeremy-Walton in #68
  • Added documentation for existing flash alert styles.
  • Simplified HTML structure.

Breaking Changes

• Tom Select is no longer imported automatically. See Addon Documentation for how to import it if your app needs it.
• Panel and Modal are no longer imported automatically. See Addon Documentation for how to import them if your app needs them.
• Deprecated data-allow-dark-mode-preference='false'. You can achieve the same effect by setting data-theme-mode='light'.
• Flash message HTML structure has been simplified. See new documentation on what is expected.

Documentation

https://rolemodel.github.io/rolemodel-design-system

Full Changelog: v0.0.7-beta...v0.0.8-beta

v0.0.7-beta

What's Changed

• Generate token json by @NathanSadler in #53 / #54
  • Generate the json token file automatically rather than having to manually keep it up to date.
  • This file can be ingested or read by your code for whatever purposes you may have.
• Storybook by @Jeremy-Walton in #47
  • New Documentation that can be found on https://rolemodel.github.io/rolemodel-design-system !
  • All the existing documentation has been migrated to Storybook.
  • This allows for interaction with component docs and even embedding of examples elsewhere.

New Contributors

• @NathanSadler made their first contribution in #53 and #54

Full Changelog: v0.0.6-beta...v0.0.7-beta