v2.1.3

What's Changed

Distribution / Bug Fix Changes

• Fix File Import by @Braden-077 in #276
  • The distribution folder was not including all the source files causing Selective Imports to not work.

New Contributors

• @Braden-077 made their first contribution in #276

Full Changelog: v2.1.2...v2.1.3

v2.1.2

What's Changed

Distribution Changes

• Minify CSS by @Jeremy-Walton in #274
  • The distribution folder contained an optics.min.css file that was not actually a minified file.
  • In order to clean up the distribution, the main optics.css is not a single combined file and optics.min.css is a single combined and minified file.
  • The LICENSE, README.md, and package.json file are now included in the distribution folder.
  • No breaking changes or adjustments needed other than bumping your version number.
• Ensure distribution includes addons by @Jeremy-Walton in #275
• Had to bump from 2.1.1 (really just skipped over as it had to be unpublished) to fix an issue in the distribution folder.

Full Changelog: v2.1.0...v2.1.2

v2.1.0

What's Changed

Breaking Changes

• [OP-200] Move fonts to their own files by @Jeremy-Walton in #271

  • In order to better allow customization and configuration, the CDN font imports have been moved out of the base tokens and icon files and into their own files under src/core/fonts. src/core/fonts/text_fonts.css and src/core/fonts/icon_fonts.css respectively.
  • If you are using selective imports or are not using the main file import, you may need to add an import for the fonts to ensure your app is still loading them correctly.

  /* Third party Vendors */
  @import 'modern-css-reset/dist/reset';
  
  /* Fonts */
  @import 'core/fonts'; /* This is new! */
  
  /* Tokens */
  @import 'core/tokens';
  
  /* Base styles and utilities */
  @import 'core/base';
  @import 'core/layout';
  @import 'core/utilities';
  
  /* Components */
  @import 'components';

• [OP-195] Icon improvements by @Jeremy-Walton in #272

  • The default variable icon font loaded for Material Symbols Outlined has been changed to only include the weight axis. This is to reduce load times for apps that don't need it or are using an alternate font. This can be reset back to previous behavior by including @import '@rolemodel/optics/dist/css/addons/fonts/material_symbols_outlined_variable.css'; just like the new icon packs shown below.
  • The implementation of Icon has been reworked to allow for better customization, overriding, and extensibility. It's API of variables matches other components to allow for this.

  /* Weight */
  --_op-icon-weight-light
  --_op-icon-weight-normal
  --_op-icon-weight-semi-bold
  --_op-icon-weight-bold
  
  /* Fill */
  --_op-icon-fill-outlined
  --_op-icon-fill-filled
  
  /* Emphasis */
  --_op-icon-emphasis-low
  --_op-icon-emphasis-normal
  --_op-icon-emphasis-high
  
  /* Size */
  --_op-icon-font-size-small
  --_op-icon-font-size-medium
  --_op-icon-font-size-large
  --_op-icon-font-size-x-large
  --_op-icon-optical-size-small
  --_op-icon-optical-size-medium
  --_op-icon-optical-size-large
  --_op-icon-optical-size-x-large

  • If you are customizing icons, have a look at the current implementation to see what your refactor should match.
  • Using the Icon classes has slightly changed. Your modifiers work the same, but the base class has been extracted to be .icon The Material Symbols specific behavior lives apart from icon generic behavior. This allows for alternative icon libraries.
  • Old usage <span class='material-symbols-outlined icon--x-large icon--weight-bold'>settings</span>
  • New usage <span class='material-symbols-outlined icon icon--x-large icon--weight-bold'>settings</span>
  • If you are using an icon helper, you will need to update it to include the .icon class. If you are in a Rails context, The icon generator in RoleModel Rails) has been updated to support all the new fonts

Component Changes

• [OP-195] Icon improvements by @Jeremy-Walton in #272

  • The Icon API has been reworked to better match other components. This means it is easier to override and customize aspects of the icon like the sizes or other modifiers and what values they have.
  • Icons now support the .icon--small modifier for using smaller icons

• [OP-28] Custom Icon Support by @Jeremy-Walton in #273

  • Optics now supports four new Icon Libraries!
    • Phosphor
    • Tabler
    • Feather
    • Lucide
  • Simply add an import for the specific library @import '@rolemodel/optics/dist/css/addons/fonts/phosphor_icons';
  • Usage will look like <i class='ph ph-smiley icon--x-large icon--weight-thin'></i> but will vary for each Library
  • See the documentation for specifics implementation details and which icon modifiers are supported in each library.
  • If your app is built on Rails and you are using RoleModel Rails, the Icon Generator now prompts you for which icon library you are using and generates the correct helper methods for you.

Full Changelog: v2.0.1...v2.1.0

v1.13.1

What's Changed

Breaking Changes

• [CCC-47] Tokens by @Jeremy-Walton in #263
  • The majority of files have been converted from scss to css. This shouldn't be a major change or cause issues with how you import Optics. A potential case is if you are selectively importing specific files, you may need to change the extension. This includes Addons, Components, and Tokens.
  • Tokens are no longer organized into mixins that then get included into the :root element. They just live directly in :root. If you were doing any scale overriding and mixing the scale into a sub component, you may need to review that and adjust it or manually copy the tokens into where you need them.
  • The dark mode scale file has been removed. This is because those tokens now live inside the scale color tokens file side by side with their light mode counterparts. We are utilizing the newer light-mode()

Token Changes

• Color Scale Tokens now use the light-dark() function by @Jeremy-Walton in #263
  • See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark
  • This allows for easier theming. Seeing the light and dark values in one place, and being able to set theme mode at any given scope level.
  • One note to be aware of is that if you are using your variables as the fill option on an SVG, you may run into issues with the light-dark() function and the SVG not knowing how to parse it. In this case, you might consider separating out the light and dark versions of the variable and using the values directly.

Full Changelog: v1.12.0...v1.13.0

v2.0.1

What's Changed

Base Token Changes

• [OP-198] Accordion Add Animation by @Jeremy-Walton in #267
  • A new token --op-transition-accordion-content has been added. This can be used to adjust the timing of the new accordion opening and closing animation.

Component Changes

• [OP-198] Accordion Add Animation by @Jeremy-Walton in #267
  • Accordions now animate when opening and closing by default!
  • This can be disabled by using a new component modifier .accordion.accordion--disable-animation
  • Note: This animation does not currently work on Safari or Firefox, however it falls back gracefully to the existing behavior before this change of opening and closing with no animation. Support will be added in the future.

Dependencies

• [OP-199] Documentation Improvements by @Jeremy-Walton in #268
  • Storybook (Documentation site) has been updated to the latest version 8.5.3

Documentation Changes

• Spell modules correctly by @jdmcleod in #269
  • Minor typo fix
• [OP-198] Accordion Add Animation by @Jeremy-Walton in #267
  • Some instructions were added to the Accordion documentation for how to utilize the exclusive open feature of <detail> elements. See more https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#name

New Contributors

• @jdmcleod made their first contribution in #269

Full Changelog: v2.0.0...v2.0.1

v2.0.0

Optics v2.0.0

What's Changed

Breaking Changes

• Optics is no longer using SCSS by @Jeremy-Walton in #266
  • All references to SCSS or SASS have been removed.
  • The import paths for files should change from @rolemodel/optics/dist/scss/optics to @rolemodel/optics/dist/css/optics
  • There is now a @rolemodel/optics/dist/css/optics.min.css which is one file with all of Optics in it, rather than individual files.
  • Any selective imports will need to point to the css dist folder instead of scss

Full Changelog: v1.13.0...v2.0.0

v1.12.0

What's Changed

Breaking Changes

• [OP-193] Refactor Sidebar by @zoopmaster in #264
  • Sidebar has been converted to be pure BEM style. This means that variants like .sidebar-primary is now .sidebar--primary.
  • If your app is using this component, you will need to use the base .sidebar class in addition to the modifier for the particular variant.
  • Additionally, if you are customizing the styles, you will need to replace the placeholder selector %sidebar-global with the base selector .sidebar and any variants you have customized or added will need to become modifiers. You will no longer need to extend the placeholder selector since your new class is now a modifier and meant to be used with the base class.

/* Old */
%sidebar-global {
  color: red;
}

.sidebar-purple {
  background-color: purple;
}

