Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ Textarea: Støtte for automatisk scrollbar #2457

Merged
merged 16 commits into from
Nov 22, 2023

Conversation

HalvorHaugan
Copy link
Contributor

@HalvorHaugan HalvorHaugan commented Nov 6, 2023

https://github.com/navikt/team-aksel/issues/332
#2298

Legger til støtte for "automatisk scrollbar", dvs. at tekstboksen slutter å vokse når det ikke er mer plass, og heller får scrollbar.

Copy link

changeset-bot bot commented Nov 6, 2023

🦋 Changeset detected

Latest commit: d9877cd

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

This PR includes changesets to release 7 packages
Name Type
@navikt/ds-react Minor
@navikt/ds-css Minor
@navikt/aksel-stylelint Minor
@navikt/aksel Minor
@navikt/ds-tokens Minor
@navikt/ds-tailwind Minor
@navikt/aksel-icons Minor

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

Copy link
Contributor

github-actions bot commented Nov 6, 2023

Storybook demo

Endringer til review: 2

090159569 | 61 komponenter | 399 stories

@larseirikhansen
Copy link
Contributor

Skal antall tegn vises når text area er disabled? Eller kan det bli frustrerende siden man ikke kan gjøre noe med det? 🤔

Screenshot 2023-11-08 at 10 40 10

@HalvorHaugan HalvorHaugan marked this pull request as ready for review November 16, 2023 08:59
@KenAJoh
Copy link
Collaborator

KenAJoh commented Nov 16, 2023

Ser ut som scrollbar blir satt på textarea selv om den ikke har nådd bunnen. Hender bare når textarea er ~50% på vei til bunnen. Skjer også noe "flikker" der textarea hopper litt rundt 12-13s når man scroller opp + sletter en linje
https://github.com/navikt/aksel/assets/26967723/04ee49a9-c639-4488-a39d-13e2a59724bc

@HalvorHaugan HalvorHaugan marked this pull request as draft November 16, 2023 15:46
@HalvorHaugan HalvorHaugan changed the title ✨ Textarea: Teller flyttet ut, støtte for automatisk scrollbar ✨ Textarea: Støtte for automatisk scrollbar Nov 16, 2023
@HalvorHaugan
Copy link
Contributor Author

Mulige løsninger:

  1. overflow-y: scroll (stygt?)
  2. scrollbar-gutter: stable (ser rart ut, ser ut som det er ekstra høyre padding?)
  3. Gjøre slik at TextareaAutosize utvider feltet tilsvarende 1 linje mer enn nødvendig (synes det ser buggy ut, føles som det faktisk er et ekstra linjeskift der)
  4. Sette overflow-y: scroll på shadow-textarea. Ser greit ut de par første linjene, men jo mer du skriver, jo mer "off" blir shadow-textarea, så jo tidligere utvider feltet seg (for tidlig). Det er det som skjer på https://navikt.github.io/arbeidsrettet-dialog/

Prøvde å wrappe textarea med en div og flytte scroll dit, men det gir problemer med resize, og sikkert andre problemer jeg ikke har oppdaget også.

@HalvorHaugan HalvorHaugan marked this pull request as ready for review November 20, 2023 10:38
@navikt/core/css/form/textarea.css Outdated Show resolved Hide resolved
@navikt/core/react/src/form/Textarea.tsx Outdated Show resolved Hide resolved
JulianNymark
JulianNymark previously approved these changes Nov 21, 2023
export const AutoScrollbar = (props) => (
<div
style={{
border: "1px solid lightGreen",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

siden dette er for devs er det vel greit å beholde sterke visual indicators som lightGreen 👍

@HalvorHaugan HalvorHaugan merged commit 16cad26 into main Nov 22, 2023
2 checks passed
@HalvorHaugan HalvorHaugan deleted the textarea-autoscrollbar branch November 22, 2023 14:15
@github-actions github-actions bot mentioned this pull request Nov 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants