Skip to content
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.

Sign up for GitHub

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

fix(framework): CSS Vars in Static Styles work on IE11 #1440

Merged
merged 2 commits into from
Apr 7, 2020
Merged

fix(framework): CSS Vars in Static Styles work on IE11 #1440

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6fdfd6f
fix(framework): CSS Vars in Static Styles work on IE11
vladitasev Apr 7, 2020
ce70e66
do not double styles for IE
vladitasev Apr 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/base/src/StaticAreaItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ class StaticAreaItem {
*/
_updateFragment() {
const renderResult = this.ui5ElementContext.constructor.staticAreaTemplate(this.ui5ElementContext),
stylesToAdd = this.ui5ElementContext.constructor.staticAreaStyles || false;
stylesToAdd = window.ShadyDOM ? false : this.ui5ElementContext.constructor.staticAreaStyles;

if (!this.staticAreaItemDomRef) {
// Initial rendering of fragment
Expand Down
8 changes: 8 additions & 0 deletions packages/base/src/UI5Element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -820,6 +820,14 @@ class UI5Element extends HTMLElement {
return "";
}

/**
* Returns the Static Area CSS for this UI5 Web Component Class
* @protected
*/
static get staticAreaStyles() {
return "";
}

/**
* Registers a UI5 Web Component in the browser window object
* @public
Expand Down
17 changes: 17 additions & 0 deletions packages/base/src/theming/createComponentStyleTag.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,15 @@ import { ponyfillNeeded, schedulePonyfill } from "./CSSVarsPonyfill.js";

const IEStyleSet = new Set();

const getStaticStyle = ElementClass => {
let componentStaticStyles = ElementClass.staticAreaStyles;
if (Array.isArray(componentStaticStyles)) {
componentStaticStyles = componentStaticStyles.join(" ");
}

return componentStaticStyles;
};

/**
* Creates the needed CSS for a web component class in the head tag
* Note: IE11, Edge
Expand All @@ -18,6 +27,14 @@ const createComponentStyleTag = ElementClass => {

let cssContent = getEffectiveStyle(ElementClass);
cssContent = adaptCSSForIE(cssContent, tag);

// Append static CSS, if any, for IE
let staticCssContent = getStaticStyle(ElementClass);
if (staticCssContent) {
staticCssContent = adaptCSSForIE(staticCssContent, "ui5-static-area-item");
cssContent = `${cssContent} ${staticCssContent}`;
}

createStyleInHead(cssContent, {
"data-ui5-element-styles": tag,
"disabled": "disabled",
Expand Down