Comments (9)
Everything in generatedFromCss
is transpilled from the reference CSS stylesheet.
The class fr-sidemenu__item--active
not beeing present means that the official documentation is out of date and that it's something else that makes the item selected: aria-current="page"
on the child.
from react-dsfr.
Hello @gary-van-woerkens,
Thank you for your effort,
Please take a look at how the menu is already implemented, it should and must be consistent with how the side menu works.
https://github.com/codegouvfr/react-dsfr/blob/main/src/MainNavigation/MainNavigation.tsx
from react-dsfr.
I would say that it should be handled by a property, eg active
prop, to keep dsfr naming which would be a boolean?
from react-dsfr.
Question
There is a class to add to the selected menu item: fr-sidemenu__item--active
.
I guess that the position of this class is related to something external to the SideMenu itself, as the app routing.
Any suggestion about the implementation of the item selection logic ?
from react-dsfr.
Yes, let's put isActive
just to be consistent with whay we already do in the menu.
The only place we don't use a is|do|will|has
prefix is for level 0 component props because.
<Foo active />
make more sence than <Foo isActive />
.
Even if it's always possible to write <Foo isActive={true} />
, it's less webby.
from react-dsfr.
I get the following error:
src/SideMenu.tsx:60:85 - error TS2345: Argument of type '{ "fr-sidemenu__item--active": boolean; }' is not assignable to parameter of type 'FrCxArg'.
Object literal may only specify known properties, and '"fr-sidemenu__item--active"' does not exist in type 'Partial<Record<FrClassName, boolean | null | undefined>> | readonly FrCxArg[]'.
60 <li key={i} className={fr.cx("fr-sidemenu__item", { "fr-sidemenu__item--active": isActive })}>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[6:00:42 PM] Found 1 error. Watching for file changes.
Should I add somehow fr-sidemenu__item--active
to the list of allowed classes listed in src/fr/generatedFromCss/classNames.ts
?
from react-dsfr.
from react-dsfr.
I just can't manage to make the Vite example work without having TS cursing me 😕
Here is a PR that shows the example implementation:
gary-van-woerkens#1
from react-dsfr.
SideMenu component has been merged. Closing the issue.
Thank you for your help guys!
from react-dsfr.
Related Issues (20)
- Composant MainNavigation - Mega menu - Bouton Fermer HOT 1
- Composant Checkbox : Si plusieurs options séléctionnées, seule la dernière est enregistrée dans le state du form. HOT 2
- Apparition de bordures sur les tableaux dans la version 1.9.20 HOT 4
- warning dans le composant Select HOT 5
- Update Table component
- Button: Police non Marianne quand icone remix icone utilisée HOT 10
- Accordion: when I open it, I only see part of its content. HOT 8
- PasswordInput + DSFR JS = 💔 HOT 4
- Régression style fr-input HOT 3
- Composant Modal - Typage retour fonction createModal HOT 2
- SelectNext n'accepte pas d'option avec une value vide HOT 12
- Pas d'affichage quand checkbox sans label HOT 16
- SideMenu expandedByDefault n'est pas respecté HOT 3
- Card: feat lazy loading des images HOT 1
- Probleme dans l'utilisation du Header HOT 6
- Soucis avec les scripts de copie d'assets HOT 5
- Couleur manquante sur les boutons HOT 2
- Display toggle switch when label is null or empty HOT 1
- Problème svg lors des tests jest HOT 2
- Typo dans le titre du repo s/Frech/French HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-dsfr.