Ionic-framework: feat: more css variables for button styling

[Eraldo]

Feature Request

Ionic version:


[x] 4.x

Describe the Feature Request

Currently (due to shadow dom) I don’t see a way to overwrite the cursors for buttons. Not even if I give them a custom class since it will be overwritten by .button-native.
All of that does make sense to me and for default use cases (and consistency!).
However I am doing something a bit more playful and would like to know if or how I could overwrite the cursors?

Describe Preferred Solution

Ideally I would be able to set the css variable --cursor to be able to change it. :smile:

Describe Alternatives

I tried to find other ways of doing shadow piercing in angular, however the option of setting ViewEncapsulation.None does not make sense if it is an application wide style effect, that I want to have.

Related Code

In any ionic button there is a class: .button-native

.button-native {
    ...
    cursor: pointer;
    ...
}

I think the change might be as simple as making the cursor a css variable as it has been done with width and some other properties. Example: https://github.com/ionic-team/ionic/commit/bac49ca71bc3da60b1b349b7130025e2906a6ead#diff-7c58c82ca091ee01c6244994d0362292

Additional Context

   Ionic CLI                     : 6.10.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.900.6
   @angular-devkit/schematics    : 9.0.6
   @angular/cli                  : 9.0.6

[liamdebeasi]

Thanks for the feature request. With the launch of Ionic Framework v5.1.0 we introduced CSS Shadow Part support for our components. This lets you target internal pieces of components without knowing the actual structure of the component.

We are in the process of getting more examples out, but you would do something like this in your CSS:

ion-button::part(native) {
  cursor: grab;
}

Components that support shadow parts have the parts listed in our documentation: https://ionicframework.com/docs/api/button#css-shadow-parts.

[Eraldo]

Awesome!
Great move!
I'll try it tomorrow and close the issue. :)

On Tue, Jun 23, 2020, 00:16 Liam DeBeasi [e-mail] wrote:

Thanks for the feature request. With the launch of Ionic Framework v5.1.0
we introduced CSS Shadow Part support for our components. This lets you
target internal pieces of components without knowing the actual structure
of the component.

We are in the process of getting more examples out, but you would do
something like this in your CSS:

ion-button::part(native) {
cursor: grab;
}

Components that support shadow parts have the parts listed in our
documentation: https://ionicframework.com/docs/api/button#css-shadow-parts
.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/21610#issuecomment-647815667,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAAR5IXNPWVXPAVWSYJJZRTRX7Q6PANCNFSM4OFDIV7A
.

[Eraldo]

Worked like a charm! <3

[liamdebeasi]

Great! We also plan on having more examples/blogs posts in the near future with info on how to get the most out of shadow parts in your app.

[ekafyi]

Is there a workaround to achieve something like this?

ion-toast::part(button):nth-child(2) {
  background: blue;
}

// or
ion-toast::part(button).my-custom-button { }

[liamdebeasi]

No, a ::part() can only take additional pseudo-classes after it and will never match structural pseudo-elements: https://drafts.csswg.org/css-shadow-parts-1/#part

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.