Skip to content
Permalink
Browse files

fix(components): include mode classes on components for use in shadow (…

…#17838)

- removes mode-less component classes from the internal CSS, use element instead
- adds mode specific classes `md` or `ios` for styling inside of shadow components
- adds e2e test that verifies mode classes exist on all ionic components, plus checks for specific classes that the components need for internal styling

fixes #17608
  • Loading branch information...
brandyscarney committed Apr 16, 2019
1 parent 38ae362 commit e5c8c10029d5211717e25057afb4c34cb7b7523c
Showing with 685 additions and 119 deletions.
  1. +1 βˆ’1 core/package.json
  2. +2 βˆ’0 core/src/components/action-sheet/action-sheet.tsx
  3. +1 βˆ’0 core/src/components/alert/alert.tsx
  4. +3 βˆ’1 core/src/components/anchor/anchor.tsx
  5. +3 βˆ’1 core/src/components/app/app.tsx
  6. +11 βˆ’0 core/src/components/avatar/avatar.tsx
  7. +1 βˆ’0 core/src/components/back-button/back-button.tsx
  8. +3 βˆ’0 core/src/components/backdrop/backdrop.tsx
  9. +4 βˆ’1 core/src/components/badge/badge.tsx
  10. +1 βˆ’0 core/src/components/button/button.tsx
  11. +13 βˆ’1 core/src/components/buttons/buttons.tsx
  12. +6 βˆ’2 core/src/components/card-content/card-content.tsx
  13. +1 βˆ’0 core/src/components/card-header/card-header.tsx
  14. +4 βˆ’1 core/src/components/card-subtitle/card-subtitle.tsx
  15. +4 βˆ’1 core/src/components/card-title/card-title.tsx
  16. +4 βˆ’1 core/src/components/card/card.tsx
  17. +1 βˆ’0 core/src/components/checkbox/checkbox.tsx
  18. +1 βˆ’0 core/src/components/chip/chip.tsx
  19. +6 βˆ’0 core/src/components/col/col.tsx
  20. +1 βˆ’0 core/src/components/content/content.tsx
  21. +1 βˆ’1 core/src/components/datetime/datetime-util.spec.ts
  22. +1 βˆ’0 core/src/components/datetime/datetime.tsx
  23. +1 βˆ’0 core/src/components/fab-button/fab-button.tsx
  24. +5 βˆ’0 core/src/components/fab-list/fab-list.tsx
  25. +4 βˆ’0 core/src/components/fab/fab.tsx
  26. +7 βˆ’6 core/src/components/footer/footer.tsx
  27. +14 βˆ’0 core/src/components/footer/test/translucent/e2e.ts
  28. +4 βˆ’0 core/src/components/grid/grid.tsx
  29. +7 βˆ’6 core/src/components/header/header.tsx
  30. +14 βˆ’0 core/src/components/header/test/translucent/e2e.ts
  31. +11 βˆ’0 core/src/components/img/img.tsx
  32. +6 βˆ’2 core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
  33. +4 βˆ’0 core/src/components/infinite-scroll/infinite-scroll.tsx
  34. +1 βˆ’0 core/src/components/input/input.tsx
  35. +1 βˆ’0 core/src/components/item-divider/item-divider.tsx
  36. +6 βˆ’3 core/src/components/item-group/item-group.tsx
  37. +2 βˆ’0 core/src/components/item-option/item-option.tsx
  38. +8 βˆ’1 core/src/components/item-options/item-options.tsx
  39. +3 βˆ’1 core/src/components/item-sliding/item-sliding.tsx
  40. +2 βˆ’1 core/src/components/item/item.tsx
  41. +1 βˆ’0 core/src/components/label/label.tsx
  42. +4 βˆ’1 core/src/components/list-header/list-header.tsx
  43. +6 βˆ’3 core/src/components/list/list.tsx
  44. +1 βˆ’0 core/src/components/loading/loading.tsx
  45. +1 βˆ’0 core/src/components/menu-button/menu-button.tsx
  46. +4 βˆ’0 core/src/components/menu-toggle/menu-toggle.tsx
  47. +1 βˆ’0 core/src/components/menu/menu.tsx
  48. +6 βˆ’3 core/src/components/modal/modal.tsx
  49. +6 βˆ’6 core/src/components/modal/test/test.utils.ts
  50. +4 βˆ’1 core/src/components/note/note.tsx
  51. +1 βˆ’0 core/src/components/picker-column/picker-column.tsx
  52. +6 βˆ’2 core/src/components/picker/picker.tsx
  53. +1 βˆ’0 core/src/components/popover/popover.tsx
  54. +1 βˆ’0 core/src/components/progress-bar/progress-bar.tsx
  55. +6 βˆ’2 core/src/components/radio-group/radio-group.tsx
  56. +1 βˆ’0 core/src/components/radio/radio.tsx
  57. +1 βˆ’0 core/src/components/range/range.tsx
  58. +8 βˆ’0 core/src/components/refresher-content/refresher-content.tsx
  59. +4 βˆ’2 core/src/components/refresher/refresher.tsx
  60. +3 βˆ’1 core/src/components/reorder-group/reorder-group.tsx
  61. +8 βˆ’0 core/src/components/reorder/reorder.tsx
  62. +4 βˆ’0 core/src/components/ripple-effect/ripple-effect.tsx
  63. +11 βˆ’0 core/src/components/row/row.tsx
  64. +1 βˆ’0 core/src/components/searchbar/searchbar.tsx
  65. +1 βˆ’0 core/src/components/segment-button/segment-button.tsx
  66. +1 βˆ’0 core/src/components/segment/segment.tsx
  67. +7 βˆ’1 core/src/components/select-option/select-option.tsx
  68. +8 βˆ’0 core/src/components/select-popover/select-popover.tsx
  69. +1 βˆ’0 core/src/components/select/select.tsx
  70. +3 βˆ’1 core/src/components/skeleton-text/skeleton-text.tsx
  71. +4 βˆ’0 core/src/components/slide/slide.tsx
  72. +1 βˆ’1 core/src/components/slides/slides.scss
  73. +5 βˆ’2 core/src/components/slides/slides.tsx
  74. +1 βˆ’1 core/src/components/spinner/spinner.tsx
  75. +1 βˆ’1 core/src/components/split-pane/split-pane.scss
  76. +5 βˆ’2 core/src/components/split-pane/split-pane.tsx
  77. +1 βˆ’0 core/src/components/tab-bar/tab-bar.tsx
  78. +1 βˆ’0 core/src/components/tab-button/tab-button.tsx
  79. +26 βˆ’0 core/src/components/tabs/test/standalone/e2e.ts
  80. +38 βˆ’10 core/src/components/tabs/test/{vanilla β†’ standalone}/index.html
  81. +0 βˆ’34 core/src/components/tabs/test/vanilla/e2e.js
  82. +4 βˆ’1 core/src/components/text/text.tsx
  83. +4 βˆ’1 core/src/components/textarea/textarea.tsx
  84. +11 βˆ’0 core/src/components/thumbnail/thumbnail.tsx
  85. +1 βˆ’1 core/src/components/title/title.scss
  86. +4 βˆ’1 core/src/components/title/title.tsx
  87. +2 βˆ’0 core/src/components/toast/toast.tsx
  88. +1 βˆ’0 core/src/components/toggle/toggle.tsx
  89. +3 βˆ’1 core/src/components/toolbar/toolbar.tsx
  90. +74 βˆ’0 core/src/utils/test/modes/e2e.ts
  91. +176 βˆ’0 core/src/utils/test/modes/index.html
  92. +37 βˆ’1 core/src/utils/test/utils.ts
  93. +1 βˆ’8 core/src/utils/theme.ts
@@ -30,7 +30,7 @@
"loader/"
],
"dependencies": {
"ionicons": "4.5.5"
"ionicons": "4.5.6"
},
"devDependencies": {
"@stencil/core": "0.17.3-0",
@@ -196,6 +196,8 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
zIndex: 20000 + this.overlayIndex,
},
class: {
[`${this.mode}`]: true,

...getClassMap(this.cssClass),
'action-sheet-translucent': this.translucent
}
@@ -392,6 +392,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
},
class: {
...getClassMap(this.cssClass),
[`${this.mode}`]: true,
'alert-translucent': this.translucent
}
};
@@ -1,6 +1,6 @@
import { Component, ComponentInterface, Listen, Prop } from '@stencil/core';

import { Color, RouterDirection } from '../../interface';
import { Color, Mode, RouterDirection } from '../../interface';
import { createColorClasses, openURL } from '../../utils/theme';

@Component({
@@ -9,6 +9,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
shadow: true
})
export class Anchor implements ComponentInterface {
mode!: Mode;

@Prop({ context: 'window' }) win!: Window;

@@ -40,6 +41,7 @@ export class Anchor implements ComponentInterface {
return {
class: {
...createColorClasses(this.color),
[`${this.mode}`]: true,
'ion-activatable': true
}
};
@@ -1,6 +1,6 @@
import { Component, ComponentInterface, Element, Prop, QueueApi } from '@stencil/core';

import { Config } from '../../interface';
import { Config, Mode } from '../../interface';
import { rIC } from '../../utils/helpers';
import { isPlatform } from '../../utils/platform';

@@ -9,6 +9,7 @@ import { isPlatform } from '../../utils/platform';
styleUrl: 'app.scss'
})
export class App implements ComponentInterface {
mode!: Mode;

@Element() el!: HTMLElement;

@@ -34,6 +35,7 @@ export class App implements ComponentInterface {
hostData() {
return {
class: {
[`${this.mode}`]: true,
'ion-page': true,
'force-statusbar-padding': this.config.getBoolean('_forceStatusbarPadding')
}
@@ -1,5 +1,7 @@
import { Component, ComponentInterface } from '@stencil/core';

import { Mode } from '../../interface';

@Component({
tag: 'ion-avatar',
styleUrls: {
@@ -9,6 +11,15 @@ import { Component, ComponentInterface } from '@stencil/core';
shadow: true
})
export class Avatar implements ComponentInterface {
mode!: Mode;

hostData() {
return {
class: {
[`${this.mode}`]: true,
}
};
}

render() {
return <slot></slot>;
@@ -62,6 +62,7 @@ export class BackButton implements ComponentInterface {
return {
class: {
...createColorClasses(this.color),
[`${this.mode}`]: true,

'button': true, // ion-buttons target .button
'ion-activatable': true,
@@ -1,5 +1,6 @@
import { Component, ComponentInterface, Event, EventEmitter, Listen, Prop } from '@stencil/core';

import { Mode } from '../../interface';
import { GESTURE_CONTROLLER } from '../../utils/gesture';
import { now } from '../../utils/helpers';

@@ -12,6 +13,7 @@ import { now } from '../../utils/helpers';
shadow: true
})
export class Backdrop implements ComponentInterface {
mode!: Mode;

private lastClick = -10000;
private blocker = GESTURE_CONTROLLER.createBlocker({
@@ -78,6 +80,7 @@ export class Backdrop implements ComponentInterface {
return {
tabindex: '-1',
class: {
[`${this.mode}`]: true,
'backdrop-hide': !this.visible,
'backdrop-no-tappable': !this.tappable,
}
@@ -26,7 +26,10 @@ export class Badge implements ComponentInterface {

hostData() {
return {
class: createColorClasses(this.color)
class: {
...createColorClasses(this.color),
[`${this.mode}`]: true
}
};
}

@@ -148,6 +148,7 @@ export class Button implements ComponentInterface {
'aria-disabled': disabled ? 'true' : null,
class: {
...createColorClasses(color),
[`${this.mode}`]: true,
[buttonType]: true,
[`${buttonType}-${expand}`]: expand !== undefined,
[`${buttonType}-${size}`]: size !== undefined,
@@ -1,5 +1,7 @@
import { Component, ComponentInterface } from '@stencil/core';

import { Mode } from '../../interface';

@Component({
tag: 'ion-buttons',
styleUrls: {
@@ -8,4 +10,14 @@ import { Component, ComponentInterface } from '@stencil/core';
},
scoped: true,
})
export class Buttons implements ComponentInterface {}
export class Buttons implements ComponentInterface {
mode!: Mode;

hostData() {
return {
class: {
[`${this.mode}`]: true
}
};
}
}
@@ -1,7 +1,6 @@
import { Component, ComponentInterface, Prop } from '@stencil/core';

import { Mode } from '../../interface';
import { createThemedClasses } from '../../utils/theme';

@Component({
tag: 'ion-card-content',
@@ -19,7 +18,12 @@ export class CardContent implements ComponentInterface {

hostData() {
return {
class: createThemedClasses(this.mode, 'card-content')
class: {
[`${this.mode}`]: true,

// Used internally for styling
[`card-content-${this.mode}`]: true
}
};
}
}
@@ -34,6 +34,7 @@ export class CardHeader implements ComponentInterface {
class: {
...createColorClasses(this.color),
'card-header-translucent': this.translucent,
[`${this.mode}`]: true
}
};
}
@@ -26,7 +26,10 @@ export class CardSubtitle implements ComponentInterface {

hostData() {
return {
class: createColorClasses(this.color),
class: {
...createColorClasses(this.color),
[`${this.mode}`]: true
},
'role': 'heading',
'aria-level': '3'
};
@@ -26,7 +26,10 @@ export class CardTitle implements ComponentInterface {

hostData() {
return {
class: createColorClasses(this.color),
class: {
...createColorClasses(this.color),
[`${this.mode}`]: true
},
'role': 'heading',
'aria-level': '2'
};
@@ -27,7 +27,10 @@ export class Card implements ComponentInterface {

hostData() {
return {
class: createColorClasses(this.color)
class: {
...createColorClasses(this.color),
[`${this.mode}`]: true
}
};
}
}
@@ -137,6 +137,7 @@ export class Checkbox implements ComponentInterface {
'aria-labelledby': labelId,
class: {
...createColorClasses(color),
[`${this.mode}`]: true,
'in-item': hostContext('ion-item', el),
'checkbox-checked': checked,
'checkbox-disabled': disabled,
@@ -33,6 +33,7 @@ export class Chip implements ComponentInterface {
return {
class: {
...createColorClasses(this.color),
[`${this.mode}`]: true,
'chip-outline': this.outline,
'ion-activatable': true,
}
@@ -1,5 +1,6 @@
import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core';

import { Mode } from '../../interface';
import { matchBreakpoint } from '../../utils/media';

const win = window as any;
@@ -12,6 +13,8 @@ const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
shadow: true
})
export class Col implements ComponentInterface {
mode!: Mode;

@Prop({ context: 'window' }) win!: Window;

@Element() el!: HTMLStencilElement;
@@ -247,6 +250,9 @@ export class Col implements ComponentInterface {
hostData() {
const isRTL = this.win.document.dir === 'rtl';
return {
class: {
[`${this.mode}`]: true
},
style: {
...this.calculateOffset(isRTL),
...this.calculatePull(isRTL),
@@ -293,6 +293,7 @@ export class Content implements ComponentInterface {
return {
class: {
...createColorClasses(this.color),
[`${this.mode}`]: true,
'content-sizing': hostContext('ion-popover', this.el),
'overscroll': !!this.forceOverscroll,
},
@@ -2,7 +2,7 @@ import { convertDataToISO, parseDate } from './datetime-util';

describe('datetime-util', () => {
describe('convertDataToISO', () => {
it('prints an emptry string for an empty datetime', () => {
it('prints an empty string for an empty datetime', () => {
expect(convertDataToISO({})).toEqual('');
});

@@ -615,6 +615,7 @@ export class Datetime implements ComponentInterface {
'aria-haspopup': 'true',
'aria-labelledby': labelId,
class: {
[`${this.mode}`]: true,
'datetime-disabled': disabled,
'datetime-readonly': readonly,
'datetime-placeholder': addPlaceholderClass,
@@ -95,6 +95,7 @@ export class FabButton implements ComponentInterface {
'aria-disabled': disabled ? 'true' : null,
class: {
...createColorClasses(color),
[`${this.mode}`]: true,
'fab-button-in-list': inList,
'fab-button-translucent-in-list': inList && translucent,
'fab-button-close-active': activated,
@@ -1,11 +1,15 @@
import { Component, ComponentInterface, Element, Prop, Watch } from '@stencil/core';

import { Mode } from '../../interface';

@Component({
tag: 'ion-fab-list',
styleUrl: 'fab-list.scss',
shadow: true
})
export class FabList implements ComponentInterface {
mode!: Mode;

@Element() el!: HTMLIonFabElement;

/**
@@ -32,6 +36,7 @@ export class FabList implements ComponentInterface {
hostData() {
return {
class: {
[`${this.mode}`]: true,
'fab-list-active': this.activated,
[`fab-list-side-${this.side}`]: true
}
@@ -1,11 +1,14 @@
import { Component, ComponentInterface, Element, Listen, Method, Prop, Watch } from '@stencil/core';

import { Mode } from '../../interface';

@Component({
tag: 'ion-fab',
styleUrl: 'fab.scss',
shadow: true
})
export class Fab implements ComponentInterface {
mode!: Mode;

@Element() el!: HTMLElement;

@@ -75,6 +78,7 @@ export class Fab implements ComponentInterface {
hostData() {
return {
class: {
[`${this.mode}`]: true,
[`fab-horizontal-${this.horizontal}`]: this.horizontal !== undefined,
[`fab-vertical-${this.vertical}`]: this.vertical !== undefined,
'fab-edge': this.edge
@@ -1,7 +1,6 @@
import { Component, ComponentInterface, Prop } from '@stencil/core';

import { Mode } from '../../interface';
import { createThemedClasses } from '../../utils/theme';

@Component({
tag: 'ion-footer',
@@ -25,13 +24,15 @@ export class Footer implements ComponentInterface {
@Prop() translucent = false;

hostData() {
const themedClasses = createThemedClasses(this.mode, 'footer');
const translucentClasses = this.translucent ? createThemedClasses(this.mode, 'footer-translucent') : null;

return {
class: {
...themedClasses,
...translucentClasses
[`${this.mode}`]: true,

// Used internally for styling
[`footer-${this.mode}`]: true,

[`footer-translucent`]: this.translucent,
[`footer-translucent-${this.mode}`]: this.translucent,
}
};
}

0 comments on commit e5c8c10

Please sign in to comment.
You can’t perform that action at this time.