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

Move strings out of component library #3937

Open
pavish opened this issue Oct 7, 2024 · 1 comment
Open

Move strings out of component library #3937

pavish opened this issue Oct 7, 2024 · 1 comment
Labels
restricted: maintainers Only maintainers can resolve this issue type: enhancement New feature or request work: frontend Related to frontend code in the mathesar_ui directory
Milestone

Comments

@pavish
Copy link
Member

pavish commented Oct 7, 2024

Description

The component library should not directly use svelte-i18n. We should handle the following:

  • Move components that are Mathesar specific and require considerable translations out of component library
  • Make all components accept props for displayed text
  • Create an i18n context for the component library with commonly used strings
@pavish pavish added type: enhancement New feature or request work: frontend Related to frontend code in the mathesar_ui directory restricted: maintainers Only maintainers can resolve this issue labels Oct 7, 2024
@pavish pavish added this to the Backlog milestone Oct 7, 2024
@seancolsen
Copy link
Contributor

I'm commenting to add some clarity because I was confused when I read the issue description.

Our component library doesn't currently import svelte-i18n. So no changes needed there.

The problem is that our component library currently has some strings which are hard-coded in English. For example, in FileUpload.svelte, we have:

<span>Uploaded {percentage}%</span>

and

<div class="title">Drag a file here</div>

I think what we need to do in this example is refactor that component to accept props for those strings, probably something like this:

export let i18nUploadedPercentage: (percentage: number) => string =
  (percentage) => `Uploaded ${percentage}%`;

export let i18nDragAFileHere: string = 'Drag a file here';

There are only a very small handful of places like this in the component library, with FileUpload.svelte being perhaps the most glaring example.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
restricted: maintainers Only maintainers can resolve this issue type: enhancement New feature or request work: frontend Related to frontend code in the mathesar_ui directory
Projects
None yet
Development

No branches or pull requests

2 participants