feat(Badge): convert to two elements #2857
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
🦋 Changeset detectedLatest commit: 0c8bb24 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 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 |
|
Preview deployments for this pull request: Storybook - |
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||
eirikbacker
reviewed
Dec 3, 2024
mimarz
reviewed
Dec 6, 2024
Barsnes
changed the title
eirikbacker
reviewed
Dec 9, 2024
packages/css/src/badge.css
Outdated
|
|
||
| /* If placement is present, we are floating */ | ||
| &[data-placement]::before { | ||
| .ds-badge--placement { |
There was a problem hiding this comment.
Should this be renamed as well?
Suggested change
| .ds-badge--placement { | |
| .ds-badge--position { |
and, do we use .ds-badge--position or .ds-badge-position? 🤔
There was a problem hiding this comment.
hm yea this should be renamed. I think double dashes since it is an extension of .ds-badge 🤔
eirikbacker
reviewed
Dec 9, 2024
| <span | ||
| className={cl('ds-badge--placement', className)} | ||
| data-overlap={overlap} | ||
| data-placement={placement} |
There was a problem hiding this comment.
Suggested change
| data-placement={placement} | |
| data-position={position} |
There was a problem hiding this comment.
We still use placement as the prop. Are you suggesting to rename the data attr as well?
@mimarz wanted the component and prop to be different so it read easier
There was a problem hiding this comment.
I was thinking the data attr can still be placement. I was just the React component that could be called .Position.
mimarz
pushed a commit
that referenced
this pull request
Dec 13, 2024
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @digdir/[email protected] ### Minor Changes - Added option dry run using `--dry` on `tokens create` & `tokens build` ([#2884](#2884)) - `tokens create` now writes by default ([#2884](#2884)) - Changed `-w, --write` to `-o, --out-dir` on `tokens create` & `tokens build` for defining output dir ([#2884](#2884)) ## @digdir/[email protected] ### Patch Changes - Remove `neutral` color on `ValidationMessage` ([#2895](#2895)) - Added styling for Windows High Contrast mode and [forced-colors](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors) ([#2876](#2876)) - Badge: Convert to two elements, add `Badge.Position` component for placement ([#2857](#2857)) - Select: Add `width="auto"` option and default to full width ([#2894](#2894)) ## @digdir/[email protected] ### Patch Changes - Radio, Checkbox: Spread `className` and `style` on outermost element ([#2880](#2880)) - Badge: Convert to two elements, add `Badge.Position` component for placement ([#2857](#2857)) - `ValidationMessage` now uses the `p`-element ([#2895](#2895)) - Select: Add `width="auto"` option and default to full width ([#2894](#2894)) ## @digdir/[email protected] ### Patch Changes - Tweaked color codes. Visually remains the same ([#2854](#2854)) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
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.
resolves #2457
It will be rendered as a pseudo element to make sure size works.
If we put
data-sizedirectly on the badge, thefont-sizeset inbade.csson.ds-badgewill be ignored