-
Notifications
You must be signed in to change notification settings - Fork 82
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
[lumo] Styling links as buttons #1803
Comments
Yeah, would be useful in some cases. I actually wanted to do this in the theme documentation pages, and ended up prototyping this a bit. It’s possible but requires pretty much 2x selectors in the valo-button style module, so I’m wondering if that’s an acceptable tradeoff? The way you would use this: <link rel="import" href="../vaadin-button.html">
<custom-style>
<style include="valo-button">
</style>
</custom-style>
<a href="..." theme="button primary large">Button link</a> Examples of the duplication of selectors used in the style module: :host,
[theme~="button"]
:host(:hover:not([theme*="tertiary"]):not([active])),
[theme~="button"]:hover:not([theme*="tertiary"]):not([active])
:host::before,
:host::after,
[theme~="button"]::before,
[theme~="button"]::after
:host([active]:not([theme~="primary"]):not([theme*="tertiary"])),
[theme~="button"]:active:not([theme~="primary"]):not([theme*="tertiary"]) |
From @heruan on November 24, 2017 17:45 I didn't understand entirely the duplication of selectors, although it seems acceptable to me. The use case is intuitive and clean! 👍 |
Basically, wherever there’s a The |
This repo would still be the logical place for the styles. I still don’t exactly know how to pull this off nicely. My previous suggestions doesn’t really work, as the The only other option I now see is to have some build script that generates a |
Maybe the complementary is easier? See vaadin/vaadin-button#79 Both would be useful since the two use cases can be very common (navigate when clicking a button and trigger something when clicking a link). |
@jouni Still without any clue on how to do this nicely? I'd really make use of this, for example to trigger a download in Flow you should use an anchor, i.e. new Anchor("Download me!", streamResource); but placing this along buttons in a toolbar isn't quite pleasant 👊👁 |
No bright ideas yet. Have you tried: I tried one approach in my j-elements research project, how this kind of ”portable CSS” could be used in web components. Basically, I author the component CSS according to BEM (or close to at least), and the rewrite the selectors when using it inside a shadow root, using the For example, here’s the styles for And here’s how it’s used in the avatar:
|
Hi,
|
I just wanted to share my current solution:
Basically I create a To support
Sidenote: |
I just noticed an issue with the solution I posted above: EDIT:
|
Thank you @Springrbua for sharing this! I'd like to hear the team's take on it, as it might be worth a PR. Or maybe there's already something on the works with the BEM strategy explained by @jouni? Sure thing is: styling a link as a button should be easy, as in Bootstrap's |
@heruan while my solution works pretty good, I consider it a workaround and I don't think it should become the official solution. |
One additional point to consider when nesting a button inside an anchor: there should be only one focusable element when navigating with the keyboard. So the nested button should probably have
Yes, that’s one solution, true. Pretty much exactly the same solution as with |
Thanks @jouni for the reminder, I did not notice this. |
CustomAnchor works perfectly. Thanks. |
Based on the previous answer I think the simplest way to solve problem is creating own css class:
And after that:
In this way hover works perfect. |
@rolfsmeds Could this be considered an a11y enhancement or even fix (looking at the examples from above)? A lot of developer are forced to use a wrong element (button) because styling the link to look exactly like a button is hard and a lot of businesses require it to look exactly like the other actions in a row of actions. |
I think it would be a bit of a stretch to call it an a11y issue. Some would even consider the opposite an a11y issue, with the argument that elements that look like buttons are expected to perform actions rather than navigation, so a link with the appearance of a button is presenting the wrong affordance. But if we disregard that as a bit too "purist", I do think it would be a worthwhile feature regardless of how we label it. |
I notice @vaadin/button template has been updated to become web-components/packages/button/src/vaadin-button.js Lines 104 to 114 in 97b5c3a
Looking at https://a11y-vaadin-playground.netlify.app it seems like we could now put |
The |
It seems we could simply override link button role when using it as such web-components/packages/button/src/vaadin-button.js Lines 134 to 138 in 97b5c3a
Example <vaadin-button role="link">
<a href="https://github.com/vaadin/web-components/tree/master/packages/button/">
</vaadin-button> |
Yes it's possible to override role attribute, but it's not something we can recommend for styling links. But you can try it. |
Can you also post some thoughts on the rationale? I did the technical analysis at vaadin/vaadin-button#142 (comment), and you can't combine native But Alternatively: is a re-usable vaadin-button stylesheet somewhere in future cards? |
I would say it's worth trying 👍
I don't think so. @jouni WDYT about this? |
I’m still hoping for that future as well, where we can have component style sheets in plain .css files. But I think that still waits for "CSS module scripts" to happen, so that we wouldn't need a build step to include the styles in the web components (or duplicate the styles in two files). |
We're running into this issue again when trying to track links though have them styled as a button |
In the meanwhile I did the manual work of copying vaadin/button shadow styles for a base library we're using conversionxl/pure@35e0ec1#diff-0c917aace88bc9103d58d9aae26950008e38fd3877e71e20c11c5d732ef5c4c6 Main problem will be keeping things in sync with new vaadin/button changes, I have no immediate automation ideas here. AFAICS just need to eyeball vaadin/button template diffs, and figure out what to carry over, or not. |
Angular Material does something similar. You basically create a native button (or anchor) and add the So you are probably right, it would be the better solution to remove the wrapper for button then to create another wrapper for the anchor tag. |
From @heruan on November 16, 2017 18:7
I guess this is borderline, but it would be very useful to style links as buttons, e.g. to let the use CMD + click and open a new tab.
How much the templating system can help on applying the
valo-button
theme module to an anchor element, with all variants, without the need to maintain a duplicate style?Copied from original issue: vaadin/vaadin-valo-styles#34
The text was updated successfully, but these errors were encountered: