Blocking CSS/Guideline issues documentatie site

nl-design-system / documentatie

Website met documentatie van NL Design system: componenten, patronen, richtlijnen etcetera. Development-versie: https://documentatie.vercel.app/

https://www.nldesignsystem.nl/

European Union Public License 1.2

10 stars 12 forks source link

Blocking CSS/Guideline issues documentatie site #439

Open Robbert opened 9 months ago

Robbert commented 9 months ago

Plaats hier

CSS problemen in nldesignsystem.nl, die niet makkelijk via de bestaande CSS zijn op te lossen.
Weergave problemen met de Guideline component

rianrietveld commented 9 months ago

@Robbert na de laaste grote update is de weergave van codevoorbeelden niet goed meer. In de custom.css had @Hidde styling toegevoegd voor losse code blokken bij de tekst.

Die refereren naar: code[class*="language-"] en pre[class*="language-"] Beide classes bestaan nu niet meer.

Zie bijvoorbeeld op: https://nldesignsystem.nl/richtlijnen/formulieren/alle-richtlijnen/labels/

screenshot van code, nu niet meer opgemaakt maar in zwart/wit

hidde commented 9 months ago

De classes zijn er nog maar de code wordt niet meer in tokens ingedeeld

rianrietveld commented 9 months ago

De JS events onpaste en ondrop op het input veld worden verwijderd bij het genereren van de component-weergave.

<Guideline appearance="dont" title="Blokkeer kopiëren van een nieuw wachtwoord.">
  <Canvas language="html">
    {() => (
      <>
        <label for="pw2">Uw nieuwe wachtwoord</label>
        <input type="password" id="pw2" onpaste="return false;" ondrop="return false;" autocomplete="off"  name="wachtwoord" />
      </>
    )}
  </Canvas>
</Guideline>

Robbert commented 7 months ago

Alleen de onPaste issue moet nog.