javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): only apply has-icon-only if icon has the slot for icon-only (#18343)

Browse Source 
fixes #18329
This commit is contained in:
Brandy Carney
2019-05-22 11:28:06 -04:00
committed by GitHub
parent 788a56c5e9
commit d13983451a
2 changed files with 35 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core/src/components/button/button.tsx
View File

@ -130,16 +130,8 @@ export class Button implements ComponentInterface {
} }
} }
private get hasLabel() {
return this.el.textContent !== null && this.el.textContent.trim() !== '';
}
private get hasIcon() {
return !!this.el.querySelector('ion-icon');
}
private get hasIconOnly() { private get hasIconOnly() {
return this.hasIcon && !this.hasLabel; return !!this.el.querySelector('ion-icon[slot="icon-only"]');
} }
private get rippleType() { private get rippleType() {

38
core/src/components/toolbar/test/spec/index.html
View File

@ -117,12 +117,12 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button> <ion-button>
<ion-icon name="star"></ion-icon> <ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <ion-button>
<ion-icon name="call"></ion-icon> <ion-icon slot="icon-only" name="call"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -138,12 +138,12 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button> <ion-button>
<ion-icon name="star"></ion-icon> <ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <ion-button>
<ion-icon name="call"></ion-icon> <ion-icon slot="icon-only" name="call"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -242,6 +242,36 @@
</ion-content> </ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>
Click to Add Text
</ion-title>
<ion-buttons slot="end">
<ion-button id="changeText" onClick="toggleText()">
<ion-icon slot="start" name="refresh"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
<script>
const button = document.getElementById('changeText');
function toggleText() {
const hasText = button.querySelector('#childText');
if (hasText) {
button.removeChild(hasText);
} else {
var text = document.createElement('span');
text.innerHTML = 'Toggle';
text.id = 'childText';
button.appendChild(text, button);
}
}
</script>
<style> <style>
ion-toolbar { ion-toolbar {
margin-bottom: 10px; margin-bottom: 10px;