Skip to content

Releases: fluid-framework/Fluid

0.20.2

09 Jul 05:31
Compare
Choose a tag to compare

Added :

➕ Add fillout button
➕ Animate the movement of menu-trigger's caret
➕ Unstyle .menu-item
➕ Add font-sizing function make control font where mixin cant be used
➕ Add reverse-responsive key in generate-stlye to reverse responsive media query
➕ Add heading classes for font sizing similar to h1 h2 h3 h4 h5 h6
➕ Add is-unstyle .button and .input classes
➕ Add .grid.is-adjust class to add negative margins on grid column
➕ Add responsive position Classes
➕ Add auto Utility for z-index
➕ Add more z-index utilities to have fine grain control over z-index
➕ Add two different variables to independently control how the breakpoints are prefixed
➕ 🔖 Add variable $enable-experimental-css to disable experimental css features
➕ 🔖 Add $menu-item-border-direction and $menu-item-themes-generate
➕ 🔖 Add font-family to control button font
⚠️ Add Exporimental .scrollbar to add custom designer scrollbar
⚠️ Add is-loading for containers

Update :

🆙 convert grid offset to utility offset
🏇 simplify .btn.is-out.is-(color) style
🆙 %controls placeholder no longer overide color property this allows controls like .btn.is-min .btn.is-out to inherit color from their parent resulting in more flexible layout designing
🆙 add background color in scrollbar to make its scrollbar area visible
🆙 Use $light background color for group .addon
🆙 Use white background for body and lyt-main
🆙 Use $fontweight-bold for headings
🆙 Disabled Color
🆙 Tweak dark Color in theme
🆙 Better approach for .btn.is-circle
🆙 Increase hr line opacity
🆙 use txt-(left|right) utility to align text in divider
🔨 .divider ::before and ::after height should be 100%

Removed :

🔥 remove never used function str-capitalize
🔥 remove testing code
🔥 Remove heading color

Fixes :

🔨 remove unknown constant from expression
🔨 do not override menu-trigger display property
🔨 🆙 selector-max-class value from 4 to 5
🔨 Align breadcrumb items in center
🔨 shrink .column to only available space when no width is defined
🔨 Fix inconsistant naming convention
🔨 Fix .input focus color not differentiating
🔨 fix .dropdown.is-top to .dropdown.is-up
🔨 Fix uneven round spinner in loading animation

Design :
💅 darken gray-100
💅 use lighter color for pre > code
💅 Use transparency on .menu-items for better UI attachment

