Table #1437
Table #1437
Conversation
🦋 Changeset detectedLatest commit: ab7feb0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
There was a problem hiding this comment.
Vi kanskje burde legge til støtte for table <caption>? https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/caption
gabrielwallin
force-pushed
the
table
branch
from
29eb3f2 to
1ed6963
Compare
| <ChevronRight className="mt-0.25 h-6 w-full text-black " /> | ||
| </div> | ||
| } | ||
| <ScrollButton |
There was a problem hiding this comment.
Skulle inte detta vara en egen PR?
packages/react/src/table/table.tsx
Outdated
| }); | ||
|
|
||
| // Context for sharing table variant with child components | ||
| const TableContext = createContext<{ variant: 'default' | 'zebra' }>({ |
There was a problem hiding this comment.
Vi behöver inte Context här, det kommer bara att dra ner performance. Vi kan lösa det med ett data-attribut och tailwind istället. Ska funka med group-data-*.
| type TableColumnProps as UNSAFE_TableColumnProps, | ||
| type TableHeaderProps as UNSAFE_TableHeaderProps, | ||
| type TableProps as UNSAFE_TableProps, | ||
| type TableRowProps as UNSAFE_TableRowProps, |
There was a problem hiding this comment.
Vi må lage en enkel TableCaption her og som vi kan eksportere
packages/react/src/table/table.tsx
Outdated
| {/* Screen reader live region for scroll announcements */} | ||
| <div aria-live="polite" aria-atomic="true" className="sr-only"> | ||
| {scrollPosition === 'start' && 'Tabell ved start'} | ||
| {scrollPosition === 'middle' && | ||
| 'Tabell scrollet, mer innhold tilgjengelig i begge retninger'} | ||
| {scrollPosition === 'end' && 'Tabell ved slutt'} | ||
| </div> |
There was a problem hiding this comment.
@oscarcarlstrom noen tanker på språk her? Blir feil å bruke norsk når dette kan vises på svenske sider
There was a problem hiding this comment.
Ja det ville blitt feil, enig i det. Men dette aria-live-patternet trenger vi ikke, så alt det kan fjernes. Skjermlesere scroller jo ikke, de bare leser DOM-en. Så gir ikke mening å drive å fortelle skjermleser-brukere alt dette her. De vil klare å navigere basert på at dette er en <table> i HTML-en 😅
…rom exporting to users
3 participants
This pull request introduces a new, accessible table component system to the React package, providing a set of composable table primitives with built-in horizontal scrolling, keyboard navigation, and WCAG compliance. The changes include the implementation of the table components, their export from the package, and comprehensive Storybook stories demonstrating usage and features.
We use the same composition as in other grunnmuren-components, where the user "builds their own table", and the children are the cells.
Uses the same scrolling and responsiveness as Tabs!
Screen.Recording.2025-09-29.at.13.37.31.mov