Change position of tabbar badges #2555

mictro · 2022-10-20T10:02:33Z

Which issue does this PR close?

This PR closes #2432

What is the new behavior?

Reposition tab-bar badges in accordance with updated design.

Does this PR introduce a breaking change?

Yes
No

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

Make sure you have implemented tests following the guidelines in: "The good: Test".
Make sure you have updated the cookbook with examples and showcases (for bug fixes, enhancements & new components).

Review

Do a self-review.
Request that the changes are code-reviewed
Request that the changes are UX reviewed (only necessary if your PR introduces visual changes)

When the pull request has been approved it will be merged to develop by Team Kirby.

jkaltoft

I really like the explanation(s) for why we're using magic numbers. Much better than before 👍🏻

I have a few requests for change. Otherwise great work.

libs/designsystem/src/lib/components/tabs/tab-button/tab-button.component.scss

…n.component.scss Co-authored-by: Jesper Kaltoft Vind <git@jesperkaltoft.dk>

…badge

jkaltoft

There's a missing module import that makes the build fail. When that is fixed everything should be ready to go 🙂

jkaltoft · 2022-10-25T08:09:01Z

libs/designsystem/src/lib/components/tabs/tab-button/tab-button.component.scss

+        --kirby-badge-left: 0;
+
+        margin-left: utils.size('xxxxs');
+        margin-bottom: math.div(utils.size('xxxxs'), 2);


Remember to import the math module (beginning of file):

@use 'sass:math';

Will fix https://github.com/kirbydesign/designsystem/actions/runs/3319146598/jobs/5483935259#step:4:36

Bummer... - fixed

jkaltoft

🚀

* Fix no fabSheet close on item select * Add unit-tests for fabSheet * 💡 Add dummy TODO comment * Work In Progress * 🚧 Keep focusedIndex variable updated * 🚧 Clean up a bit * 🚧 Control arrow up/down depending on open/closed * 🚧 Select item on Enter/Space keypress * 🐛 Only select focused item on enter/space when open * On opening move focus to selected index (if any) * ✅ Extend test Behavior has been changed: ArrowUp/ArrowDown no longer selects Item. Instead they move focus to next item. Updated test checks that items get focused. Extended with a key press on Enter to trigger select Item. When selecting an item it also programmatically gets focused. * ✅ Update tests to match new behavior - Key presses should not set selected item when dropdown is closed - ArrowDown and ArrowUp opens the dropdown - Space behaves like Enter (open and close dropdown) * Update todo-comment * ♿️ Make Home and End key press behave properly Should not select item - only focus. Similar to arrow keys. Should only apply when dropdown is open. * ♿️ Focus on last item if key press ArrowUp If no item is selected then move focus to last item if ArrowUp Move focus to first item if ArrowDown. * ⚗️ Try to remove focus outline on iOS * 🚧 stash commit * fixed top content directive * removed cookbook example * updates * removed redundant style * local navigation component * update directive name * rollback unwanted linting changes * removed duplicate style value * removed console log + redundant styles * added console warn * revert * Refactor logic to focus items * Remove the focusItem method * Clean up code for focusing items * Remove ToDo comments * Utilize scrollIntoView to simplify scrolling logic * Update cookbook example for custom item template * Added Data Table examples and showcase * Add data-table directive * Add initial unittest to data-table directive * rename directive from data-table to table * Add option to show an alert before dismissing the modal * Update cookbook * Fix broken unit tests * Create a separate method to handle showAlert * Write unit tests to check if a bool or a function is passed to canDismiss * Remove focused test * Add initial styling of table * Add showcase with icon button * Reassign the showAlert method instead of creating a spy * add mockdata to showcase + rmv constructor elem * modified Camel case to Kebab case selectors * Reorganize unit test in accordance with the AAA pattern * Add accordian to example * add colors from Kirby utils * fixed top content spacing * Remove unused CSS * change row border-bottom & add global style vars * Remove beforeEach and move the content into the it block, if there is only 1 it block * Remove focused test * fix index.ts exports * add export DataTableModule * solve conflicts + removed unsued imports * Correct review changes from RKK * Change naming convention of table components * Write test to check if focusedIndex is set when selecting an item * Write tests for arrow key behaviour * Move css to relevant components * Remove defined action-padding * updates * update showcase w/ disclaimer, API, CSS desc. * refactor + review changes * Update package.json fix version bump * line-height sass var * Update core version * Bump to version 7.1.1 * Update changelog * update unittest imports * corrected kirby-selectable-th class name * add unittest for data table and table row * rename tr to table-row for clarity * implements onPush change detection - onPush change detection on Table Component - onPush change detection on Table Component - import fix in Data table module * unit tests + experimental examples module * update table component unittest * added cookbook affix examples * remove unused imports * added prefix / suffix slots to form-field.component.html * remove fixed comments * fix module scope * Remove todo comment * affix directive * position affix correctly. Input field padding still wrong * fix affix example to align with new syntax * moved some shared form field variables to a new file from form-field-inputs.shared.scss. Trying to correctly calculate horizontal padding on input field iwth affix * ResizeObserver for affix * update divider widht and item spacing * Refactor template to simplify calculations * Leftalign code snippet for better presentation * Remove affix heading from example page * Use designtoken instead of css prop for padding * Move ResizeObserver init to AfterContentInit hook * Revert form-field-variables * remove view encapsulation - removed view encapsulation - removed th selection class - moved kirby-selectable-row to table main scss * updated showcase card example subheading * Simplify styling of affix and prefix/suffix container * 🐛 Fix missing input element after content init We should use the input content child in ngAfterContentInit to make sure it is initialized. The inputElement that was used is queried in ngAfterContentChecked, and thus too late. * Disable eslint for kirby-affix selector * 📝 Add disclaimer with known limitations to docs * ✅ Adjust tests to fit new DOM structure * affixElements should never be undefined after content init It will just be an empty array if no elements are queried. * Increase readability of input padding calculation * review changes * remove onClickHeading * Update cookbook example to include custom icon * added some tests for affix on formfield spec * increase wait time for formfield affix test * Enforce affix text color as semi-dark * ✅ Reuse existing test util and improve structure * ✅ Remove flaky tests * changed PR changes from RasmusKjeldgaard * corrects kirby-table fixedLayout prop. in example * updated styling comments * bump designsystem version * Set the Intersection Observer rootMargin to the height of the dropdown button * Create settings.json in the .vscode folder * Add update icon * Update package.json From code owner suggestion Co-authored-by: Jesper Kaltoft Vind <git@jesperkaltoft.dk> * Change position of tabbar badges (#2555) * Change position of tabbar badges * Adjust md badge vertical position * Update libs/designsystem/src/lib/components/tabs/tab-button/tab-button.component.scss Co-authored-by: Jesper Kaltoft Vind <git@jesperkaltoft.dk> * Code Review Corrections * Remove errornously merge foced test Co-authored-by: Jesper Kaltoft Vind <git@jesperkaltoft.dk> * Prevent dropdown focus ring on click (#2544) * Toggle 'clicked' class to prevent focus ring on click * Change comments to say 'dropdown' instead of 'modal' * Refactor to use Hostbinding to dynamically add 'clicked' class * Re-add method call, that was removed for test purposes * Upgrade Chart.js to version 3.9.1 (#2548) * Upgrade chart.js to v. 3.9.1 * Add type guard before accessing config.type * Create helper type guard function * Apply the type guard function where needed * Bump charts.js version in nested package.json * Remove skipLibCheck from tsconfig * Release v7.2.1 (#2568) * 7.2.1 * Update core version * Update changelog Co-authored-by: Michael T <micbittro@gmail.com> Co-authored-by: RasmusTraeholt <rth@bankdata.dk> Co-authored-by: Mark Drastrup <mark.drastrup@gmail.com> Co-authored-by: bdusav <bdusav@bankdata.dk> Co-authored-by: Sigurd P. von A. Vilstrup <SAV@bankdata.dk> Co-authored-by: Sigurd <107846347+sigurdpvavilstrup@users.noreply.github.com> Co-authored-by: Thomas Springborg <thsp@jyskebank.dk> Co-authored-by: RasmusKjeldgaard <rkk@bankdata.dk> Co-authored-by: tspringborg <thomas-springborg@hotmail.com>

Change position of tabbar badges

c7915f7

mictro added enhancement New feature or request breaking-change Add this PR to the changelog as a breaking change component:Tabs and removed breaking-change Add this PR to the changelog as a breaking change labels Oct 20, 2022

github-actions bot temporarily deployed to pr-2432-tabbar-with-medium-text-badge October 20, 2022 10:10 Inactive

Adjust md badge vertical position

b996ff3

mictro requested a review from jkaltoft October 21, 2022 10:24

mictro marked this pull request as ready for review October 21, 2022 10:24

github-actions bot temporarily deployed to pr-2432-tabbar-with-medium-text-badge October 21, 2022 10:29 Inactive

mictro enabled auto-merge October 24, 2022 13:04

jkaltoft requested changes Oct 24, 2022

View reviewed changes

Update libs/designsystem/src/lib/components/tabs/tab-button/tab-butto…

9fd672c

…n.component.scss Co-authored-by: Jesper Kaltoft Vind <git@jesperkaltoft.dk>

github-actions bot temporarily deployed to pr-2432-tabbar-with-medium-text-badge October 25, 2022 07:26 Inactive

mictro added 2 commits October 25, 2022 09:38

Code Review Corrections

2a1f396

Merge branch 'develop' into enhancement/2432-tabbar-with-medium-text-…

bcbcfdc

…badge

mictro requested a review from jkaltoft October 25, 2022 07:42

jkaltoft requested changes Oct 25, 2022

View reviewed changes

Remove errornously merge foced test

45c2c6e

mictro force-pushed the enhancement/2432-tabbar-with-medium-text-badge branch from 5414bb9 to 45c2c6e Compare October 25, 2022 09:46

mictro requested a review from jkaltoft October 25, 2022 09:48

RasmusKjeldgaard disabled auto-merge October 25, 2022 09:51

jkaltoft approved these changes Oct 25, 2022

View reviewed changes

RasmusKjeldgaard merged commit a7ae231 into develop Oct 25, 2022

RasmusKjeldgaard deleted the enhancement/2432-tabbar-with-medium-text-badge branch October 25, 2022 10:00

RasmusKjeldgaard mentioned this pull request Oct 28, 2022

Release v7.2.1 #2568

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Change position of tabbar badges #2555

Change position of tabbar badges #2555

mictro commented Oct 20, 2022 •

edited

Loading

jkaltoft left a comment

jkaltoft left a comment

jkaltoft Oct 25, 2022

mictro Oct 25, 2022

jkaltoft left a comment

Change position of tabbar badges #2555

Change position of tabbar badges #2555

Conversation

mictro commented Oct 20, 2022 • edited Loading

Which issue does this PR close?

What is the new behavior?

Does this PR introduce a breaking change?

Are there any additional context?

Checklist:

Reminders

Review

jkaltoft left a comment

Choose a reason for hiding this comment

jkaltoft left a comment

Choose a reason for hiding this comment

jkaltoft Oct 25, 2022

Choose a reason for hiding this comment

mictro Oct 25, 2022

Choose a reason for hiding this comment

jkaltoft left a comment

Choose a reason for hiding this comment

mictro commented Oct 20, 2022 •

edited

Loading