-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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
Anchors with ion-button and color are getting text and button color classes #8293
Comments
Didn't realize this was already created and fixed by #8249. Leaving open to add unit tests to avoid this happening in the future. |
Same thing is happening on;
|
@alan-agius4 @brandyscarney maybe we should not provide [color] in |
@brandyscarney , @manucorporat Personally, I am not a big fan of this directive, It sort of turn primitive HTML elements into angular components and the results can be achieved using CSS classes only or in the case of Ionic utility attributes. ex for primitive elements rather than would be: Reason being is that utility attributes would be more flexible since you can apply them on any element even those that are not listed within the directive. ex: Also, to extanded that another utility attribute can be added for the background color. ex: Proposed code: .ios {
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
[color-#{$color-name}] {
color: $color-base;
}
[background-#{$color-name}] {
color: $color-contrast;
background-color: $color-base;
}
}
} I can create a PR if you agree with my proposal. |
Thanks for the feedback @alan-agius4! The issue is we have had several people wanting to add a color based on a data set or variable, so with an attribute you could add it based on some expression:
However, if you don't know the color that you want is
I'm not sure of the best solution for this. Looping in @adamdbradley for discussion. |
Conviencer me there :) probably the neatest approach is what you suggested earlier, to add a unique selector for anchor tags. Ex: Unless you want to consider adding Utility CSS Classes in your framework, class name can be <a [ngClass]="'primary'">link</a> // string
<a [ngClass]="item.myColor">link</a> // in loop
<a [ngClass]="{'primary': isMd}">link</a>` //conditional
|
I'm thinking that may be the best solution. With a custom directive for anchor tags we wouldn't be automatically styling anchors to have the Ionic look. Adam and I are going to discuss this some more and I'll update the issue after. :) |
The same problem here. |
Submitted a pull request for this here: #9096 Basically it adds an attribute called cc @alan-agius4 let me know what you think! |
@brandyscarney, Its good :) much clean than the current |
The following markup:
results in a button that looks like this:
caused by it getting both the
.text-secondary
(anchor) and.button-secondary
classes.The text was updated successfully, but these errors were encountered: