fix(nve-switch): fikse bryter med riktig størrelsen pa mobil + en del funksj - #962
Open
amish1188 wants to merge 1 commit into
Open
fix(nve-switch): fikse bryter med riktig størrelsen pa mobil + en del funksj#962amish1188 wants to merge 1 commit into
amish1188 wants to merge 1 commit into
Conversation
amish1188
requested review from
NVEJoel,
gruble,
lisamarimyreneNVE,
malingranlynve and
tomapedersen
as code owners
August 23, 2026 09:31
Contributor
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-962.westeurope.5.azurestaticapps.net |
There was a problem hiding this comment.
Pull request overview
Denne PR-en oppdaterer nve-switch for å vises korrekt på smale skjermer (Issue #625) og forenkler implementasjonen ved å lene seg mer på native checkbox-atferd. Endringene omfatter både komponentkode, styling, tester og dokumentasjon.
Changes:
- Rework av switch-styling (nye CSS-variabler, justert layout/hover/fokus, ny thumb-anim) for bedre mobilvisning.
- Forenklet komponentlogikk: fjernet flere interne event handlers og synk-logikk, og håndterer nå state via native
change. - Oppdatert tester og docs i tråd med ny DOM-/klasse-struktur, samt mindre repo-opprydding i
.gitignore.
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
src/components/nve-switch/nve-switch.component.ts |
Forenkler event-/state-håndtering og oppdaterer struktur/parts/classes. |
src/components/nve-switch/nve-switch.styles.ts |
Ny sizing-/layoutmodell med CSS-variabler og oppdatert hover/fokus/checked-stiler. |
src/components/nve-switch/nve-switch.test.ts |
Oppdaterer selektorer/forventninger til ny DOM og klassenavn. |
doc-site/components/nve-switch.md |
Utvider og oppdaterer dokumentasjon og tilgjengelighetsråd. |
.gitignore |
Rydder og ignorerer custom-elements-manifest.mjs. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| @state() private hasFocus = false; | ||
| @property() title = ''; // make reactive to pass through | ||
|
|
||
| @property({ type: String }) testId: string = ''; |
Comment on lines
+52
to
+58
| this.dispatchEvent( | ||
| new CustomEvent('change', { | ||
| bubbles: true, | ||
| composed: true, | ||
| detail: { value: this.value }, //usikker om vi trenger value her | ||
| }) | ||
| ); |
Comment on lines
63
to
+66
| .switch__thumb { | ||
| content: ''; | ||
| position: absolute; | ||
| left: var(--left); | ||
| height: 18px; | ||
| width: 18px; | ||
| border-radius: 2rem; | ||
| translate: var(--hover-offset, 0); | ||
| z-index: 1; | ||
| background-color: var(--thumb-color); | ||
| left: var(--thumb-offset); |
| expect(label?.classList.contains('switch__label--start')).toBe(false); | ||
| }); | ||
|
|
||
| it('should apply switch--label-start class when label-position="start"', async () => { |
| ## Retningslinjer | ||
|
|
||
| - Gi alltid en tydelig <span class="highlight">label</span>. | ||
| - Ikke endre <span class="highlight">label</span> basert på bryterens tilstand. Labelen skal beskrive hva bryteren styrer, ikke hvilken handling som utføres. Bruk for eksempel «Vis info som fast label i stedet for å bytte mellom «Vis info og «Skjul info. |
Comment on lines
+85
to
+90
| .switch__input:not(:disabled) + .switch__control:hover { | ||
| background-color: var(--control-background-hover); | ||
| } | ||
|
|
||
| .switch input[type='checkbox'] { | ||
| clip: rect(0, 0, 0, 0); | ||
| position: absolute; | ||
| .switch__input:checked:not(:disabled) + .switch__control:hover { | ||
| background-color: var(--control-background-checked-hover); |
This file contains hidden or 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
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.
Fikser issue #625
Jeg oppdaterer bryteren slik at den vises riktig på små skjermer.
I tillegg har jeg forenklet koden litt. Har fjernet funksjonalitet som ikke trengs, som de fleste hendelseshåndtererne.
Har fjernet animasjonen på hover. Syns den ikke var så bra, men hvis folk er uenige, kan vi ta den tilbake.