Dev :
✏️ Rename $breakpoints-readable-else-short to \$breakpoints-short-or-readable with default value short
✏️ Rename $design-rounded-else-sharp to $design-rounded-or-sharp with default value rounded
✏️ Rename $design-shadow-else-border to$design-shadow-or-borderwith default valueshadow✏️ Rename$design-solid-else-gradientsto$design-solid-or-gradientswith default value tosolid✏️ Rename$enable-prefers-reduced-motion-media-queryto$enable-prefers-reduced-motion-mediaQuery✏️ Rename$design-rounded-else-boxto$design-rounded-else-sharp`

v0.20.0

21 Oct 11:45
Compare
Choose a tag to compare

Breaking Changes:

💥 Change Spacing Classes

Added:

➕ New Vertical Divider using utility is-y
➕ Add .file control validation
➕ Add color transition in .btn.is-min bottom border this will allow bottom border to slowly transit even when clr utility is used over .btn
➕ reset vertical align from svg inside .icon

Changes:

🆙 .divider component no longer override color and line-height
🆙 shorten screen-reader object to sr
🆙 Use on for events e.g on-hover for css modifier in dropdown
🆙 use li element instead of .list-item class

Removed:

🔥 New divider already have its spacing so no need to override in menu

Design:

💅 Update Divider design
💅 darken light theme color

Fixes:

🔨 Use inline-flex instead of flex in menu-trigger and dropdown-trigger to avoid glitching with other elements
🔨 remove un-necessary .dropdown-items selector
🔨 Use !optional in group placeholder because mixin doesn't exist when $design-rounded-else-box is set to false
🔨 Fix Overlay z-index

v0.19.0

13 Oct 01:58
Compare
Choose a tag to compare

Breaking changes:
🆙 💥 Use class .Label instead of label element to style controls like radio, switch, file and input floating labels for better web standards and web accessibility

Removed:
🔥 Remove padding from lyt-sidebar to let user have control over it properly
🔥 remove custom padding from .menu
🔥 Remove unnecessary .btn.is-min theme variant style

Fix:
🔨 Fix .lyt-header.is-collapsed not working
🔨 .menu-items not inheriting font-size
🔨 not inheriting color in .menu when using color utilities
🔨 Add padding in nested menu items to prevent text from going into overflow area

Added:
➕ 🚀 Add NEW dropdown menu component
➕ Add border-hide utility to hide border using transparent color
➕ Add border-(direction)-none utilities to remove border from specific direction
➕ Change header and sidebar color based on $design-theme
➕ Add active state of btn.is-min

Updated:
🆙 Set text-align:start on root to support RTL languages
🆙 🔀 Rearrange Theme colors to change there cascading priority
🆙 include all src and dist files in NPM package
🆙 Align icon in center when parent has display:flex
🆙 Flexible header height and flex wrap
🆙 Update From bootstrap reboot (twbs/bootstrap#29455)
🆙 override styles instead of increasing specificity, to make style overridable
🆙 lyt-sidebar are static by default, they can be made fixed using using fixed utility class.
🆙 Lighten .menu-item Background color
🆙 inherit text-align value in menu-item rather than explicit overriding
🆙 Use display:block on menu-items instead of flex to support text-align utility
🆙 Apply animation on menu items only if they were with .menu-trigger
🆙 Apply nested menu styles on direct child this will allow menu style to stop conflicting inside other components and universal selector * to be limited to direct children
🆙 Decrease nested menu animation duration
🆙 Increase before border-color transition duration in .menu-item to shorten and decrease chances of user specifies value more than transition duration
🆙 use scale to flip caret in menu instead of rotate

Design:
💅 Don't override text color in menu-item

Dev:
:octocat: Add fill-direction parameter for @mixin animation
🔖 :octocat: Add variables $menu-trigger-caret-color and $menu-divider-padding
🔖 :octocat: Add variables for nested Menu animation duration $$nestedMenu-animationduration
🔖 :octocat: rename variable $nestedMenu-marginleft to $nestedMenu-indent
🔖 :octocat: rename $button-transition-minimal to $button-transition-minimal-before to be more specific in naming convention
🔖 🔨 :octocat: Fix variable name from bg to background
🔖 🔀 :octocat: Arrange and reorder setting variables in menu
➕ ✅ Test for invalid @function clr-step values
🆙 :octocat: Make Triangle shape size equal to the size specified preventing extra style to used to align middle
📦 :octocat: Update package find-unused-sass-variables

v0.18.0

02 Oct 13:05
Compare
Choose a tag to compare

Breaking Changes:
💥 grid column classes now use standard width utilities to control their sizing
💥 Serve .addon as a standalone to be used as just as "controls like" wrapper
💥 Use has for grid gap utility
💥 Use border in border utilities instead of brdr
💥 Use is for visibility styles

Added:
➕ Add responsive width sizing classes
➕ Add Responsive flex-direction Utility
:octocat: Variable $main-background
:octocat: Add Variable $disabled to globally control disabled color
:octocat: Add Variable $pre-code-borderleft
➕ 🚀 :octocat: Add Support for constant property value in $properties for generate-style
➕ Support multiple and size attribute on .select

Dropped:
💧 Drop Styling anchor addon in favor of btn and other styling classes

Remove:
🔥 Remove Unnecessary opacity: inherit
🔥 Remove Unnecessary !important from disabled controls like radio, switch and checkbox
🔥 Remove Unnecessary placeholder %controls-disabled from label
🔥 remove Unnecessary placeholder %controls-hover in .input
🔥 Remove Unnecessary Temporary variable
🔥 Remove Unnecessary need for %clearfix placeholder
🔥 Remove Unnecessary transition in .btn.is-min
🔥 Remove bugs placeholder as they doesn't offer much improvement

Fixes:
🔨 Fix .menu default color theme
🔨 Fix input.has-icon.is-(theme) padding inside group
🔨 Fix width issue when controls like radio and checkbox placed inside group addon
🔨 Fix rounded corner of .input.is-min in group > control
🔨 :octocat: Fix various variable naming inconsistency
🔨 :octocat: Fix missing content inside source maps
🔨 Remove blue background from .select:focus in IE

Changes:
🆙 do not override input background in has-floating-label
🆙 Use Placeholders in .group to combine selectors
🆙 change radio and switch visual appearance only when value changes
🆙 Change .column to use width instead of max-width
🆙 Override label margin-bottom for .file
🆙 :octocat: Use quoted string value for selector in utilities
🆙 Use %placeholders to combine various single property styles
🆙 Use important for .float display property …

Design:

💅 Tweak Input icon position
💅 Slightly tweak checkbox checked arrow position

v0.17.0

27 Sep 20:12
Compare
Choose a tag to compare

Changes:

🆙 Update Animation name from pulse and pulse solid to ripple and ripple-gray respectively
🆙 Improve .Switch Control
🆙 Use correct variable for padding-left in %controls-label
🆙 Remove margin-bottom from label when used with .control
🆙 Use Display Flex to center align range thumb on its track
🆙 add margin-left to divider only if it has some content
🆙 Align .divider using Flex properties
🆙 👨‍💻 Use convert-unit for calculation in .btn.is-min
🆙 👨‍💻 Use internal @function font size

Removed:

🔥 Remove margin from %controls
🔥 Remove RFS fluid font implementation

Design:

💅 Redesign .switch control

Added:

➕ Add Menu Component
➕ Add default font size variable to Options
➕ Add fallback property work-wrap in code and .text-break for IE
➕ 👨‍💻 Add Variable $border-radius-circle

Fixes:

🔨 Fix .btn.is-circle shape In React
🔨 .divider line opacity
🔨 Fix .input.is-min height
🔨 work around to fix source maps content not showing in debugger
🔨 ↪️ Revert hr element to bootstrap (inconsistent size still exist)

Dev:

↔️ 👨‍💻 Split Color variants onto separate block
↔️ 👨‍💻 Split class level cursor:pointer style from elements

v0.16.1

24 Sep 00:11
Compare
Choose a tag to compare

Added:

➕ Divider Object
➕ Support for file inputs
➕ align .input content in center when used on other than input tag
➕ Grid column spacing/gap classes to modify spacing/gap between column on fly

Updates:

🆙 Do not override property value from animations
🆙 do not add border-radius to .is-min styles controls
🆙 btn min redesign
🆙 support disabled state on every anchor tag
🆙 reset before transform on loading elements so that loading animation is not effected by it
🆙 align feedback triangle shape by top rather than bottom
🆙 align label::before in middle
🆙 Center align content in .addon
🆙 Apply states to addon only if its a anchor tag
🆙 decrease icon size to 1em so that layout is not affected when placed inside component e.g button
🆙 Add cursor pointer for select tag
🆙 improve .switch style and visual appearance accessibility
🆙 apply cursor: pointer to .control only if its a label tag this prevents misleading user to interactable area of the control without wrapped in label
🆙 tweak icon caret-down path
🆙 Use data attribute instead of custom fluid attribute
🆙 tweak checkbox-checked-arrow-top position
🆙 make %controls-label ::after and ::before align to label position
🆙 Set IE clear field button color so that it is not affected by .input color
🆙 Add padding only when label is not empty

Fixes:

🔨 missing opacity 0 utility class
🔨 .input hover state box-shadow transition
🔨 hover boxshadow not showing on .has-floating-label
🔨 Fix inconsistent hr size when used with size attribute

Remove/Drop:

🔥 height: 100% from %controls-labels (#e9e4cb6)
💧 .input.unstyle class
💧 🔥 remove 30% spacing classes

Dev Changes :

@function convert-unit to handle units conversion
$enable-debugging Variable to suppress @debug and @warn messages
➕ Shadows Variables to control shadows globally
➕ ✅ when keyframe name exist but not its keyframes value🔀 move nuke margin style from sanitize to elements
➕ Add caret-down icon source file
🆙 avoid overiding extra css properties in triangle shape
🆙 separate has-floating-label styles to have an effect in IE 11
🆙 avoid adding extra box-shadow override in .btn.is-sld
🆙 ✅ show name of the keyframe whose value is not found
🆙 Use Correct .group margin dependent variable
🔀 move .control base styles at top
🔀 move feedback style out of .control context
🔀 move style to their relative context
↪️ rename variable $icon-size to $icon-area
↪️ rename icon variables caret to caret-down
↔️ Split %controls placeholder into fragments to remove unnecessary styles

v0.16.0

08 Sep 23:06
Compare
Choose a tag to compare
v0.16.0 Pre-release
Pre-release
# Added

➕ styles for select tag using class .input

# Fixes

🔨 IE form validation icons by change outer quote marks to `"`
🔨 Fix range styling for touch devices

# Changes

↪️rename fluid-sanitize-lease to fluid-bugs
🆙 encode < > # in svg background-image icons for compatibility
🆙 Apply readonly state styles only on input tag and textarea tag

# Removed

🔥 Unnecessary .input form validation specifiers
🔥 padding to expand range component to full width
🔥 readonly attribute specifiers
🔥 readonly .input box-shadow:none

# Devs

➕ add `-moz-appearance` property to test correctly on Browser stack
🆙 @function str-replace can search and replace using Maps
🔀 place %input-state with controls placeholder as %controls-validation-icon
🔀 Use select caret styles onto element directly
🔀 import icons at last to inherit %controls variables
🔀 rearrange .input styles
↪️ Rename icon variables to there respective shape

v0.15.0

04 Sep 20:48
Compare
Choose a tag to compare
v0.15.0 Pre-release
Pre-release

Addition
➕ range component (#45)
➕ New switch input by using .switch class on checkbox type inputs
➕ Checkbox form validation
➕ add padding right for inline controls to add extra spacing in inline inputs

Fixes:
➕🔨 Sanitize: Inherit correct box sizing in IE and EDGE Range input
➕🔨 Sanitize: Remove the dropdown arrow in Chrome from inputs built with datalists
🔨 disabled opacity on %controls-label in IE
🔨 resizing %controls-label (checkbox,switch,radio) not work in IE
🔨 fix pulse animation in %controls-label (radio, checkbox, switch)
🔨 tweak switch circle size

Updates:
🆙 Use Cascading for active styles instead of !important in %controls (button, input, group-addon, range)
🆙 em units in checkbox and radio

Dropped:
🔥 remove unique disabled style from checkbox