feat(badge): css changes and data attrs #2391

Barsnes · 2024-09-09T06:32:57Z

part of #2295

changeset-bot · 2024-09-09T06:33:01Z

🦋 Changeset detected

Latest commit: 3f5c590

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@digdir/designsystemet-css	Patch
@digdir/designsystemet-react	Patch
@digdir/designsystemet	Patch
@digdir/designsystemet-theme	Patch

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

github-actions · 2024-09-09T06:33:14Z

Preview deployments for this pull request:

📖 Storybook 12. Sep 2024 - 08:22 (Norwegian time)

See all deployments at https://dev.designsystemet.no

github-actions · 2024-09-09T06:34:11Z

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	63.99%	4657 / 7277
🔵	Statements	63.99%	4657 / 7277
🔵	Functions	84.61%	143 / 169
🔵	Branches	75.66%	594 / 785

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
packages/react/src/components/Badge/Badge.tsx	27.65%	100%	100%	27.65%	69-97, 99-102, 104

Generated in workflow #246

github-actions · 2024-09-09T06:35:32Z

Preview deployments

Theme 12. Sep 2024 - 08:23 (Norwegian time)

eirikbacker · 2024-09-09T08:29:47Z

packages/css/badge.css

+  &[data-placement='bottom-left'][data-overlap='circle'] {
+    bottom: 14%;
+    left: 14%;
+    transform: translateX(-50%) translateY(50%);


Should we use the new CSS syntax? ☺️

Suggested change

transform: translateX(-50%) translateY(50%);

translate: -50% 50%;

PS: by always using left+top (instead of right+bottom, i.e. right: 0 === left: 100%) we can simplify and always use translate: -50% -50% instead of changing this property for each placement :)

I feel it's more readable to explicitly write X/Y. Is there any benefits do doing it shorthand?

PS: by always using left+top (instead of right+bottom, i.e. right: 0 === left: 100%) we can simplify and always use translate: -50% -50% instead of changing this property for each placement :)

don't have anything against this, except that doing the actual two sides for positioning feels better to me..? :P
So when the placement is top-left, we actually change top and left

I feel it's more readable to explicitly write X/Y. Is there any benefits do doing it shorthand?

By using translate directly, we enable using rotate, scale, transform independently, while using transform groups all these properties in one declaration, making it harder to do separate transforms. translate is actually the full version while transform is more of a shorthand as it nulls out the others (and can cause unwanted issues if not being aware of value order). In this particular scenario it does not make much difference, but my experience it is just better to use individual transform properties as a default ☺️
More info: https://web.dev/articles/css-individual-transform-properties

PS: by always using left+top (instead of right+bottom, i.e. right: 0 === left: 100%) we can simplify and always use translate: -50% -50% instead of changing this property for each placement :)

don't have anything against this, except that doing the actual two sides for positioning feels better to me..? :P So when the placement is top-left, we actually change top and left

No strong feelings, just a suggestion to simplify by not needing to change translate ☺️

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/designsystemet-css@1.0.0-next.33 ### Patch Changes - Pagination: Use data attrs instead of class names ([#2395](#2395)) - Badge: Style using css attributes ([#2391](#2391)) - TableHeaderCell: Remove `sortable` prop, `sort` now handles this ([#2393](#2393)) - dropdownmenu: Style using data attributes ([#2387](#2387)) - Chip: Text color is now `accent` ([#2371](#2371)) - List: Remove `List.Root` and `List.Heading`, which changes API ([#2348](#2348)) - Alert, Avatar, Button, Divider, Link: Use data-attributes for variant, size and color and move icons to CSS ([#2313](#2313)) - Box: Remove component ([#2372](#2372)) - Popover: ([#2369](#2369)) - Rename `<Popover.Root>` to `<Popover.Context>` - use Popover API, allowing `<Popover>` to be used without `Popover.Context` - Remove `portal` prop - Tooltip: Only expose background css variable ([#2389](#2389)) - Switch: don't show check when not checked in readonly ([#2377](#2377)) - Select: Rename from `NativeSelect` ([#2404](#2404)) - Accordion: Now uses details and summary HTML elements ([`5d1c5062b526e6829c322ce66c6df08568bb9f63`](5d1c506)) - Spinner: Style using data attributes ([#2390](#2390)) - Avatar: new component ([#2312](#2312)) - Tag: Make neutral default color in CSS ([#2397](#2397)) - Card: Use data attrs ([#2398](#2398)) ## @digdir/designsystemet-react@1.0.0-next.33 ### Patch Changes - Pagination: Use data attrs instead of class names ([#2395](#2395)) - Badge: Style using css attributes ([#2391](#2391)) - TableHeaderCell: Remove `sortable` prop, `sort` now handles this ([#2393](#2393)) - dropdownmenu: Style using data attributes ([#2387](#2387)) - List: Remove `List.Root` and `List.Heading`, which changes API ([#2348](#2348)) - Alert, Avatar, Button, Divider, Link: Use data-attributes for variant, size and color and move icons to CSS ([#2313](#2313)) - Box: Remove component ([#2372](#2372)) - Popover: ([#2369](#2369)) - Rename `<Popover.Root>` to `<Popover.Context>` - use Popover API, allowing `<Popover>` to be used without `Popover.Context` - Remove `portal` prop - Select: Rename from `NativeSelect` ([#2404](#2404)) - Table: Set sort button type to prevent form submit ([#2402](#2402)) - Heading: default level is now 2 ([#2378](#2378)) - Select: ([#2415](#2415)) - Add Select.Option and Select.Optgroup compond components - Remove `multiple` prop - Accordion: Now uses details and summary HTML elements ([`5d1c5062b526e6829c322ce66c6df08568bb9f63`](5d1c506)) - Spinner: Style using data attributes ([#2390](#2390)) - Avatar: new component ([#2312](#2312)) - Tag: Make neutral default color in CSS ([#2397](#2397)) - Card: Use data attrs ([#2398](#2398)) - Combobox: fix virtual combobox having large gap between items ([#2376](#2376)) ## @digdir/designsystemet@1.0.0-next.33 ## @digdir/designsystemet-theme@1.0.0-next.33 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

part of #2295 --------- Co-authored-by: Eirik Backer <eirik.backer@gmail.com>

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/designsystemet-css@1.0.0-next.33 ### Patch Changes - Pagination: Use data attrs instead of class names ([#2395](#2395)) - Badge: Style using css attributes ([#2391](#2391)) - TableHeaderCell: Remove `sortable` prop, `sort` now handles this ([#2393](#2393)) - dropdownmenu: Style using data attributes ([#2387](#2387)) - Chip: Text color is now `accent` ([#2371](#2371)) - List: Remove `List.Root` and `List.Heading`, which changes API ([#2348](#2348)) - Alert, Avatar, Button, Divider, Link: Use data-attributes for variant, size and color and move icons to CSS ([#2313](#2313)) - Box: Remove component ([#2372](#2372)) - Popover: ([#2369](#2369)) - Rename `<Popover.Root>` to `<Popover.Context>` - use Popover API, allowing `<Popover>` to be used without `Popover.Context` - Remove `portal` prop - Tooltip: Only expose background css variable ([#2389](#2389)) - Switch: don't show check when not checked in readonly ([#2377](#2377)) - Select: Rename from `NativeSelect` ([#2404](#2404)) - Accordion: Now uses details and summary HTML elements ([`5d1c5062b526e6829c322ce66c6df08568bb9f63`](5d1c506)) - Spinner: Style using data attributes ([#2390](#2390)) - Avatar: new component ([#2312](#2312)) - Tag: Make neutral default color in CSS ([#2397](#2397)) - Card: Use data attrs ([#2398](#2398)) ## @digdir/designsystemet-react@1.0.0-next.33 ### Patch Changes - Pagination: Use data attrs instead of class names ([#2395](#2395)) - Badge: Style using css attributes ([#2391](#2391)) - TableHeaderCell: Remove `sortable` prop, `sort` now handles this ([#2393](#2393)) - dropdownmenu: Style using data attributes ([#2387](#2387)) - List: Remove `List.Root` and `List.Heading`, which changes API ([#2348](#2348)) - Alert, Avatar, Button, Divider, Link: Use data-attributes for variant, size and color and move icons to CSS ([#2313](#2313)) - Box: Remove component ([#2372](#2372)) - Popover: ([#2369](#2369)) - Rename `<Popover.Root>` to `<Popover.Context>` - use Popover API, allowing `<Popover>` to be used without `Popover.Context` - Remove `portal` prop - Select: Rename from `NativeSelect` ([#2404](#2404)) - Table: Set sort button type to prevent form submit ([#2402](#2402)) - Heading: default level is now 2 ([#2378](#2378)) - Select: ([#2415](#2415)) - Add Select.Option and Select.Optgroup compond components - Remove `multiple` prop - Accordion: Now uses details and summary HTML elements ([`5d1c5062b526e6829c322ce66c6df08568bb9f63`](5d1c506)) - Spinner: Style using data attributes ([#2390](#2390)) - Avatar: new component ([#2312](#2312)) - Tag: Make neutral default color in CSS ([#2397](#2397)) - Card: Use data attrs ([#2398](#2398)) - Combobox: fix virtual combobox having large gap between items ([#2376](#2376)) ## @digdir/designsystemet@1.0.0-next.33 ## @digdir/designsystemet-theme@1.0.0-next.33 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

feat(badge): css changes and data attrs

6e38053

Barsnes added 2 commits September 9, 2024 08:37

more updates

9bef173

Create chilled-pumas-march.md

7006916

Barsnes marked this pull request as ready for review September 9, 2024 06:41

Barsnes requested review from mimarz and eirikbacker as code owners September 9, 2024 06:41

remove default accent

07760fc

eirikbacker reviewed Sep 9, 2024

View reviewed changes

Barsnes mentioned this pull request Sep 10, 2024

Preparations for CSS-package #2295

Closed

eirikbacker self-requested a review September 11, 2024 18:09

eirikbacker approved these changes Sep 11, 2024

View reviewed changes

Merge branch 'next' into css/badge

3f5c590

mimarz merged commit a0b119d into next Sep 13, 2024
6 checks passed

mimarz deleted the css/badge branch September 13, 2024 08:15

github-actions bot mentioned this pull request Sep 13, 2024

chore: new release candidate (next) #2361

Merged

mimarz pushed a commit that referenced this pull request Feb 21, 2025

feat(badge): css changes and data attrs (#2391)

1cd30d8

part of #2295 --------- Co-authored-by: Eirik Backer <eirik.backer@gmail.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(badge): css changes and data attrs #2391

feat(badge): css changes and data attrs #2391

Barsnes commented Sep 9, 2024

changeset-bot bot commented Sep 9, 2024 •

edited

Loading

github-actions bot commented Sep 9, 2024 •

edited

Loading

github-actions bot commented Sep 9, 2024 •

edited

Loading

github-actions bot commented Sep 9, 2024 •

edited

Loading

eirikbacker Sep 9, 2024

eirikbacker Sep 9, 2024

Barsnes Sep 10, 2024

Barsnes Sep 10, 2024

eirikbacker Sep 10, 2024

eirikbacker Sep 10, 2024

	transform: translateX(-50%) translateY(50%);
	translate: -50% 50%;

feat(badge): css changes and data attrs #2391

feat(badge): css changes and data attrs #2391

Conversation

Barsnes commented Sep 9, 2024

changeset-bot bot commented Sep 9, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Sep 9, 2024 • edited Loading

github-actions bot commented Sep 9, 2024 • edited Loading

Coverage Report

github-actions bot commented Sep 9, 2024 • edited Loading

Preview deployments

eirikbacker Sep 9, 2024

Choose a reason for hiding this comment

eirikbacker Sep 9, 2024

Choose a reason for hiding this comment

Barsnes Sep 10, 2024

Choose a reason for hiding this comment

Barsnes Sep 10, 2024

Choose a reason for hiding this comment

eirikbacker Sep 10, 2024

Choose a reason for hiding this comment

eirikbacker Sep 10, 2024

Choose a reason for hiding this comment

changeset-bot bot commented Sep 9, 2024 •

edited

Loading

github-actions bot commented Sep 9, 2024 •

edited

Loading

github-actions bot commented Sep 9, 2024 •

edited

Loading

github-actions bot commented Sep 9, 2024 •

edited

Loading