v1.1.0

What's Changed

Breaking Changes

• --op-z-index-drawer rename by @Jeremy-Walton in #234
  • The name of drawer was inaccurate since the token is meant to be used for the sidebar. This updates it to be clearer.
  • This should be a simple find-and-replace situation to change from --op-z-index-drawer to --op-z-index-sidebar

Base Token Changes

• Update the font import to use newer syntax by @Jeremy-Walton in #235
  • --op-font-family-alt was added to accompany the existing font options as an alternative option.
• --op-z-index-drawer rename by @Jeremy-Walton in #234
  • --op-z-index-drawer was renamed to --op-z-index-sidebar (as noted in the breaking changes section)

Component Changes

• Improve icon font initial page load state by @Jeremy-Walton in #240
  • Added the display=block option to the Material Icons font import to prevent the underlying text from showing while loading.
• Use correct cursor for color input by @Jeremy-Walton in #233
  • The color input did not have the correct cursor when hovering. This updated it to use the pointer cursor

Documentation Changes

• Fix tab link in docs by @Jeremy-Walton in #228
  • Clicking on one of the example tab links caused the documentation site to throw an error
• cleanup documentation on Addons.mdx ScaleOverriding.mdx and Tokens.mdx by @yawnybear in #232
  • Minor grammatical fixes
• Fix href Link on Avatar Component by @dominicmacaulay in #238
  • Clicking on the example avatar caused the documentation site to throw an error
• Optics documentation fixes (GH-239) by @yawnybear in #239
  • Grammatical fixes and rewording to add clarity.
• Variable Font Instructions by @Jeremy-Walton in #247
  • Improving the font family documentation and adding instructions on how to better utilize variable fonts.

Dependencies (Documentation Site)

• Storybook upgrade by @Jeremy-Walton in #230
• Bump ws from 8.17.0 to 8.17.1 by @dependabot in #231
• Bump cross-spawn from 7.0.3 to 7.0.6 by @dependabot in #244
• Bump vite from 5.2.11 to 5.2.14 by @dependabot in #241
• Bump nanoid from 3.3.7 to 3.3.8 by @dependabot in #242
• Bump express from 4.19.2 to 4.21.2 by @dependabot in #245
• Bump micromatch from 4.0.6 to 4.0.8 by @dependabot in #246

New Contributors

• @yawnybear made their first contribution in #232
• @dominicmacaulay made their first contribution in #238

Full Changelog: v1.0.0...v1.1.0

v1.0.0

Optics v1.0.0

Check out https://optics.rolemodel.design to learn how RoleModel teams collaborate using Optics to crafting excellent design solutions.

What's Changed

Breaking Changes

• --op-border-color rename by @Jeremy-Walton in #212
  • The border color token did not match the token naming pattern for other colors. This updates it to be consistent
  • This should be a simple find-and-replace situation to change from --op-border-color to --op-color-border
• Compound Selector with ::file-selector-button bug by @Jeremy-Walton in #221
  • Due to how buttons were implemented, the styling for the input of type file would cause issues when trying to style all buttons.
  • I suspect most projects are not styling this specific element, but if it is, it will need to be updated. Check the Pull Request for details

Base Token Changes

• --op-border-color rename by @Jeremy-Walton in #212
  • The border color token did not match the token naming pattern for other colors. This updates it to be consistent
  • This should be a simple find-and-replace situation to change from --op-border-color to --op-color-border

Component Changes

• Rename btn-delete to btn-destructive by @Jeremy-Walton in #222
  • There may be a case where your application wishes to use a red "danger" button to indicate a destructive action. That may not always be Delete. The delete name was too specific and wasn't consistent with other buttons names.
  • This is a backwards compatible change. The btn-delete class still works so no code change is necessary. If your application customizes the delete button, you may want to update any selectors to include the new destructive name.

Documentation Changes

• Alternate Font Pattern by @Jeremy-Walton in #214
  • Added an example to the docs for how to utilize multiple fonts in your application
• Icon example for button by @Jeremy-Walton in #215
  • Added an example to the docs for using icons within a button
• Component Documentation Structure by @Jeremy-Walton in #216
  • The sidebar on the documentation has been updated to better categorize the different components available. Search can still be used to find thing as well.
• Alpha Color Documentation by @Jeremy-Walton in #218
  • Added a new docs page to explain how to handle alpha colors and use color-mix
