Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Legg til et felles API for elm-ikonene #756

Merged
merged 16 commits into from
Aug 3, 2023
Merged

Conversation

FluidSense
Copy link
Contributor

Bakgrunn

Etter å ha testet Spor-ikonene i Elm en stund har vi avdekket noen smertepunkter.

  • Må bruke global-styling for å targette children i svg for å sette farge
  • Mye kode for å bytte ut ikonet helt dersom man skal variere størrelse og variant på ikoner (f.eks. for mobil vs. desktop)
  • "vanskelig" å bruke i knapper som skal variere ikon-type (fill/outline) basert på knappevarianten (Primary med fill, Additional med outline).
  • Må slå opp på dokumentasjonen for å finne hvilken submodul et ikon lå i etter man har sett hvilket ikon det er i Figma.

Løsning

  • Slår det sammen til én pakke for å slippe se hvilken submodul som brukes.
  • Fjerner default-fill slik at det heller settes på SVG-en (farger som ikke er default, e.g. indre elementer, har fortsatt fargen sin).
  • Åpner for å sette ikon-type (fill/outline), størrelse eller farge og fortsatt beholde samme import og funksjonskall utover det.

Ulempen med dette er at bruks-API-et til Elm og React fraviker i større grad. Samme endring er så vidt meg bekjent ikke like lett å gjøre for React pga. tree-shaking som kun kan gjøres på modulnivå.

@changeset-bot
Copy link

changeset-bot bot commented Jun 28, 2023

⚠️ No Changeset found

Latest commit: 99efe2c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link
Contributor

@selbekk selbekk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ser fint ut det her.

const moduleHeader = generateModuleHeader(module.name, svgNames);
const src = [moduleHeader].concat(svgImpls)
.join('\n\n\n{-|-}\n');
// File names are structured as "name-[fill|stroke]-[size]x[size].svg"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"name-[fill|outline]" er det vel. Og alle følger ikke den standarden – noen har "colored" etc

Copy link

@SimenRenberg SimenRenberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For en god idé 🙌🏻

@selbekk
Copy link
Contributor

selbekk commented Jul 10, 2023

Denne er good to go fra min side – bare å merge når du er i mål @FluidSense

@FluidSense
Copy link
Contributor Author

FluidSense commented Jul 10, 2023

Flotters! For min del må det fort bli etter ferien, så i starten av august. Om noen derimot ønsker å plukke opp tråden her før det, så gjenstår det:

  • Sende med ikon-typene til generator-funksjonen så ikke "outline" og "fill" er hardkodet i funksjonsnavnene. Det vil nemlig ikke kompilere når ikke alle har alle variantene.
  • Å teste de siste endringene

Konverterer dette PR-et til draft neste gang jeg er ved macen, i mellomtiden

Copy link
Contributor

@akselw akselw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nydelig arbeid! 🤩

packages/spor-icon-elm/generate.js Outdated Show resolved Hide resolved
packages/spor-icon-elm/generate.js Show resolved Hide resolved
packages/spor-icon-elm/generate.js Outdated Show resolved Hide resolved
packages/spor-icon-elm/generate.js Show resolved Hide resolved
packages/spor-icon-elm/generate.js Outdated Show resolved Hide resolved
@FluidSense FluidSense merged commit e024a3c into main Aug 3, 2023
1 check passed
@FluidSense FluidSense deleted the add-api-to-spor-icons-elm branch August 3, 2023 08:22
FluidSense added a commit that referenced this pull request Aug 3, 2023
## Bakgrunn
#756 la til et nytt API for elm-ikonene. Dessverre så jeg ikke at den krevde nyeste versjon av elm-css, mens alle prosjekter som bruker pakken har én major-versjon under.

## Løsning
Nedgraderer til forrige major-versjon
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants