orangeui/orange

New responsive grid features (column and row system with all its options)
Fix breadcrumbs back button arrow not changing color based on breadcrumbs color

Update missing variables for all components for easier customization

Fixes

• Card with a navigation in it's header evoked an issue with padding, which is now gone

Features

• Grid system has been added for building conventional 12-column float style layouts, as well as traditional layouts most commonly known from graphic design. See it in action.
• Image component got introduced, which lets you quickly size and style images of all sizes/formats, create image galleries, tumbnails and more. See it in action.
• Breakpoints mark the beginning of Orange's transition into a fully responsive framework. It won't be until v.1.4.0 that this logic will be applied to all components, so stay tuned!

Fixes

• List vertical paddings has been fixed
• Navigation had a bug which has been squashed. Active items don't overflow anymore!
• Variables are now completely customizable
• Font URL variable has been moved in order to permit importing of your own typefaces

Fixes

• Added missing support for actions inside basic inputs

Features

• Input now lets you attach an action to it. This means components like button, checkbox, toggle and label can be placed on the right edge inside large styled inputs. Please note that when upgrading you will have to wrap your existing instances with the new class. See updated markup.
• Toggle labels can now be set for enabled and disabled states. See it in action.
• Textarea now supports the rows attribute and can be one or more rows high. See it in action.
• Textarea got updated with a nifty auto-expand feature that expands a textarea based on how many rows of content there is.
• Form labels now have rounded backgrounds to prevent text overlapping. This happens in cases when there's enough content inside a textarea to make it scrollable.

Updates

• Form got much simpler as we deprecated both .form__wrapper and .form__input-wrapper wrapper classes. Although this change does not effect any existing implementations we encourage you to tidy up your codebase and remove those unneded divs! See updated markup.
• Form elements state class has changed from is-full to has-value, and a new has-focus state has been added.
• Form element form__description is now described as a paragraph p tag.
• List is now written in a simplified markup. We deprecated .list__item class and replaced it with li. See updated markup.
• Breadcrumbs were refactored. We removed breadcrumbs__menu class from the markup, as well as deprecated breadcrumbs__link-arrow-head and breadcrumbs__link-arrow-tail elements. See updated markup.
• JavaScript logic was inspected for stability and patched where needed.

Fixes

• Form buttons are now again centered vertically.
• Breadcrumbs can be styled in any color again.

Updates

• Remove unneeded files from the @orange-ui/orange npm package

Features

• Navigation can now be aligned using classes .nav--center and .nav--right
• Card was expanded with .card__section for dividing content into multiple sections

Updates

• All components can now be styled in any color from the color map
• Callout animates on hover only when .callout--action class is present

Launch of Orange

Orange came out to play in summer 2019. Here's what happened ever since.