Ability to change the label about nuxt-social-share HOT 6 CLOSED

Thanks for the suggestion.

This would require some work, as the best way would probably be to extend the current label prop and option, and also provide a way to give a matching value to the aria-label attribute.

I have to think about the best way to implement this, but it is a nice addition.

from nuxt-social-share.

This would require some work, as the best way would probably be to extend the current label prop and option, and also provide a way to give a matching value to the aria-label attribute.

Yeah, maybe setting label prop as string|boolean then true/false would work same as now (meaning no breaking change) but when string is set it'd use that one as text.
Ideally of course there would also be showLabel prop, which would set the label's visibility but then it'd mean changing current label which would mean breaking current implementations for users who'd update the package.

from nuxt-social-share.

Hi @stefanobartoletti,

First of all, thank you for sharing this package.
I would like to suggest using <slot> after the icon, so everyone can use a custom label or whatever element easily.
Something like this:

<span
  v-if="isLabeled"
  class="social-share-button__label"
>
  <slot>Share</slot>
</span>

Also I think the icon should be optional with a new prop. This way we can use custom labels, support different languages and use only-text links.
I would also change props naming to more descriptive ones, something like showLabel and showIcon, as @Stiropor suggested above.

Let me know if you are interested, I can push a PR.
Thank you!

from nuxt-social-share.

@sergiocerrutti thanks for the slot suggestion, this is an interesting alternative to support other languages.
But any change should also provide a way to update the aria-label accordingly and be consistent with the language of the displayed label, as I do not want to provide only a half-working solution (this is the reason why this issue is still open :-) ). But this is definitely a good suggestion worth exploring ✌️

About giving the ability to make the icon optional: this is a different matter, not really related to the label localization. It honestly seems to be a bit like an edge case. I may consider it, but it is not the top priority at the moment, and not to be included in the same PR. If you are in a hurry to implement something like this, you can probably try using the composable and build a custom component at the moment.

About changing the names of the props: it would break the API for existing users, and I do not see a real benefit in doing so just for the sake of changing. Currently all existing props have different and recognizable names and are well documented, it does not seem like there could be ambiguity. But this is of course my own view. Have you found it somewhat difficult to understand what each prop does?

from nuxt-social-share.

@sergiocerrutti @Stiropor I am working on a solution here https://github.com/stefanobartoletti/nuxt-social-share/tree/feature/dynamic-label with a slot, and the aria-label can be simply set as a dynamic attribute and will overwrite the default one. I will test it a little further but it was a very small change and will likely work without problems.

I am also considering to add a slot for the icon, to provide the ability to customize it with a different design. I think that I can also make the icon optional in the process.

from nuxt-social-share.

@sergiocerrutti @Stiropor I have published a prerelease with both:

• customizable labels
• customizable and optional icons

It is available by installing pnpm i @stefanobartoletti/nuxt-social-share@dev

You can read the updated docs here: https://github.com/stefanobartoletti/nuxt-social-share/blob/feature/dynamic-label/README.md

Please let me know if everything is working as expected, so I can go on and publish a stable version.

from nuxt-social-share.