Sheriff V2 CSS Oppdatering Codemod

Vi har laget en codemod for å oppgradere fra Sheriff v1 over til Sheriff V2.
Det er rykende fersk release candidate versjon, som vi setter pris på om du hjelper oss teste.

Bruk av denne codemoden

Du kan kjøre denne codemoden med følgende kommando:

bash
Copy
npx codemod sheriff-v2-update

Codemoden vil automatisk søke gjennom alle JavaScript, TypeScript, JSX, TSX og MDX-filer i prosjektet ditt (unntatt node_modules) og oppdatere CSS-klassene fra V1 til V2.

Husk å ha kodebasen din i en tilstand hvor du kan tilbakestille endringene gjort av Codemoden, i tilfelle noe går galt.

Lokal testing

Du kan kjøre codemoden lokalt med denne kommandoen

bash
Copy
npx codemod@latest -s $PATH_TO_CODEMOD_FOLDER --engine="workflow" -t $TARGET_FOLDER

Om du vil kjøre codemoden i mappen du står i, så kan du bytte ut $TARGET_FOLDER med .

Hva denne codemoden gjør

Denne codemoden utfører følgende transformasjoner:

1. Oppgraderer Sheriff-komponenter

• sds-paragraph, sds-label og sds-detail (pluss wrapperne) blir til sds-text/SDSTextWrapper, og vi legger på fornuftige size-attributter (xl, sm, xs) når det mangler.
• sds-link blir konvertert til rene <a>-tagger.
• sds-notification og SDSNotificationWrapper blir til sds-alert/SDSAlertWrapper. variant flyttes til data-palette, og vi setter variant="primary" som default for alerts.
• Endrer v1 size (s/m/l) til nye v2 size (sm/md/lg)

2. Konverterer numeriske verdier til t-skjorte-størrelser

Oppdaterer numeriske verdier brukt i V1 i stack- og spacing-klasser til t-skjorte-størrelser som er brukt i V2:

3. Oppdaterer radius-klasser

Den samme transformasjonen blir brukt for radius-klasser.

4. Oppdaterer fargeklasser

Codemoden oppdaterer en rekke fargeklasser, inkludert:

• Bakgrunnsfarger
• Overflatefarger
• Tekstfarger
• Kantfarger
• Ikonfarger
• Varselfarger (kritisk, advarsel, oppmerksomhet, suksess, info)

Eksempler på før og etter

Tekst-komponenter

Før

tsx
Copy
<sds-paragraph className="sds-text-l">Paragraf</sds-paragraph>
<sds-label className="sds-text-l">Label</sds-label>
<sds-detail className="sds-text-l">Detaljer</sds-detail>

Etter

tsx
Copy
<sds-text className="sds-text-l" size="xl">Paragraf</sds-text>
<sds-text className="sds-text-l" size="sm">Label</sds-text>
<sds-text className="sds-text-l" size="xs">Detaljer</sds-text>

Lenker

Før

tsx
Copy
<sds-link target="_blank" size="m" href="/docs">
	Les mer
</sds-link>

Etter

tsx
Copy
<a target="_blank" href="/docs">
	Les mer
</a>

Notifications blir til alerts

Før

tsx
Copy
<sds-notification variant="warning" class="toast">
	<div slot="message">Varsel</div>
</sds-notification>

Etter

tsx
Copy
<sds-alert class="toast" data-palette="warning" variant="primary">
	<div slot="message">Varsel</div>
</sds-alert>

Stack-klasser

Før

tsx
Copy
<div className="sds-stack-x-4">Innhold</div>
<div className="sds-stack-y-6">Innhold</div>

Etter

tsx
Copy
<div className="sds-stack-x-xs">Innhold</div>
<div className="sds-stack-y-md">Innhold</div>

Spacing-klasser

Før

tsx
Copy
<div className="sds-spacing-m-b-5">Innhold</div>
<div className="sds-spacing-p-i-8">Innhold</div>

Etter

tsx
Copy
<div className="sds-spacing-m-b-sm">Innhold</div>
<div className="sds-spacing-p-i-xl">Innhold</div>

Radius-klasser

Før

tsx
Copy
<div className="sds-radius-2">Innhold</div>
<div className="sds-radius-4">Innhold</div>
<div className="sds-radius-6">Innhold</div>

Etter

tsx
Copy
<div className="sds-radius-xs">Innhold</div>
<div className="sds-radius-sm">Innhold</div>
<div className="sds-radius-md">Innhold</div>

Fargeklasser

Før

tsx
Copy
<div className="sds-color-background-default">Bakgrunn</div>
<div className="sds-color-text-default">Tekst</div>
<div className="sds-color-border-default">Kant</div>
<div className="sds-color-icon-default">Ikon</div>
<div className="sds-color-surface-critical-subtle">Varsel</div>

Etter

tsx
Copy
<div className="sds-color-accent-background-default">Bakgrunn</div>
<div className="sds-color-text-accent-default">Tekst</div>
<div className="sds-color-border-accent-default">Kant</div>
<div className="sds-color-text-accent-default">Ikon</div>
<div className="sds-color-surface-alert-danger-tinted">Varsel</div>