• Tooltip on disabled Button by @Jeremy-Walton in #219
  • Due to a limitation with tooltips on disabled buttons, an example of how to work around this issue was added to the docs
• Aligned Header Recipe by @Jeremy-Walton in #220
  • A new recipe example was added to show how to solve a challenge that may come up
• Update Logo by @Jeremy-Walton in #225
  • Update the top left logo with the new Optics logo.
  • Add a info blurb pointing to the RoleModel Software website

Bug Fixes

• Compound Selector with ::file-selector-button bug by @Jeremy-Walton in #221
  • Due to how buttons were implemented, the styling for the input of type file would cause issues when trying to style all buttons.
  • I suspect most projects are not styling this specific element, but if it is, it will need to be updated. Check the Pull Request for details
• Fix Avatar Squish inside a flex container by @Jeremy-Walton in #213
  • The avatar component could get squished if used inside a flex container. This updated it to ensure it would stay the same width and height.

Dependencies

• Dependency updates by @Jeremy-Walton in #217
• Bump ip from 2.0.0 to 2.0.1 by @dependabot in #223
  • Both of these changes are for the Storybook documentation. They don't affect the imported styles.

Full Changelog: v0.5.1...v1.0.0

v0.5.1

What's Changed

Base Token Changes

• Added missing token for tooltip transition animation by @dallasbpeters in #203
  • Tooltips were implemented with a global token in mind, but that was never added.

New Components

• Breadcrumbs by @Jeremy-Walton in #205
  • A new Breadcrumb navigation component for showing application route context.
• Text Pair by @Jeremy-Walton in #209
  • A new component to show related text together such as a title and subtitle, or a label and a value.

Component Changes

• Sensible file input styles by @Jeremy-Walton in #207
  • The .form-control class now supports inputs with a type set to file by providing sensible default styles that match other inputs

Bug Fixes

• Added missing token for tooltip transition animation by @dallasbpeters in #203
  • Tooltips were implemented with a global token in mind, but that was never added.
• Safari Mobile Form Control Bug by @Jeremy-Walton in #202
  • The box shadows on inputs using the .form-control class were not rendering correctly in Safari
• Hide still-visible checkbox on Firefox by @zoopmaster in #204
  • In Firefox, the switch component was still showing the underlying checkbox input.
• Hide checkbox input when disabled by @zoopmaster in #206
  • If the switch was disabled, the checkbox would show up underneath on Safari and Firefox. This has been resolved
• Fix accordion arrow showing in safari by @Jeremy-Walton in #208
  • In Safari, the accordion component was not rendering correctly. The default arrow was still visible and the layout was incorrect.

Full Changelog: v0.5.0...v0.5.1

v0.5.0

What's Changed

Breaking Changes

• Remove warning + no border state for button by @Jeremy-Walton in #200
  • Combining the .btn-warning and .btn--no-border class no longer creates a borderless warning button, it creates a normal warning button as if you were only using .btn-warning. This is to match the delete button behavior
  • If a button is meant to convey warning, the unfocused un-hovered state should convey that and a borderless warning button wasn't doing that.

Base Token Changes

• Breakpoint continuity by @Jeremy-Walton in #181
  • Variable versions of the existing sass variables for breakpoints have been added. This allows for usage in cases of max-width or such where a calc may be desired. @media queries still require using the sass variables.
• Documentation improvements by @Jeremy-Walton in #194
  • --op-color-on-background-alt was added to accompany the existing background color tokens.
• Add tags component by @dallasbpeters in #186
  • input focus tokens for neutral, info, and notice were added to support focus for all color scales.
• Dropdown Encoded Image by @Jeremy-Walton in #199
  • The encoded image token for the arrow on dropdown selects has been updated and a dark mode version was added
• Opacity Tokens by @Jeremy-Walton in #198
  • Opacity tokens have been added to support setting various visibility settings.
• Size Scale by @Jeremy-Walton in #197
  • A new token for size: --op-size-unit has been added for width and height properties to utilize. This ensures sizes are scalable at a global level and are divisible by 4.

New Components

• Switch by @Jeremy-Walton in #183
  • A new Switch (sometimes referred to as a toggle) component for boolean input is now available
• Navbar component by @Jeremy-Walton in #191
  • A Header bar for building your applications navigation is now available along with some example application layouts.
• Add tab component by @Jeremy-Walton in #195
  • A Tab component for creating tabbed navigation controls is now available.
• Side Panel by @Jeremy-Walton in #196
  • A Side Panel component is now available along with some example application layouts.
• Add tags component by @dallasbpeters in #186
  • A Tag component is now available. It is similar to Badge, but has a different semantic intent (that of interaction where badge is for information) and different behavior when buttons are used within it.
• Add spinner component by @dallasbpeters in #188
  • A loading spinner component can now be used. Also includes some example application layouts.

Component Changes

• Select control fix by @Jeremy-Walton in #184
  • The select form control was not respecting background colors set on it. This has been fixed.
• Dropdown Encoded Image by @Jeremy-Walton in #199
  • The arrow for the select form control has been changed

Repository Changes

• Add rule to auto fix on save by @Jeremy-Walton in #187
  • This is a code formatting rule for developing on this project.

Documentation Changes

• Fix various documentation inconsistencies. by @Jeremy-Walton in #182
  • Some components were missing instructions for selective imports
  • The customizing and extending sections of each component now show an important notice.
• Documentation improvements by @Jeremy-Walton in #194
  • The documentation tool along with other packages for documentation have been updated.
  • A Table of Contents was added to navigate the documentation easier.
  • The introduction page was updated to show some project status indicators

New Contributors

• @dallasbpeters made their first contribution in #188

Full Changelog: v0.4.2...v0.5.0

v0.4.2

What's Changed

New Components

• [TR#8] Accordion by @Jeremy-Walton in #178
  An Accordion component built on the details and summary elements is now available!

Base Token Changes

• [TR#8] Accordion by @Jeremy-Walton in #178
  A transition token was added to support the new Accordion Component!

Full Changelog: v0.4.1...v0.4.2

v0.4.1

What's Changed

Breaking Changes

• Addon change by @Jeremy-Walton in #173
  • Only applicable if you are using the Tom Select Addon and your application does not pull in Tom Select CSS already.
  • You will need to do that now since the addon does not do that for you. Following the normal Tom Select instructions or following the Addon instructions should be straightforward.

New Components!

• [TR#93] Tooltips by @Jeremy-Walton in #170
  • A simple tooltip implementation using data attribute has been added. This doesn't solve clipping or edge detection. See the documentation for JS package recommendations if that is needed.
• [TR#9] Avatar by @Jeremy-Walton in #171
  • Simple visual or navigable avatar element
• [TR#120] Divider by @Jeremy-Walton in #172
  • An easy-to-use class for dividing content in your application. An example use-case is between button sections in a sidebar.
• [TR#20] Pagination by @Jeremy-Walton in #175
  • Pagination styles build on the existing button classes for creating consistent navigation controls for paginated data. Also includes instruction for use within a table.

Component Changes

• Alerts fix by @Jeremy-Walton in #177
  • .alert-alert is now an alias of .alert-danger. This allows Rails + Devise to work out of the box with the recommended flash layout.

Documentation Changes

• Fix Documentation Deployment by @Jeremy-Walton in #167
  • The documentation site was not deploying correctly
• [TR#119] Import Instructions by @Jeremy-Walton in #168
  • A graph of which components depend on others has been added to the Selective Imports documentation.
  • Each component now specifies what other components it requires and includes instructions for importing by itself if you are using selective imports.
• Fix Sidebar Recipe Documentation by @Jeremy-Walton in #174
  • The examples for how to customize the sidebar were not working correctly. They are now fixed and using the latest sidebar version.

Full Changelog: v0.4.0...v0.4.1

v0.4.0

What's Changed

Breaking Changes

• [T#17] Tables Revisions by @Jeremy-Walton in #155
  • The color of the header was changed to be a more muted color
  • The density options are changed to use height instead of padding.
  • If your application is customizing this component, I recommend reviewing the PR for any changes.
• [TR#12] Button Revisions by @Jeremy-Walton in #156
  • The default btn state is now what btn-secondary was.
  • btn will now show the primary color on hover or active state.
  • The default button size is now large instead of medium.
  • btn--outline has been removed in favor of using the btn or btn--active styles
  • btn--active was added to create active states.
  • btn--icon-with-label was added to create a stacked button with icon.
  • A Warning button was added.
  • All button styles have been adjusted to reflect current Figma styles.
  • I recommend reviewing the PR for any changes as this changes existing implementation as well as affects customization considerations.
• [TR#22] Flash Alert Revisions by @Jeremy-Walton in #158
  • The Alert component has been changed to be outlined by default with an option for filled instead of the other way round.
  • The Alert component has an added option so it can be used as a flash message alert--flash.
  • The Flash component has been removed in favor of using the Alert Component
  • I recommend reviewing the PR for any changes as this changes existing implementation, removes a component as well as affects customization considerations.
• [TR#107] Sidebar Revisions by @Jeremy-Walton in #160
  • The Subtle Primary option has been removed.
  • Sidebar item styles have been removed in favor of just using the existing button styles in the sidebar.
  • A new compact version of the sidebar has been added as an option between drawer and rail.
  • I recommend reviewing the PR for any changes as this changes existing implementation as well as affects customization considerations.
• [TR#14] Modal Revisions by @Jeremy-Walton in #159
  • The Modal addon has been removed.
  • Modal Component has been added!
  • I recommend reviewing the PR for any changes If you are using the existing addon and need to switch to using the component.
• [TR#21] Form Revisions by @Jeremy-Walton in #164
  • A no Border variation of form controls has been added.
  • Size modifiers for small, medium, and large (with large being default) have been added.
  • The focus states of form controls have been updated to match buttons in a more consistent way.
  • I recommend reviewing the PR for any changes as the placeholder selector interface for customization has changed significantly.

Component Changes

• [TR#11] Update badge to reflect design by @Jeremy-Walton in #152
  • A white box shadow has been added when using the badge on a button for things like a notification indicator.
  • Icons used inside of a badge will have a smaller font size.
• Add confirm dialog with documentation by @Jeremy-Walton in #157
  • A new component for Confirm Dialogs has been created!
  • This can be used with something like https://github.com/RoleModel/turbo-confirm for a rails implementation

Bug Fixes

• Table token bug by @Jeremy-Walton in #163
  • There was a token being used that was incorrect. It was a rare case where using a checkbox in a table header will highlight the header when checked. The text color was using a non-existent token.
• Button Focus Fix by @Jeremy-Walton in #162
  • Focus on Buttons was triggering on both click and keyboard navigation. This fix changes it to only trigger on keyboard or assistive device (I.E. screen reader) navigation.

Documentation Changes

• Storybook upgrade by @Jeremy-Walton in #161
  • Storybook has been updated to the latest version (v7)
  • As part of this update, the documentation interface has been simplified. Items with no relevance to this project have been hidden and the documentation pages live as their own items in the sidebar instead of being hidden in the docs tab
  • All the documentation has been refactored to clean up and simplify writing new or modifying it. It is also organized to reflect the sidebar organization.
• [TR#18] Card Revisions by @Jeremy-Walton in #154
  • The Card documentation has been updated to better reflect real world usage. This mainly removed the color from the example as it was potentially misleading.
• [TR#116] Token Naming Structure Docs by @Jeremy-Walton in #165
  • The token documentation has been updated to define and explain the structure of how we name our tokens along with a few examples.
• [TR#117] Folder Structure Documentation by @Jeremy-Walton in #166
  • A new documentation page has been added to explain how to organize your css and the import order that is recommended.

Full Changelog: v0.3.1...v0.4.0

v0.3.1

What's Changed

Component Changes

• Fix token usage for flash by @Jeremy-Walton in #153
  • Minor bug fix with the flash animation token not being set properly.

Full Changelog: v0.3.0...v0.3.1

v0.3.0

What's Changed

Breaking Changes

• [GHI #109] Button API Fix by @Jeremy-Walton in #130

  • If you are customizing --_rm-font-small, --_rm-font-medium, or --_rm-font-large, you will need to rename them to -_rm-btn-font-small, -_rm-btn-font-medium, -_rm-btn-font-large

• [GHI #131] Rename rm prefix to op by @Jeremy-Walton in #132

  • All token name prefixes have changed from --rm to --op

• [GHI #133] Revise Layout classes by @Jeremy-Walton in #141

  • .app-wrapper is now .app-with-sidebar
  • .app__main is now .app-body
  • .page__header is now .app__header
  • .page__content is now .app__content
  • .page__footer is now .app__footer

• [TR#27] Revised Tokens by @Jeremy-Walton in #150

  • Input Height tokens have been adjusted. You may want to adjust them.
    • --op-input-height-small: 2.8rem; // 28px
    • --op-input-height-medium: 3.6rem; // 36px
    • --op-input-height-large: 4rem; // 40px
    • --op-input-height-x-large: 8.4rem; // 84px
  • Transition tokens have been refactored to include the entire transition instead of just the duration. If you are customizing a component, you may need to refactor.
    • --op-transition-input: all 120ms ease-in;
    • --op-transition-sidebar: all 200ms ease-in-out;
    • --op-transition-modal: all 300ms ease-in;
    • --op-transition-panel: right 400ms ease-in;
  • The navigation transition token was adjusted.
    • --op-transition-navigation is removed
    • --op-transition-sidebar now does what --op-transition-navigation did
  • The flash transition token was renamed to reflect it is an animation
    • --op-transition-flash is now --op-animation-flash and it includes the full animation options instead of just the duration.

• [TR#28] Font Tokens by @Jeremy-Walton in #149

  • Added a new stop for 2rem (20px). This is set to --op-font-x-large which means all steps above this have been bumped up 2x -> 3x etc. Any token large and above will need to be revised.

• [GHI #125] Enhanced Color Support by @Jeremy-Walton in #140

  • --op-border-color token has been changed to point to -op-color-neutral-plus-five (used to be three). If you want to revert it, you will need to override it back.
  • All color scale tokens (light and dark mode) luminosities have been adjusted.

Base Token Changes

• [GHI #131] Rename rm prefix to op by @Jeremy-Walton in #132
  • All token name prefixes have changed from --rm to --op
• [TR#27] Revised Tokens by @Jeremy-Walton in #150
  • Input Height tokens have been adjusted.
  • Transition tokens have been refactored to include the entire transition instead of just the duration
  • The navigation transition token was remove as it was not being used.
  • The flash transition token was renamed to reflect it is an animation
  • Added new Radius stop (12px)
• [TR#28] Font Tokens by @Jeremy-Walton in #149
  • Added a 2x-small font token set to 1rem
  • Added a new stop for 2rem (20px). This is set to --op-font-x-large which means all steps above this have been bumped up 2x -> 3x etc.
• [GHI #125] Enhanced Color Support by @Jeremy-Walton in #140
  • --op-border-color token has been changed to point to -op-color-neutral-plus-five (used to be three)

Theme Token Changes

• [GHI #131] Rename rm prefix to op by @Jeremy-Walton in #132
  • All token name prefixes have changed from --rm to --op
• [GHI #125] Enhanced Color Support by @Jeremy-Walton in #140
  • All the default scale colors have been adjusted and optimized to maintain contrast.
  • on-alt versions for each scale step have been added

Layout Changes

• [GHI #133] Revise Layout classes by @Jeremy-Walton in #141
  • The layout classes have been renamed to be more intention revealing and intuitive

Component Changes

• [GHI #109] Button API Fix by @Jeremy-Walton in #130
  • The internal size variables were not named correctly. This PR added the btn prefix into the variable names.

Addon Changes

• [GHI #125] Enhanced Color Support by @Jeremy-Walton in #140
  • The dark mode overrides for modal and panel were moved to be in their respective addons and therefore not included by default in the dark mode overrides.

Documentation Changes

• [GHI #125] Enhanced Color Support by @Jeremy-Walton in #140
  • Added better Color documentation. color, on-color, and on-color-alt are now grouped together for easier reference.

Full Changelog: v0.2.5...v0.3.0

v0.2.5

What's Changed

Utility Changes

• [GHI #22] Color, Utility, and Token Documentation by @Jeremy-Walton in #148
  • .self-baseline was added to round out the existing .self-... utilities

Repository Changes

• [GHI #142] Release Template by @Jeremy-Walton in #144
  • Release Notes can be auto categorized by label now.

Documentation Changes

• [GHI #101] Font and Line Height by @Jeremy-Walton in #145
  • Added Documentation for font tokens
• Fix the storybook building by @Jeremy-Walton in #146
  • The documentation was not compiling correctly
• [GHI #108] Documentation Updates by @Jeremy-Walton in #147
  • Added a note on SASS Compilers
  • Cleaned up syntax highlighting
• [GHI #22] Color, Utility, and Token Documentation by @Jeremy-Walton in #148
  • Documentation for all colors, tokens, and utilities has been added. View it at https://docs.optics.rolemodel.design/

Full Changelog: v0.2.4...v0.2.5