/* Usage: .sidebar-purple */

/* New */
.sidebar {
  color: red;
  
  &.sidebar--purple {
    background-color: purple;
  }
}

/* Usage: .sidebar.sidebar--purple */

• .sidebar--responsive has been removed The main reason is that it is not being used very much and introduces a lot of complexity to the sidebar. Most applications end up hiding the sidebar on mobile and using a drawer pattern or alternative approach. This is best done with some simple JS to change out the sidebar style (.sidebar--drawer, .sidebar--compact, .sidebar--rail). See https://docs.optics.rolemodel.design/?path=/docs/navigation-components-sidebar--docs for details on a javascript solution to add a responsive sidebar back.

Component Changes

• Refactor Sidebar to not use placeholder selectors by @zoopmaster in #264

Documentation Changes

• Add details to sidebar documentation by @Jeremy-Walton in #265

Full Changelog: v1.11.0...v1.12.0

v1.11.0

What's Changed

Breaking Changes

• OP-179 Refactor Form by @dominicmacaulay in #262
  • Form has been converted to be pure BEM style. .form-control did not have variants since it mainly changed look based on input type. You may want to review usage, but because of this, you shouldn't need to change much.
  • If you are customizing the styles, you will need to replace the following placeholder selectors
    • %form-control-global with. .form-control
    • %form-control-input-global with .form-control:not([type='radio'], [type='checkbox'])
    • %form-control-inline-global with .form-control:is([type='radio'], [type='checkbox'])
    • %dropdown-arrow with [.form](select.form-control:not([multiple], [type='radio'], [type='checkbox']))
    • You will no longer need to extend the placeholder selector since these styles are based on the input type.

/* Old */
%form-control-global {
  color: red;
}

.form-control-purple {
  background-color: purple;
}

/* Usage: input.form-control-purple */

/* New */
.form-control {
  color: red;
  
  &.form-control--purple {
    background-color: purple;
  }
}

/* Usage: input.form-control.form-control--purple */

Component Changes

• Refactor Form component to no longer use placeholder selectors by @dominicmacaulay in #262

Full Changelog: v1.10.0...v1.11.0

v1.10.0

What's Changed

Breaking Changes

• [OP-172] Refactor button and button-group by @zoopmaster in #261
  • Note: These comments apply to both Button and Button Group, but we use Button as the example.
  • Button has been converted to be pure BEM style. This means that variants like .btn-primary is now .btn--primary.
  • If your app is using this component, you will need to use the base .btn class in addition to the modifier for the particular variant.
  • Additionally, if you are customizing the styles, you will need to replace the placeholder selector %btn-global with the base selector .btn and any variants you have customized or added will need to become modifiers. You will no longer need to extend the placeholder selector since your new class is now a modifier and meant to be used with the base class.

/* Old */
%btn-global {
  color: red;
}

.btn-purple {
  background-color: purple;
}

/* Usage: .btn-purple */

/* New */
.btn {
  color: red;
  
  &.btn--purple {
    background-color: purple;
  }
}

/* Usage: .btn.btn--purple */

Components Changes

• Refactor button and button-group to not use placeholder selectors by @zoopmaster in #261

Full Changelog: v1.9.0...v1.10.0

v1.9.0

What's Changed

Breaking Changes

• OP-189 Refactor Table by @dominicmacaulay in #258
  • Table has been converted to be pure BEM style. This means that .table-primary is now .table--primary.
  • If your app is using this component, you will need to use the base .table class in addition to the modifier for the particular variant.
  • Additionally, if you are customizing the styles, you will need to replace the placeholder selector %table-global with the base selector .table` and any variants you have customized or added will need to become modifiers. You will no longer need to extend the placeholder selector since your new class is now a modifier and meant to be used with the base class.

/* Old */
%table-global {
  color: red;
}

.table-purple {
  background-color: purple;
}

/* Usage: .table-purple */

/* New */
.table {
  color: red;
  
  &.table--purple {
    background-color: purple;
  }
}

/* Usage: .table.table--purple */

Component Changes

• Refactor Table to not use a placeholder selector by @dominicmacaulay in #258

Full Changelog: v1.8.0...v1.9.0