feat: manon sass #842

HeleenSG · 2025-07-09T09:29:29Z

Implements a version where we use sass variables instead of css custom properties.

Todo (before merging to main

#996

Snelstart: Testen (Rieven)
Tutorial: Voorbeelden updaten (Heleen)
Nota bene: "@use "@minvws/manon/text/nota-bene-variables";" weg (chekcen Heleen)
Dropdown button: Testen en kijken waar we staan. Styling lijkt te missen (Rieven)
Collapsible (Rieven)
Fieldset horizontal: Fieldset horizontal behaviour isn't working (Heleen)

Iconen

Icoonknoppen zonder achtergrond
Icoonknoppen zonder achtergrond: Hebben wel een achtergrond. Testen en kijken waar we staan.
Icons (mixin) opruimen
Help: Icoon en uitlijning

Todo:

Tabs

Overflow styling / behaviour
Tabpanel styling (if any)
Nice to have:
- Configurable activation mode (e.g. <manon-tabs activation="manual">)
- window.location awareness (update when switching, initially selected tab on load)
- Asynchronous content loading (support in JS? or just documentation?)

Button
Knoppen (basisweergave)
Call to action button

Introductietekst mist

Breadcrumbs

Titels niet consistent
Introductie mist. Is nu enkel "Breadcrumb navigatie"
"Breadcrumb-navigatie verteld de gebruiker waar hij zich bevind binnen de applicatie. Hiermee kan de gebruiker de weg terugvinden en sneller navigeren."
Plaatsing in de html beschrijven

Designvragen

Sidemenu voor componenten en utility classes ipv toc
Sidebar is niet sticky
Bij componenten link naar figma toevoegen?

Destructief

Bijbehorende bestanden weg
Instelbare variabelen weg
Gerelateerde pagina's weg
Disabled voorbeeld weg

Description list

Styling mist (Checken of het al gedaan is, Heleen)

Card

Titel inconsistent
Styling mist

Logo

Styling mist
Visueel voorbeeld mist
Bijbehorende bestanden weg
Quickstart toevoegen

Terug naar hoofdmenu knop

Styling
Bijbehorende bestanden weg
Quickstart toevoegen

Overkoepelend

Nice to have: copy icoon bij voorbeelden
Spacing fixen
Sidemenu nalopen op alle pagina's en gelijk trekken qua content (in ieder geval voor de componenten?)
Disabled states weghalen (is een ticket voor. Heleen)
Remove mixins that will become obsolete

Icoonknoppen

Button base > button
Testen en kijken waar we staan.

Breaking changes

Usage of sass variables instead of css variables. If you reference Manon CSS variables they will no longer exist. Use the new sass variables instead.

Layout

Header, content wrapper now uses a class content-wrapper on the div or section. This is added to prevent css to be implemented too broadly.

Components

Simplified styling options for table head. From now on all styling done on table-head and table-head-cell will be added as styling to table-head. For example: $table-head-cell-padding is now $table-head-padding.
label and input are now wrapped in a
to be able to define spacing.
Form help now uses a class to determine the parent to which the button is aligned. Define the parent by adding the class "help-container". Alignment is now set on the selected parent instead of the entire form.

Renamed

"horizontal-center" to "horizontal-centered" to be in line with "centered".
"form-input-color" to "color-picker" and merged "form-input-color-filled" into "color-picker.
button-ghost to button-secondary
breadcrumb-content-block* to breadcrumb-bar-content-wrapper

Removed "base" from component names such as "button-base" simplified now to "button".

form-base to form
form-required-base to form-required
button-base to button
application-base to base
list-base to list
Message-counter-base to message-counter
"centered-view". Use "centered" instead.
"form-radio". Use "radio" instead.
"horizontal-view" to "horizontal"
"fity-fifty". Use columns (column-2) instead

Removed

"footer-one-third-two-thirds". Use the utility layout classes instead.
layout div and layout div-content-wrapper. Use main, section or article instead.
layout-authentication use container-s, container-m or container-l instead.
layout-form use container-s, container-m or container-l instead.
layout-set. Shared layout values can be set per theme.
Color schemes have been moved out of Manon and can be added separate per theme.
Colors:
- bg-color-offset
- critical-informational
- notification-colors
- finn (large, medium and small)
- spot (large, medium and small)

Merged

Merged content wrapper styling options in with their parent component. And added the class content-wrapper to the target element. This to prevent too many separate files to include.

article-content-wrapper merged with article
main-content-wrapper merged wit main
section-content-wrapper merged with section
breadcrumb-bar-content-wrapper merged with breadcrumb-bar

Solves

#421 (for footer)
#186

… css variables.

Refactor manon-sass file structure

This reverts commit 80c7222.

* build: ignore empty fragment URLs * build: don't ignore missing IDs * chore: update placeholder fragment URLs

…1048)

* chore(deps): add Testing Library * feat: interactive tabs component * chore: add description to initTab's jsdoc Co-authored-by: JP Bruins Slot <[email protected]> * refactor: initTab Co-authored-by: JP Bruins Slot <[email protected]> * chore: add description to handleClick's jsdoc Co-authored-by: JP Bruins Slot <[email protected]> * chore: add description to handleKeyDown's jsdoc Co-authored-by: JP Bruins Slot <[email protected]> * chore: add description to setActiveTab's jsdoc Co-authored-by: JP Bruins Slot <[email protected]> * chore: make jest-dom matcher types available to typescript * fix: support tabs with inner element * fix: perform DOM setup in connectedCallback instead of constructor * chore: run formatter * docs: update tabs documentation * chore: move JS tests to manon/tests/ alongside sass tests * chore: add dev dependency @types/node * fix: docs js import syntax error --------- Co-authored-by: JP Bruins Slot <[email protected]>

