Bugfix/button loading issue in modal #3252
Conversation
Making this change because widthOverride sometimes gets set to 0 (should also be fixed), meaning this check fails as "falsy".
…odals Checking that width is truthy (not zero) will avoid issue where widthOverride gets set to 0 because the button is not yet rendered.
🦋 Changeset detectedLatest commit: ce25ccd The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Storybook demo / Chromatic68b13d5a9 | 91 components | 135 stories |
…absolutely positioning the loading icon.
|
looks good to me! I added a story for testing this (i also tried the same story on on main (broken loading buttons inside modal ): this branch:
|
Co-authored-by: Ken <[email protected]>
…very specific item.
…ly child (hidden), because of the loader icon. Instead checks for no label. Could consider :not(:has(:is(.navds-button__icon, .navds-loader))) as well, to be more robust, but it might be overkill.
There was a problem hiding this comment.
Now the only thing left is to update button.darkside.css as well 😁
There was a problem hiding this comment.
I was about to comment that. 🙈
There was a problem hiding this comment.
Added a quick edit for darkside. I'll welcome suggested improvements, e.g. for nesting choices.
…ough filteredProps and then overridden afterwards.
Description
Fix edge-case issue with setting
loading={true}on a Button in a Modal on page load. (Why would anyone do this?)Button would get
width: 0because the width is calculated before the button is rendered.This also caused the spinner not to show, because we checked
widthOverrideinstead of theloadingprop.Component Checklist 📝
@navikt/core/css/config/_mappings.js)@navikt/core/css/tokens.json)@navikt/aksel-stylelint/src/deprecations.ts)@navikt/core/react/src/index.tsand@navikt/core/react/package.json)@navikt/core/css/index.css)<Component>: <gitmoji?> <Text>.E.g. "Button: ✨ Add feature xyz.")