Refactor interaction state solution for hover #2059
Merged
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
72b4de7 to
ac4eee4
Compare
4d1f350 to
3ebb347
Compare
28e1939 to
9a9584d
Compare
07db585 to
ae20555
Compare
MadsBuchmann
suggested changes
Mar 8, 2022
Comment on lines
15
to
22
| // NOTE: Also see ion-back-button in page component and ion-segment-button in segmented control component | ||
| &::part(native)::after { | ||
| @include ionic.transition; | ||
| } | ||
| // end NOTE |
There was a problem hiding this comment.
What should i note when looking at ion-back-button in page component and ion-segment-button in segmented control component? Consider elaborating.
There was a problem hiding this comment.
If we could add hyperlinks to code it would be great. The note is just an attempt to refer to the other places we use the same custom implementation of hover.
I hope we can consolidate this somehow when we finish the remaining issues for hover, where we need special solutions for different ways to make it work for Ionic components.
There was a problem hiding this comment.
Makes sense! I confused this with the shell comment... So i accidentally took a stab at reformulating it. If we consolidate them in the end it does not matter anyways :P
Suggested change
| // NOTE: Also see ion-back-button in page component and ion-segment-button in segmented control component | |
| &::part(native)::after { | |
| @include ionic.transition; | |
| } | |
| // end NOTE | |
| /* | |
| NOTE: this is a custom implementation of the hover interaction state; | |
| identical to PageComponent's ion-back-button & SegmentedControlComponent's | |
| ion-segment-button. | |
| */ | |
| &::part(native)::after { | |
| @include ionic.transition; | |
| } | |
| // end NOTE |
libs/designsystem/src/lib/components/segmented-control/segmented-control.component.scss
Outdated
Show resolved
Hide resolved
libs/designsystem/src/lib/components/slide-button/slide-button.component.scss
Outdated
Show resolved
Hide resolved
libs/designsystem/src/lib/components/slide-button/slide-button.component.scss
Show resolved
Hide resolved
- ion-back-button in Page component - ion-segment-button in Segmented Control component
Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk>
5be4067 to
b267f24
Compare
9ca753e
into
release/theme/2028-button-attention-levels-and-hover
jkaltoft
added a commit
that referenced
this pull request
Mar 17, 2022
* 💄 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>
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 #2008
What is the new behavior?
Introduces layer based solution for interaction states in general and for hover state in particular.
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 automatically merged to master via automerge.