…1064)

# Conflicts: # examples/sass-cli/package.json # pnpm-lock.yaml

…#1065) * docs: remove {base} from the markdown files in `docs` * docs: add `remarkLinks` plugin to rewrite `<a>` tags in markdown files * docs: replace `{base}` placeholder with absolute paths in markdown files * docs: update comments in `remarkLinks` * docs: fix indentation in navigation component example code

* Fixes sticky table header and dolor set to dolor sit * fixing overcorrection * style: remove trailing whitespace in `table-sticky-header.scss` * style: fix indentation in navigation component example code --------- Co-authored-by: Randhir Gulraj <[email protected]>

sonarqubecloud · 2025-09-29T14:57:12Z

Quality Gate failed

Failed conditions
2 Security Hotspots
0.0% Coverage on New Code (required ≥ 80%)
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

HeleenSG added 2 commits July 9, 2025 11:15

WIP starts to implement manon poc, based on sass variables instead of…

ca8c8b9

… css variables.

Clean up

72834fb

HeleenSG self-assigned this Jul 9, 2025

HeleenSG and others added 7 commits July 10, 2025 12:54

Updates readme

7a0abc6

Restructure

3ded814

Refactor button container (#846)

0c840d2

button to top refactor (#847)

4a2c33b

add styles for hero theme (#845)

36b27d6

Continues file structure refactor

d1be248

Provides working version after file structure refactor.

f242130

HeleenSG added the breaking change label Jul 11, 2025

jpbruinsslot and others added 16 commits July 11, 2025 14:10

Fix references

589f06a

Merge pull request #844 from minvws/refactor/manon-sass-filestructure

26992c6

Refactor manon-sass file structure

Moves all color schemes to a separate folder (#848)

cef76e2

Refactor card (#849)

99eff21

fix de-empasized

80c7222

Revert "fix de-empasized"

a36c1ec

This reverts commit 80c7222.

fix importa

f8036ee

fix disabled

04e9cb0

Refactor codeblock (#851)

ea32b38

Fix mixin reference

60c1135

fix de-empasized (#854)

01a5876

fix description-list (#855)

d8e26bb

Refactor Critical Informational Labels (#853)

e94c031

Refactor collapsible (#852)

6ef5914

Fix: mixin reference

1be4ebb

these files are transferred

ddbf006

Rieven force-pushed the feat/manon-sass branch from d02e436 to ddbf006 Compare July 14, 2025 11:19

jpbruinsslot and others added 2 commits July 14, 2025 13:50

Add not-null function to check if arguments are not null (#858)

14c8ad1

Removes unused files (#857)

3f4c7dd

ppvg and others added 29 commits September 11, 2025 18:39

chore: use empty fragment URLs for dummy links (#1047)

f4f5d69

* build: ignore empty fragment URLs * build: don't ignore missing IDs * chore: update placeholder fragment URLs

fix: remove ghost button (#1046)

97432bb

Updates nowrap documentation and adds notification paragraph to docs (#…

1f6c68b

…1048)

feat: Avatar documentation (#1049)

2c6f45f

feat: Slogan (#1050)

514692a

Adds introduction (#1051)

2013af5

fix: button container (#1052)

161dd2c

fix: Navigation fixes (#1045)

b4f1f15

fix: homepage fixes (#1056)

310f95f

Fixes linting issues. Disables specificity check (#1059)

4d8f664

fix: div default behaviour (#1060)

d5feaf3

feat: add documentation version links (#1054)

f9e1f47

fix: correct closing <a> tag in navigation component documentation (#…

17ebfe1

…1064)

fix: correct typo in navigation component example code

cc2679f

refactor: update examples (#1061)

6cea6e4

fix formatting issue

49cf2c0

Fix pagination alignment (#1067)

1fb1534

Merge branch 'main' into feat/manon-sass

81ab9dc

# Conflicts: # examples/sass-cli/package.json # pnpm-lock.yaml

chore: update dependencies and resolve versions in pnpm-lock.yaml

bde31c9

fix: fixes based on tests (#1074)

47e7fb2

Fix article styling (#1073)

aceaf62

fix: table components navigation and introductions (#1040)

431181c

Fix: Notifications intro's (#1068)

421fa39

Refactor tags colors (#1071)

331ae8e

fix: typography examples (#1076)

9ebe552

Removes old example (#1077)

eb7667a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: manon sass #842

feat: manon sass #842

HeleenSG commented Jul 9, 2025 •

edited

Loading

Uh oh!

sonarqubecloud bot commented Sep 29, 2025

Uh oh!

Uh oh!

feat: manon sass #842

Are you sure you want to change the base?

feat: manon sass #842

Conversation

HeleenSG commented Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Todo (before merging to main

Iconen

Todo:

Designvragen

Breaking changes

Layout

Components

Renamed

Removed

Merged

Solves

Uh oh!

sonarqubecloud bot commented Sep 29, 2025

Quality Gate failed

Uh oh!

Uh oh!

HeleenSG commented Jul 9, 2025 •

edited

Loading