CHANGELOG 3.3.5
🚀 Added
- Added stepper examples on homepage (#65 (comment))
- Added style to internal scrollbars
- Updated search to not use
headerinsidemenu(#188) - Updated default
dialogto be rounded like material 3 guidelines (#186) - Updated
sliderto be like material 3 guidelines - Added
left|right|top|bottom|horizontal|verticaldirections tomarginandpaddinghelpers, you can use like this{direction}-marginor{direction}-padding(#150) - Added
auto-marginandauto-paddinghelpers (#150) - Added clickable icon on
fieldelement using<a>tag (#195)
🩹 Fixed
- Fixed focus on
textareaelement withoutborder - Fixed data-ui behavior to not focus on element after open a
snackbar(#183) - Fixed data-ui
menubehavior - Fixed mis-rendered issues (#194)
- Fixed animation and color of
progresson iOS - Fixed duplicate semicolon (#202)
- Fixed label align and textarea paddings (#200)
⚠️ Breaking changes
- Renamed
toasttosnackbarto be material 3 friendly (#182) - Removed
--inverse-on-primaryvariable, this color doesn't exists on official material color scheme - Updated default
chipto be like material 3 guidelines (https://m3.material.io/components/chips/overview) - Merging
loaderandprogresselements into<progress>tag to be more semantic with a pure css solution
🚩 Examples
// Renamed toast to snackbar to be material 3 friendly
// Before
<div class="toast">...</div>
// After
<div class="snackbar">...</div>// Updated default chip to be like material 3 guidelines
// Before
<a class="chip">
<i class="small">today</i>
<span>Chip</span>
</a>
// After
<a class="chip">
<i>today</i>
<span>Chip</span>
</a>// Merging loader and progress elements into <progress> tag to be more semantic with a pure css solution
// Before
<div class="progress"></div>
<div class="loader"></div>
<div class="progress orange"></div>
// After
<progress></progress>
<progress class="circle"></progress>
<progress class="orange-text"></progress>
<progress value="0.25"></progress>
<progress value="25" max="100"></progress>// Updated search to not use header tag inside it
// Before
<menu class="min">
<header class="fixed">
<div class="field large prefix suffix no-margin">
<i class="front">arrow_back</i>
<input placeholder="Search text">
<i class="front">close</i>
</div>
</header>
...
</menu>
// After
<menu class="min">
<div class="field large prefix suffix no-margin fixed">
<i class="front">arrow_back</i>
<input placeholder="Search text">
<i class="front">close</i>
</div>
...
</menu>// Added stepper examples on homepage
<nav>
<button class="circle small">1</button>
<div class="max divider"></div>
<button class="circle small">2</button>
<div class="max divider"></div>
<button class="circle small">3</button>
</nav>// Added directions to margin and padding helpers
// Added auto-margin and auto-padding helpers
<div class="left-margin"></div>
<div class="horizontal-margin"></div>
<div class="small-margin left-margin"></div>
<div class="small-margin horizontal-margin"></div>
<div class="auto-margin left-margin"></div>
<div class="auto-margin horizontal-margin"></div>// Added clickable icon on field element using <a> tag
<div class="field prefix">
<a>
<i>search</i>
</a>
...
</div>