Release v7.0.0 #2442
Merged
Release v7.0.0 #2442
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* Change name of kirby-button _disableAttentionLevel parameter to noDecoration * Change styling of attentionlevel2 and update button examples * Add styling of page header button * Change button attention level test * Change kirby-page-action button to attention level 3 * Add kirby-dropdown styling for attention-level 2 * Change page action button test to comply with UX change * Add missing styling on no-decoration * Remove none from button theme selector * Change attention-level-4 deprecation warning message on kirby-button * Change after Inspection * Change deprecation text Co-authored-by: Michael Troelsen <mxt@bankdata.dk>
* Change button color on action-sheet * Update libs/designsystem/src/lib/components/modal/action-sheet/action-sheet.component.spec.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> Co-authored-by: Michael Troelsen <mxt@bankdata.dk> Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk>
* 🚧 Introduce experimental apply-hover() mixins * 🚚 Move experimental styles to other location * 🚧 Fix Sass color data type and make things work * 💄 Only apply mixin if content block exists This may prove to be the wrong strategy. For example, if we want to always apply some default hover styles * 🚧 Continue experiment - and clean up * 🔥 Clean up * ⚗️ Use parameters for apply-hover mixin * ⚗️ Determine lightness Should it increase or decrease? * ⚗️ Use color params instead of variant names * 🔥 Clean up * ♻️ Rename and use mixin apply-hover() * 🔥 Clean up * 🚚 Rename module * 💄 Let apply-hover mixin accept content block * ♻️ Move transition from button to hover partial * ♻️ Move cursor declaration to hover partial * 💡 Add comment * ⚗️ create local _button-hover mixin for buttons * 🏷️ verify parameter validity * 💡 comment on relative lightness calculation * 💄 move declarations outside of hover * 💄 control transition with design tokens * 🏷️ add loudness scale design tokens * 💄 fix styles for attention level 3 destructive * 💄 make loudness configurable * 💡 add comments * 🔥 clean up * 💡 update comments * 💡 add TODO-comments * 🔥 remove unused Sass modules * 🏷️ temporarily change loudness scale * 🏷️ type check $loudness and set default value * 💡 clarify comment about transparency Update libs/designsystem/src/lib/components/button/button.component.scss Co-authored-by: RasmusKjeldgaard <rkk@bankdata.dk> * 💡 clarify comment about relative lightness * 💡 remove TODO comment * 🔀 clean up after rebase Changes to button attention levels have been merged to base branch. Afterwards this "interaction state hover" branch has been rebased on base branch. * 💄 apply hover to button-no-decoration Currently the only effect is the cursor changes to pointer on hover. * 💡 remove TODO comments Issues have been created in backlog instead. * Do not hardcode transition to apply to background-color Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * 💄 set default loudness to 'moderate' * Remove comment containing a file path We will most likely not update this comment if we ever move the file to a different location or rename it. Co-authored-by: RasmusKjeldgaard <rkk@bankdata.dk> Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk>
* 💄 Reduce default hover loudness * 💄 Use quoted strings for keys in maps * 💄 Create solution for transparent background * 💄 Transition on all properties `$property` may or may not be a CSS custom property. `transition-property: all;` catches both custom properties and ordinary CSS properties like `background-color`. * 💄 Fine-tune loudness levels for different cases * 💄 Handle transparent background in _button-hover * 💄 Use undecorated kirby-buttons in calendar * 💄 Adjust hover on buttons in dark context * 💄 Reduce attention level 3 hover loudness * 💄 Increase alert ok button hover loudness * 💄 Increase toggle button hover loudness * 💄 Adjust hover loudness for action sheet button * 🔧 Raise performance budget temporarily Quick "fix" for error that is causing the build pipeline to fail. An issue has been created for a proper fix: #2043 * 💄 Remove margin from buttons in calendar
* 💄 Apply focus-within to button * 💄 Fix checkbox border radius assignment * 💄 Apply focus-within to checkbox * 💄 Apply focus-within to radio * 💄 Apply focus-within to toggle * 💄 Change global focus ring color * 💄 Apply focus-within to card * 💄 Apply focus-within to dropdown * 💄 Apply focus-within to input (formfield) * 💄 Apply focus-within to textarea (formfield) * 💄 Apply focus-within to link * 💄 Apply focus-within to knob in range * 💄 Specify padding on segment btn (closes #1744) This is a prerequisite for properly styling the segment button with a focus ring * 💄 Apply focus-within to segmented-control * 💄 Use element-as-button directive with chip * 💄 Apply focus-within to chip * 🚧 Remove outline test from elm as btn directive This is part of restructuring focus ring tests. It is the responsibility of components themselves not this directive to apply focus styling. * 💄 Introduce apply-focus mixin * 💄 Use interaction state in button * 💄 Extend apply-focus mixin with gap and shadow * 💄 Use apply-focus in card * 💄 Use apply-focus in link * ⏪ Revert accidental color change * ♻️ Remove accidental double pseudo class for link * 💄 Adjust link focus ring border radius * 💄 Use background color getter from utils * 💄 Use apply-focus in dropdown * 💄 Split mixin in two to support css shadow parts * 💄 QoL improvements to focus mixin * 💄 Use apply-focus-part in toggle * ♻️ Clean up link, card and dropdown * 💄 Fix missing string interpolation * ♻️ Move apply-focus to shared form field styles * 💄 Use apply-focus in checkbox * 💄 Use apply-focus in chip * 💄 Use apply-focus in radio * 💄 Use apply-focus in range * 💄 Use apply-focus in segmented-control * 💄 Use apply-focus-part in Segmented Control * 💄 Support elevation of four in card * 💄 Add focus-visible mixin with fallbacks * 💄 Replace apply-focus with focus-visible solution * 💄 Apply mixins only on non-touch devices * ♻️ Refactor navbar to leave room for focus ring * 💄 Document and cleanup focus mixins * 🎨 Formatting to improve readability * Remove typo in focus mixin comment * ♻️ Add content-block to mixin * ♻️ Reorder imports alphabetically * ♻️ Use focus-ring-color variable via utils * 📝 Update comments for focus to be more specific * ♻️ Document toggle style changes * ♻️ Reorder for clarity * 🔥 Remove todo
* 💄 Fine-tune loudness levels for different cases * 💄 Handle transparent background in _button-hover * 💄 Use undecorated kirby-buttons in calendar * 💄 Adjust hover on buttons in dark context * 💄 Reduce attention level 3 hover loudness * 💄 Increase alert ok button hover loudness * 💄 Adjust hover loudness for action sheet button * 💄 Remove margin from buttons in calendar * 🚧 stash commit * 🚧 Make PoC with state layer * ⚗️ Try to use state layer in calendar * ⚗️ Continue experiment with state layer * 💄 Fix icon positioning in buttons * 🚧 separate hover styles from generic layer styles * 🔥 Do not use parenthesis with argument-less mixins * 🚧 separate button specific styles for content from generic layer styles * 💡 add todo comments * 🔥 Do not use parenthesis with argument-less mixins * 💡 Add comments * 🔥 Clean up * ♻️ Extract generic interaction state layer styles * 🚚 Rename mixins * ♻️ Extract state layer styles for all states * 🔥 Clean up * ♻️ Rename module * 💄 Apply hover for ionic components (item) * ✅ Update tests to match new template structure * 💄 Use loudness names as parameters * 💄 Hide apply-state mixin in module * 🔥 Clean up * 💄 Move state layer on top of content layer * 💄 Use kirby-black as state layer bg color * 💄 Make z-index for layers configurable * 💡 Update/delete comments * 💄 Move transition declaration into private mixin * 💄 Rename class selector and clean up * 🔥 Remove --kirby-item-background-hover * 💄 Reorder declarations and remove comments * 💄 Apply hover to ion-back-button * Make transition mixin public * Expose transition mixin from ionic module * ♿️ Hide state layer from screen readers * ♻️ move theme-background mixin * 💄 Apply state layer to chip component - Eliminates selected-and-hover() and theme-background() mixins - Apply hover state layer where needed - Declare color and background-color where needed (no mixin) * 💄 Apply state layer to segmented control * 📝 Update comment * 🔥 Move shared styles to only place they're used * 💄 Add content block in apply-hover mixin * 💄 Apply proprietary hover solution to slide button * 💄 Declare custom properties before regular properties * 💄 Streamline special solutions for ionic buttons - ion-back-button in Page component - ion-segment-button in Segmented Control component * 💄 Apply proprietary solution to ion-fab-button * 💄 Adjust loudness levels and colors on Chip * 💄 Update loudness scale - use t-shirt sizes * 💡 Add/remove comments * 💄 Align absence of named parameter for loudness * 💄 Rename interaction state content layer * 💄 Add interaction state layer and hover to Accordion * ✅ Update tests * 💄 Reintroduce default loudness variable * 💡 Explain why we use negative inset value * 💄 Remove redundant fallback value * 💡 Remove comment * 💄 Rename mixin and pass border-width as parameter * 💡 Update comments Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * 💡 Link to Github issue in comment * 💄 Use correct import paths * 💄 Order @forward declarations alphabetically Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk>
* 💄 Add function that calculates hover color * 💄 Apply transition * ♻️ 💄 Move helper function to shared location #2128 also needs to calculate color in the exact same way
* 💄 Use apply-hover and transition in item * 💄 Set loudness correctly
* 💄 Apply hover by adjusting background color * 💄 Improve transition mixin Allow list of multiple properties as argument * 💄 Only transition background-color property * 💄 Use shared function for getting state color
* 💄 Make cursor default for content inside accordion * ⚰️ Remove unused ng-container
* 💄 Use layer solution for hover on card * 🔥 Remove test that no longer adds value * 🔥 Remove redundant ng-container * 📝 Showcase hover on cards with background image
…tton-attention-levels-and-hover
* 🎨 Run prettier and stylelint manually * 💚 Fix cookbook build - Move template to file and use noop() from rxjs - Move example component and use noop from rxjs
* ⚗️ Create PoC for generic link hover * 💄 Move generic link styles to separate module * 💡 Update comment regarding text wrapping * 💄 Create opt-out mixin and module for links * 💄 Use opt-out module + mixin in Cookbook navigation * 💄 Introduce strip-unit Sass function * 💄 Calculate values Instead of using hardcoded values. * 💡 Update comments * 💄 Change hover effect After UX review we decided to go for a simpler hover effect: Remove the underline. The opt-out mixin may not be very useful anymore, but it is kept as an example. * 🔥 Remove unused Sass utility function strip-unit
…action-states-and-attention-levels
When syncing origin/stable into this branch we accidentally merged the wrong changes when we tried to solve a conflict. This commit (re)applies the correct changes.
When syncing origin/stable into this branch we accidentally merged the wrong changes when we tried to solve a conflict. This commit (re)applies the correct changes.
When syncing origin/stable into this branch we accidentally merged the wrong changes when we tried to solve a conflict. This commit (re)applies the correct changes.
* 💄 Move $default-loudness to utilities * 💄 Move transition mixin to utilities * 💄 Create default transition duration and use it * 💄 Allow longhand properties for transition * 📝 Update unit in comment documenting state layer * ⏪ Revert using variable in unrelated places * 🔥 Remove unused scss module * 🚨 Add back interpolation - accidentally removed * 🚚 Rename utilities to interaction-state.utilities
* 💄 Create apply-active mixin * ♻️ Move $default-loudness-active to utilities
* 💄 Create apply-active mixin * ♻️ Move $default-loudness-active to utilities * 💄 Apply mixin to default buttons * 💄 Apply mixin to button variants * 💄 Apply active-mixin to Accordion * 💄 Apply active-mixin to Calendar * 💄 Apply active-mixin to clickable Card * 💄 Apply active-mixin to Chip * 💩 Raise performance budget See #2043
* 💄 Add apply-active mixin for Ionic components * 💄 Use apply-active in Ionic components * 💥 Remove CSS custom prop for item active state Active state should not be overwritable. If item is selectable we want to make sure it has active state. * ♻️ Use apply-active in slide button Some custom functionality for hover was also rewritten to use existing util function get-state-color. * 💄 Use apply-active in non-standard components * 💄 Remove unused import
More levels in increments of 4%
37ad2a0 to
16b249a
Compare
…mains-both-when-the-accordion-is-expanded-and-after-it-gets-collapsed-again Bug/2453 highlight color remains both when the accordion is expanded and after it gets collapsed again
Let users specify if card has a dark background color. If true the interaction states :hover and :active will be lighter and louder instead of the default "make it darker" and "less loud" (more subtle effect).
…tions Use alternative hover and active on dark Cards
Update changelog with v7 entry
RasmusKjeldgaard
approved these changes
Sep 16, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Which issue does this PR close?
This PR closes # (insert issue number here)
What is the new behavior?
Does this PR introduce a breaking change?
Are there any additional context?
Checklist:
The following tasks should be carried out in sequence in order to follow the process of contributing correctly.
Reminders
Review
When the pull request has been approved it will be merged to
developby Team Kirby.