feat(card): css changes and data attrs #2398

Barsnes · 2024-09-10T10:42:37Z

part of #2295

changeset-bot · 2024-09-10T10:42:40Z

🦋 Changeset detected

Latest commit: e4ebd5e

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-10T10:42:53Z

Preview deployments for this pull request:

📖 Storybook 16. Sep 2024 - 11:59 (Norwegian time)

github-actions · 2024-09-10T10:43:59Z

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	63.71%	4583 / 7193
🔵	Statements	63.71%	4583 / 7193
🔵	Functions	86.11%	155 / 180
🔵	Branches	75.8%	586 / 773

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
packages/react/src/components/Card/Card.tsx	100%	25%	100%	100%

Generated in workflow #316

github-actions · 2024-09-10T10:45:12Z

Preview deployments

Theme 16. Sep 2024 - 08:47 (Norwegian time)

eirikbacker

nice work 👍 La inn et par comments, men er kanskje ikke veldig viktig - vi må se litt mer på Card i forbindelse med UU; kan være card som lenke ikke nødvendigvis skal være en komponent, men heller ha lenken alltid inni og utvide klikkflate med onClick (se gjerne mer på https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html) - det må vi diskutere i gruppa i forbindelse med #2355

packages/css/card.css

eirikbacker · 2024-09-12T06:14:07Z

packages/css/card.css

+  .ds-card__header h4,
+  .ds-card__header h5,
+  .ds-card__header h6 {
+    color: inherit;


Kanskje noen jeg ikke har fått med meg - hvorfor trenger vi å sette color: inherit på disse? 😇

Sjå kommentar under for svar. #2398 (comment)

eirikbacker · 2024-09-12T06:14:28Z

packages/css/card.css

+    & h3,
+    & h4,
+    & h5,
+    & h6 {


Skulle vi heller gjort & :is(h1,h2,h3,h4,h5,h6)? 😊
og hvorfor setter vi color på heading - arver ikke den farge? 😇

Me setter farge slik at den blir konsekvent rett i forhold til fargen kortet har. Jo den arver farge, men vår Heading komponent setter også farge til --ds-color-neutral-text-default, som då blir satt om me ikkje setter farge her.

Ah, hvorfor setter Heading farge? Kan det være litt vanskelig å sette en heading på en flate også arver den ikke currentcolor? Burde vi snakke med design om dette? :)

Gjerne ta det med design, føler ikkje det er eit valg me i kode skal ta.

Tenker det har litt med kode å gjøre fordi det setter føringer for å kunne gjenbrukbare komponenter inni flater - jeg poster en diskusjon om dette her: https://designsystemet.slack.com/archives/C05U1MNKYCX/p1726480465469179

Okei. Avventer endringa til me får svar der.

Tenker vi kan endre på det senere - kanskje bare merge denne nå først så lager jeg eget issue med color: inherit på typografi-komponenter ☺️

packages/css/card.css

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] ### 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/[email protected] ### 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/[email protected] ## @digdir/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

feat(card): css changes and data attrs

8506dbf

Create witty-clouds-judge.md

0bcd207

Barsnes mentioned this pull request Sep 10, 2024

Preparations for CSS-package #2295

Closed

Barsnes added 2 commits September 11, 2024 12:57

nest more css

821027a

Merge branch 'next' into css/card

9533618

Barsnes marked this pull request as ready for review September 11, 2024 11:03

Barsnes requested review from mimarz and eirikbacker as code owners September 11, 2024 11:03

eirikbacker reviewed Sep 12, 2024

View reviewed changes

eirikbacker and others added 3 commits September 13, 2024 10:15

Merge branch 'next' into css/card

7f2c489

media hover

2f0294e

:any-link

e4ebd5e

eirikbacker self-requested a review September 16, 2024 11:21

eirikbacker approved these changes Sep 16, 2024

View reviewed changes

Barsnes merged commit 54d3037 into next Sep 16, 2024
5 checks passed

Barsnes deleted the css/card branch September 16, 2024 11:23

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

chore: new release candidate (next) #2361

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(card): css changes and data attrs #2398

feat(card): css changes and data attrs #2398

Barsnes commented Sep 10, 2024

changeset-bot bot commented Sep 10, 2024 •

edited

Loading

github-actions bot commented Sep 10, 2024 •

edited

Loading

github-actions bot commented Sep 10, 2024 •

edited

Loading

github-actions bot commented Sep 10, 2024 •

edited

Loading

eirikbacker left a comment

eirikbacker Sep 12, 2024

Barsnes Sep 16, 2024

eirikbacker Sep 12, 2024

Barsnes Sep 16, 2024

eirikbacker Sep 16, 2024

Barsnes Sep 16, 2024

eirikbacker Sep 16, 2024

Barsnes Sep 16, 2024

eirikbacker Sep 16, 2024

feat(card): css changes and data attrs #2398

feat(card): css changes and data attrs #2398

Conversation

Barsnes commented Sep 10, 2024

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

🦋 Changeset detected

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

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

Coverage Report

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

Preview deployments

eirikbacker left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

changeset-bot bot commented Sep 10, 2024 •

edited

Loading

github-actions bot commented Sep 10, 2024 •

edited

Loading

github-actions bot commented Sep 10, 2024 •

edited

Loading

github-actions bot commented Sep 10, 2024 •

edited

Loading