diff --git a/packages/base/src/CSS.js b/packages/base/src/CSS.js index 2329a928f705..93fb5a141b5e 100644 --- a/packages/base/src/CSS.js +++ b/packages/base/src/CSS.js @@ -1,44 +1,56 @@ import { getTheme } from "./Configuration.js"; import { getEffectiveStyle } from "./Theming.js"; +import { injectWebComponentStyle } from "./theming/StyleInjection.js"; const styleMap = new Map(); -const createStyleElement = css => { - // Create a local ${templateResult}`; + } + render(templateResult, domNode, { eventContext }); } } diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs index a4063d276689..bec692b5083c 100644 --- a/packages/main/src/Button.hbs +++ b/packages/main/src/Button.hbs @@ -5,6 +5,7 @@ aria-disabled="{{ariaDisabled}}" data-sap-focus-ref {{> ariaPressed}} + dir="{{rtl}}" > {{#if icon}} + class="{{classes.main}}" + dir="{{rtl}}" +> +
{ diff --git a/packages/main/src/CheckBox.hbs b/packages/main/src/CheckBox.hbs index 174738a4914c..1e9451ee0e1f 100644 --- a/packages/main/src/CheckBox.hbs +++ b/packages/main/src/CheckBox.hbs @@ -4,7 +4,9 @@ aria-checked="{{checked}}" aria-readonly="{{ariaReadonly}}" aria-disabled="{{ariaDisabled}}" - tabindex="{{tabIndex}}"> + tabindex="{{tabIndex}}" + dir="{{rtl}}" +>
diff --git a/packages/main/src/CheckBox.js b/packages/main/src/CheckBox.js index ee13b0b6fd05..e6d22e47f0fa 100644 --- a/packages/main/src/CheckBox.js +++ b/packages/main/src/CheckBox.js @@ -2,6 +2,8 @@ import { isDesktop } from "@ui5/webcomponents-core/dist/sap/ui/Device.js"; import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js"; +import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js"; +import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js"; import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; import CheckBoxRenderer from "./build/compiled/CheckBoxRenderer.lit.js"; import Label from "./Label.js"; @@ -255,6 +257,7 @@ class CheckBox extends UI5Element { "ui5-checkbox--warning": this.valueState === "Warning", "ui5-checkbox--wrap": this.wrap, "ui5-checkbox--hoverable": !this.disabled && !this.readonly && isDesktop(), + "sapUiSizeCompact": getCompactSize(), }, inner: { "ui5-checkbox-inner": true, @@ -276,6 +279,10 @@ class CheckBox extends UI5Element { return this.disabled ? undefined : "0"; } + get rtl() { + return getEffectiveRTL() ? "rtl" : undefined; + } + static async define(...params) { await Label.define(); diff --git a/packages/main/src/DayPicker.js b/packages/main/src/DayPicker.js index d22471ce0b2f..3762543f80b2 100644 --- a/packages/main/src/DayPicker.js +++ b/packages/main/src/DayPicker.js @@ -1,7 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider.js"; -import { getCalendarType } from "@ui5/webcomponents-base/src/Configuration.js"; +import { getCalendarType, getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js"; import { getFormatLocale } from "@ui5/webcomponents-base/src/FormatSettings.js"; import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation.js"; import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; @@ -434,6 +434,7 @@ class DayPicker extends UI5Element { return { wrapper: { "sapWCDayPicker": true, + "sapUiSizeCompact": getCompactSize(), }, weekNumberContainer: { "sapWCDayPickerWeekNumberContainer": true, diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js index e9f2cb6c912c..906c885f1b60 100644 --- a/packages/main/src/Input.js +++ b/packages/main/src/Input.js @@ -2,7 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import { isIE } from "@ui5/webcomponents-core/dist/sap/ui/Device.js"; import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js"; - +import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js"; import { isUp, isDown, @@ -534,6 +534,7 @@ class Input extends UI5Element { sapWCInput: true, sapWCInputFocused: this._focused, sapWCFocus: this._focused, + sapUiSizeCompact: getCompactSize(), }, wrapper: { sapWCInputBaseContentWrapper: true, diff --git a/packages/main/src/List.js b/packages/main/src/List.js index 84f90af9e8c8..1c01d8e5715a 100644 --- a/packages/main/src/List.js +++ b/packages/main/src/List.js @@ -4,10 +4,14 @@ import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation. import FocusHelper from "@ui5/webcomponents-base/src/FocusHelper.js"; import { isDesktop } from "@ui5/webcomponents-core/dist/sap/ui/Device.js"; import { isTabNext } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; +import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js"; import ListItemBase from "./ListItemBase.js"; import ListMode from "./types/ListMode.js"; import ListSeparators from "./types/ListSeparators.js"; import ListItemType from "./types/ListItemType.js"; +import StandardListItem from "./StandardListItem.js"; +import CustomListItem from "./CustomListItem.js"; +import GroupHeaderListItem from "./GroupHeaderListItem.js"; // Template import ListRenderer from "./build/compiled/ListRenderer.lit.js"; @@ -568,6 +572,7 @@ class List extends UI5Element { main: { sapMList: true, sapMListInsetBG: this.inset, + sapUiSizeCompact: getCompactSize(), }, ul: { sapMListItems: true, @@ -584,6 +589,16 @@ class List extends UI5Element { }, }; } + + static async define(...params) { + await Promise.all([ + StandardListItem.define(), + CustomListItem.define(), + GroupHeaderListItem.define(), + ]); + + super.define(...params); + } } Bootstrap.boot().then(_ => { diff --git a/packages/main/src/ListItem.hbs b/packages/main/src/ListItem.hbs index 70a8404f217d..777376aa6094 100644 --- a/packages/main/src/ListItem.hbs +++ b/packages/main/src/ListItem.hbs @@ -1,6 +1,8 @@
  • + class="{{classes.main}}" + dir="{{rtl}}" +> {{#if placeSelectionElementBefore}} {{> selectionElement}} {{/if}} diff --git a/packages/main/src/ListItemBase.js b/packages/main/src/ListItemBase.js index 969cc5923463..ce6959ea56db 100644 --- a/packages/main/src/ListItemBase.js +++ b/packages/main/src/ListItemBase.js @@ -1,7 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; import FocusHelper from "@ui5/webcomponents-base/src/FocusHelper.js"; import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; -import { isDesktop } from "@ui5/webcomponents-core/dist/sap/ui/Device.js"; +import { isDesktop, isPhone } from "@ui5/webcomponents-core/dist/sap/ui/Device.js"; +import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js"; +import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js"; // Styles import styles from "./themes/ListItemBase.css.js"; @@ -110,12 +112,18 @@ class ListItemBase extends UI5Element { "sapMLIB-CTX": true, sapMLIBShowSeparator: true, sapMLIBFocusable: isDesktop(), + "sap-phone": isPhone(), + "sapUiSizeCompact": getCompactSize(), }, inner: { sapMLIBContent: true, }, }; } + + get rtl() { + return getEffectiveRTL() ? "rtl" : undefined; + } } export default ListItemBase; diff --git a/packages/main/src/MonthPicker.hbs b/packages/main/src/MonthPicker.hbs index 72781045e25c..13d8c0d36175 100644 --- a/packages/main/src/MonthPicker.hbs +++ b/packages/main/src/MonthPicker.hbs @@ -1,5 +1,5 @@
    +
    + tabindex="{{tabIndex}}" + dir="{{rtl}}" +>
    @@ -16,4 +18,4 @@ {{#if _label.text}} {{_label.text}} {{/if}} -
    \ No newline at end of file +
    diff --git a/packages/main/src/RadioButton.js b/packages/main/src/RadioButton.js index e5eb342b604c..daee49e9d8e0 100644 --- a/packages/main/src/RadioButton.js +++ b/packages/main/src/RadioButton.js @@ -1,5 +1,6 @@ import { isDesktop } from "@ui5/webcomponents-core/dist/sap/ui/Device.js"; import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js"; +import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js"; import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js"; @@ -341,6 +342,7 @@ class RadioButton extends UI5Element { sapMRbRo: this.readonly, sapMRbErr: this.valueState === "Error", sapMRbWarn: this.valueState === "Warning", + sapUiSizeCompact: getCompactSize(), }, inner: { sapMRbInner: true, @@ -368,6 +370,11 @@ class RadioButton extends UI5Element { get circle() { return getCompactSize() ? SVGConfig.compact : SVGConfig.default; } + + + get rtl() { + return getEffectiveRTL() ? "rtl" : undefined; + } } Bootstrap.boot().then(_ => { diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs index 0742ebedc7ed..8aad24c3039e 100644 --- a/packages/main/src/Select.hbs +++ b/packages/main/src/Select.hbs @@ -1,4 +1,8 @@ -
    +
    diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js index 7816cb2c76d2..596c5a2a332b 100644 --- a/packages/main/src/Select.js +++ b/packages/main/src/Select.js @@ -8,6 +8,8 @@ import { isEscape, isShow, } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; +import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js"; +import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js"; import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js"; import Suggestions from "./Suggestions.js"; @@ -365,6 +367,7 @@ class Select extends UI5Element { "sapWCSelectOpened": this._opened, "sapWCSelectState": this.valueState !== "None", [`sapWCSelect${this.valueState}`]: true, + "sapUiSizeCompact": getCompactSize(), }, }; } @@ -372,6 +375,10 @@ class Select extends UI5Element { get tabIndex() { return this.disabled ? "-1" : "0"; } + + get rtl() { + return getEffectiveRTL() ? "rtl" : undefined; + } } Bootstrap.boot().then(_ => { diff --git a/packages/main/src/ShellBar.hbs b/packages/main/src/ShellBar.hbs index 23db9b500555..ff844059db9f 100644 --- a/packages/main/src/ShellBar.hbs +++ b/packages/main/src/ShellBar.hbs @@ -1,5 +1,7 @@ -
    - +
    {{#if icon}} diff --git a/packages/main/src/ShellBar.js b/packages/main/src/ShellBar.js index 2376b18c7ebc..2fb172691d37 100644 --- a/packages/main/src/ShellBar.js +++ b/packages/main/src/ShellBar.js @@ -4,6 +4,7 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; import ResizeHandler from "@ui5/webcomponents-base/src/delegate/ResizeHandler.js"; import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation.js"; import { isSpace, isEscape } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; +import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js"; import StandardListItem from "./StandardListItem.js"; import List from "./List.js"; import Icon from "./Icon.js"; @@ -860,6 +861,10 @@ class ShellBar extends UI5Element { return getRTL() ? "Left" : "Right"; } + get rtl() { + return getEffectiveRTL() ? "rtl" : undefined; + } + static async define(...params) { await Promise.all([ Icon.define(), diff --git a/packages/main/src/Switch.hbs b/packages/main/src/Switch.hbs index cd66671029b7..499fe69fb27b 100644 --- a/packages/main/src/Switch.hbs +++ b/packages/main/src/Switch.hbs @@ -2,7 +2,9 @@ class="{{classes.main}}" role="checkbox" aria-checked="{{checked}}" - tabindex="{{tabIndex}}"> + tabindex="{{tabIndex}}" + dir="{{rtl}}" +>
    diff --git a/packages/main/src/Switch.js b/packages/main/src/Switch.js index 09c2bab9fb25..ce8f75ce3f05 100644 --- a/packages/main/src/Switch.js +++ b/packages/main/src/Switch.js @@ -2,6 +2,8 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; import { isDesktop } from "@ui5/webcomponents-core/dist/sap/ui/Device.js"; +import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js"; +import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js"; // Template import SwitchRenderer from "./build/compiled/SwitchRenderer.lit.js"; @@ -197,9 +199,14 @@ class Switch extends UI5Element { "ui5-switch--checked": this.checked, "ui5-switch--semantic": graphical, "ui5-switch--no-label": !hasLabel, + "sapUiSizeCompact": getCompactSize(), }, }; } + + get rtl() { + return getEffectiveRTL() ? "rtl" : undefined; + } } Bootstrap.boot().then(_ => { diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs index 79824ffb0431..afc9c3e2c5e7 100644 --- a/packages/main/src/TabContainer.hbs +++ b/packages/main/src/TabContainer.hbs @@ -1,4 +1,7 @@ -
    +
    diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index b5c143acd37e..d89037589046 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -4,6 +4,8 @@ import ResizeHandler from "@ui5/webcomponents-base/src/delegate/ResizeHandler.js import ScrollEnablement from "@ui5/webcomponents-base/src/delegate/ScrollEnablement.js"; import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation.js"; import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; +import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js"; +import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js"; import TabContainerRenderer from "./build/compiled/TabContainerRenderer.lit.js"; import Button from "./Button.js"; import CustomListItem from "./CustomListItem.js"; @@ -397,6 +399,7 @@ class TabContainer extends UI5Element { return { main: { "ui5-tab-container": true, + "sapUiSizeCompact": getCompactSize(), }, header: { "ui5-tc__header": true, @@ -436,6 +439,10 @@ class TabContainer extends UI5Element { return this.items.some(item => item.icon) && this.items.some(item => item.text); } + get rtl() { + return getEffectiveRTL() ? "rtl" : undefined; + } + static async define(...params) { await Promise.all([ Button.define(), diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js index 60dbf9a0af04..ebaee91f4921 100644 --- a/packages/main/src/Table.js +++ b/packages/main/src/Table.js @@ -3,6 +3,7 @@ import ResizeHandler from "@ui5/webcomponents-base/src/delegate/ResizeHandler.js import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation.js"; import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import { isSpace } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; +import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js"; import TableColumn from "./TableColumn.js"; import TableRow from "./TableRow.js"; import TableRenderer from "./build/compiled/TableRenderer.lit.js"; @@ -252,6 +253,7 @@ class Table extends UI5Element { return { main: { sapWCTableHeader: true, + sapUiSizeCompact: getCompactSize(), }, columns: { sapWCTableColumnWrapper: true, diff --git a/packages/main/src/Timeline.hbs b/packages/main/src/Timeline.hbs index d932afdcb287..96f388511daf 100644 --- a/packages/main/src/Timeline.hbs +++ b/packages/main/src/Timeline.hbs @@ -1,4 +1,4 @@ -
    +
      {{#each items}}
    • diff --git a/packages/main/src/Timeline.js b/packages/main/src/Timeline.js index 0464e45e5bd8..dbb51ae3b039 100644 --- a/packages/main/src/Timeline.js +++ b/packages/main/src/Timeline.js @@ -1,6 +1,7 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation.js"; +import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js"; import TimelineItem from "./TimelineItem.js"; import TimelineRenderer from "./build/compiled/TimelineRenderer.lit.js"; @@ -86,6 +87,15 @@ class Timeline extends UI5Element { this._delegates.push(this._itemNavigation); } + get classes() { + return { + main: { + sapWCTimeline: true, + sapUiSizeCompact: getCompactSize(), + }, + }; + } + static async define(...params) { await TimelineItem.define(); diff --git a/packages/main/src/TimelineItem.hbs b/packages/main/src/TimelineItem.hbs index 0938460990b8..82efa9f56398 100644 --- a/packages/main/src/TimelineItem.hbs +++ b/packages/main/src/TimelineItem.hbs @@ -1,4 +1,7 @@ -
      +
      {{#if icon}} diff --git a/packages/main/src/TimelineItem.js b/packages/main/src/TimelineItem.js index 86843c72adc0..78884465c87b 100644 --- a/packages/main/src/TimelineItem.js +++ b/packages/main/src/TimelineItem.js @@ -1,5 +1,7 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; +import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js"; +import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js"; import Icon from "./Icon.js"; import Link from "./Link.js"; import TimelineItemRenderer from "./build/compiled/TimelineItemRenderer.lit.js"; @@ -145,6 +147,10 @@ class TimelineItem extends UI5Element { get classes() { return { + main: { + sapWCTimelineItem: true, + sapUiSizeCompact: getCompactSize(), + }, indicator: { sapWCTimelineIndicator: true, sapWCTimelineIndicatorNoIcon: !this.icon, @@ -152,6 +158,10 @@ class TimelineItem extends UI5Element { }; } + get rtl() { + return getEffectiveRTL() ? "rtl" : undefined; + } + static async define(...params) { await Promise.all([ Icon.define(), diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js index 236a1257fec6..9477d9774c4d 100644 --- a/packages/main/src/Tokenizer.js +++ b/packages/main/src/Tokenizer.js @@ -2,8 +2,8 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; import ResizeHandler from "@ui5/webcomponents-base/src/delegate/ResizeHandler.js"; import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation.js"; +import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js"; import { fetchResourceBundle, getResourceBundle } from "@ui5/webcomponents-base/src/ResourceBundle.js"; - import TokenizerRenderer from "./build/compiled/TokenizerRenderer.lit.js"; import { MULTIINPUT_SHOW_MORE_TOKENS } from "./i18n/defaults.js"; @@ -204,6 +204,7 @@ class Tokenizer extends UI5Element { "ui5-tokenizer-nmore--wrapper": this.showMore, "ui5-tokenizer--wrapper": true, "ui5-tokenizer-no-padding": !this.tokens.length, + "sapUiSizeCompact": getCompactSize(), }, content: { "ui5-tokenizer--content": true, diff --git a/packages/main/src/YearPicker.hbs b/packages/main/src/YearPicker.hbs index fd5bc1d84566..07d32cb37f1a 100644 --- a/packages/main/src/YearPicker.hbs +++ b/packages/main/src/YearPicker.hbs @@ -1,5 +1,5 @@
      header { +.sapUiSizeCompact.sapMPanel > header { height: 2rem; -} \ No newline at end of file +} diff --git a/packages/main/src/themes/RadioButton.css b/packages/main/src/themes/RadioButton.css index 01f0af5efd97..33b57e71bda6 100644 --- a/packages/main/src/themes/RadioButton.css +++ b/packages/main/src/themes/RadioButton.css @@ -138,22 +138,22 @@ ui5-radiobutton:not([hidden]) { } /* Compact size */ -.sapUiSizeCompact .sapMRb { +.sapUiSizeCompact.sapMRb { height : 2rem; } -.sapUiSizeCompact .sapMRb:focus:before { +.sapUiSizeCompact.sapMRb:focus:before { top: .375rem; bottom: .375rem; left: .375rem; right: .325rem; } -.sapUiSizeCompact .sapMRb.sapMRbHasLabel:focus:before { +.sapUiSizeCompact.sapMRb.sapMRbHasLabel:focus:before { right: 0; } -.sapUiSizeCompact .sapMRb .sapMRbInner { +.sapUiSizeCompact.sapMRb .sapMRbInner { width: 2rem; height: 2rem; display: flex; @@ -161,26 +161,26 @@ ui5-radiobutton:not([hidden]) { justify-content: center; } -.sapUiSizeCompact .sapMRb .sapMRbInner .sapMRbSvg { +.sapUiSizeCompact.sapMRb .sapMRbInner .sapMRbSvg { height: 2rem; width: 2rem; line-height: 2rem; } -.sapUiSizeCompact .sapMRb ui5-label.labelInRadioButton { +.sapUiSizeCompact.sapMRb ui5-label.labelInRadioButton { line-height: 2rem; height: 2rem; width: calc(100% - 2rem + 1px); } /* RTL */ -span[dir="rtl"] .sapMRb.sapMRbHasLabel:focus:before { +[dir="rtl"].sapMRb.sapMRbHasLabel:focus:before { left: 0; right: 0.5rem; } /* RTL in Compact */ -span[dir="rtl"].sapUiSizeCompact .sapMRb.sapMRbHasLabel:focus:before { +span[dir="rtl"].sapUiSizeCompact.sapMRb.sapMRbHasLabel:focus:before { left: 0; right: 0.375rem; } @@ -192,4 +192,4 @@ span[dir="rtl"].sapUiSizeCompact .sapMRb.sapMRbHasLabel:focus:before { ui5-radiobutton.singleSelectionRadioButton .sapMRb .sapMRbInner .sapMRbSvgOuter { fill: var(--sapUiListBackground); -} \ No newline at end of file +} diff --git a/packages/main/src/themes/Select.css b/packages/main/src/themes/Select.css index 6b6f8611923f..e79790890551 100644 --- a/packages/main/src/themes/Select.css +++ b/packages/main/src/themes/Select.css @@ -112,31 +112,31 @@ ui5-select:not([hidden]) { } /* Compact */ -.sapUiSizeCompact .sapWCSelect { +.sapUiSizeCompact.sapWCSelect { height: 1.625rem; } -.sapUiSizeCompact .sapWCSelect .sapWCSelectDropDownIcon { +.sapUiSizeCompact.sapWCSelect .sapWCSelectDropDownIcon { width: 2rem; } /* RTL */ -:host(ui5-select) span[dir="rtl"] .sapWCSelect .sapWCSelectLabel { +:host(ui5-select) [dir="rtl"].sapWCSelect .sapWCSelectLabel { padding-left: 0; padding-right: 0.5rem; } -:host(ui5-select) span[dir="rtl"] .sapWCSelect:hover:not(.sapWCSelectDisabled) .sapWCSelectDropDownIcon { +:host(ui5-select) [dir="rtl"].sapWCSelect:hover:not(.sapWCSelectDisabled) .sapWCSelectDropDownIcon { border-left: var(--_ui5_select_rtl_hover_icon_left_border); border-right: var(--_ui5_select_rtl_hover_icon_right_border); } -ui5-select span[dir="rtl"] .sapWCSelect .sapWCSelectLabel { +ui5-select [dir="rtl"].sapWCSelect .sapWCSelectLabel { padding-left: 0; padding-right: 0.5rem; } -ui5-select span[dir="rtl"] .sapWCSelect:hover:not(.sapWCSelectDisabled) .sapWCSelectDropDownIcon { +ui5-select [dir="rtl"].sapWCSelect:hover:not(.sapWCSelectDisabled) .sapWCSelectDropDownIcon { border-left: var(--_ui5_select_rtl_hover_icon_left_border); border-right: var(--_ui5_select_rtl_hover_icon_right_border); -} \ No newline at end of file +} diff --git a/packages/main/src/themes/ShellBar.css b/packages/main/src/themes/ShellBar.css index 71e2cd1601a6..13366f6f73e5 100644 --- a/packages/main/src/themes/ShellBar.css +++ b/packages/main/src/themes/ShellBar.css @@ -386,31 +386,31 @@ ui5-shellbar:not([hidden]) { background: var(--sapUiShellColor); } -span[dir=rtl] ::slotted(ui5-icon) { +[dir="rtl"] ::slotted(ui5-icon) { margin-left: 0.5rem; margin-right: 0; } -span[dir=rtl] .sapWCShellBarMenuButton { +[dir="rtl"] .sapWCShellBarMenuButton { margin-right: 0.5rem; margin-left: 0; } -span[dir=rtl] .sapWCShellBarMenuButtonInteractive .sapWCShellBarMenuButtonArrow { +[dir="rtl"] .sapWCShellBarMenuButtonInteractive .sapWCShellBarMenuButtonArrow { margin-right: .5rem; margin-left: 0; } -span[dir=rtl] .sapWCShellBarOverflowContainerRight { +[dir="rtl"] .sapWCShellBarOverflowContainerRight { margin-right: 8rem; margin-left: 0; } -span[dir=rtl] .sapWCShellBarOverflowContainerRight .sapWCShellBarOverflowContainerRightChild { +[dir="rtl"] .sapWCShellBarOverflowContainerRight .sapWCShellBarOverflowContainerRightChild { float: left; } -span[dir=rtl] .sapWCShellBarSizeS .sapWCShellBarOverflowContainerRight { +[dir="rtl"] .sapWCShellBarSizeS .sapWCShellBarOverflowContainerRight { margin-right: 0; } @@ -443,4 +443,4 @@ span[dir=rtl] .sapWCShellBarSizeS .sapWCShellBarOverflowContainerRight { left: 2px; top: 2px; z-index: 1; -} \ No newline at end of file +} diff --git a/packages/main/src/themes/ShellBarInput.css b/packages/main/src/themes/ShellBarInput.css index 27b0dc100e7d..0e53ce678c79 100644 --- a/packages/main/src/themes/ShellBarInput.css +++ b/packages/main/src/themes/ShellBarInput.css @@ -34,10 +34,10 @@ ui5-shellbar ui5-input[slot="searchField"] .sapWCInputBase.sapWCFocus .sapWCInpu border: 1px dotted var(--sapUiContentContrastFocusColor); } -:host(ui5-input[slot="searchField"]) .sapUiSizeCompact .sapWCInput { +:host(ui5-input[slot="searchField"]) .sapUiSizeCompact.sapWCInput { height: 2.25rem; } -ui5-shellbar ui5-input[slot="searchField"] .sapUiSizeCompact .sapWCInput { +ui5-shellbar ui5-input[slot="searchField"] .sapUiSizeCompact.sapWCInput { height: 2.25rem; } diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css index 4d7a0269c20e..5f01b847937b 100644 --- a/packages/main/src/themes/Switch.css +++ b/packages/main/src/themes/Switch.css @@ -8,11 +8,6 @@ ui5-switch:not([hidden]) { display: inline-block; } -span[data-sap-ui-wc-root] { - display: inline-block; - width: 100%; -} - .ui5-switch-wrapper { position: relative; width: 100%; @@ -296,64 +291,64 @@ span[data-sap-ui-wc-root] { } /* Compact size */ -.sapUiSizeCompact .ui5-switch-wrapper { +.sapUiSizeCompact.ui5-switch-wrapper { height: var(--_ui5_switch_compact_height); min-width: var(--_ui5_switch_compact_width); } -.sapUiSizeCompact .ui5-switch-wrapper { +.sapUiSizeCompact.ui5-switch-wrapper { height: var(--_ui5_switch_compact_height); min-width: var(--_ui5_switch_compact_width); } -.sapUiSizeCompact .ui5-switch-wrapper .ui5-switch-handle { +.sapUiSizeCompact.ui5-switch-wrapper .ui5-switch-handle { height: var(--_ui5_switch_handle_compact_height); width: var(--_ui5_switch_handle_compact_width); } -.sapUiSizeCompact .ui5-switch-wrapper .ui5-switch-text--on { +.sapUiSizeCompact.ui5-switch-wrapper .ui5-switch-text--on { left: calc(-100% + 1.5625rem); } -.sapUiSizeCompact .ui5-switch-wrapper.ui5-switch--checked .ui5-switch-slider { +.sapUiSizeCompact.ui5-switch-wrapper.ui5-switch--checked .ui5-switch-slider { /* Move slider to oposite end, taking into account the handle as an offset. */ /* Note: translate(calc()) does not work in IE11 */ transform: translateX(100%) translateX(-1.5rem); } -.sapUiSizeCompact .ui5-switch-wrapper.ui5-switch--no-label { +.sapUiSizeCompact.ui5-switch-wrapper.ui5-switch--no-label { min-width: var(--_ui5_switch_compact_no_label_width); } -.sapUiSizeCompact .ui5-switch--no-label .ui5-switch-track { +.sapUiSizeCompact.ui5-switch--no-label .ui5-switch-track { height: var(--_ui5_switch_track_compact_no_label_height); } /* RTL */ -[dir="rtl"] .ui5-switch-wrapper .ui5-switch-handle { +[dir="rtl"].ui5-switch-wrapper .ui5-switch-handle { left: 0; right: -1px; } -[dir="rtl"] .ui5-switch-wrapper.ui5-switch--checked .ui5-switch-slider { +[dir="rtl"].ui5-switch-wrapper.ui5-switch--checked .ui5-switch-slider { transform: translateX(1.875rem) translateX(-100%); } -[dir="rtl"] .ui5-switch-wrapper .ui5-switch-text--on { +[dir="rtl"].ui5-switch-wrapper .ui5-switch-text--on { right: calc(-100% + 1.9125rem); left: auto; } -[dir="rtl"] .ui5-switch-wrapper .ui5-switch-text--off { +[dir="rtl"].ui5-switch-wrapper .ui5-switch-text--off { right: auto; left: 0; } /* RTL + Compact */ -.sapUiSizeCompact[dir="rtl"] .ui5-switch-wrapper.ui5-switch--checked .ui5-switch-slider { +.sapUiSizeCompact[dir="rtl"].ui5-switch-wrapper.ui5-switch--checked .ui5-switch-slider { transform: translateX(-100%) translateX(1.5rem); } -.sapUiSizeCompact[dir="rtl"] .ui5-switch-wrapper .ui5-switch-text--on { +.sapUiSizeCompact[dir="rtl"].ui5-switch-wrapper .ui5-switch-text--on { right: calc(-100% + 1.5625rem); -} \ No newline at end of file +} diff --git a/packages/main/src/themes/Table.css b/packages/main/src/themes/Table.css index e2a64b898a92..58b0cbceed3b 100644 --- a/packages/main/src/themes/Table.css +++ b/packages/main/src/themes/Table.css @@ -25,7 +25,7 @@ ui5-table:not([hidden]) { color: var(--sapUiListTextColor) } -.sapUiSizeCompact .sapWCTableHeader { +.sapUiSizeCompact.sapWCTableHeader { height: 2rem; } diff --git a/packages/main/src/themes/Timeline.css b/packages/main/src/themes/Timeline.css index 5c121fbb43a5..61e53698c0dd 100644 --- a/packages/main/src/themes/Timeline.css +++ b/packages/main/src/themes/Timeline.css @@ -27,7 +27,7 @@ ui5-timeline:not([hidden]) { margin-bottom: 0; } -.sapUiSizeCompact .sapWCTimeline { +.sapUiSizeCompact.sapWCTimeline { padding: .5rem; } @@ -37,4 +37,4 @@ ui5-timeline:not([hidden]) { .sapUiSizeCompact .sapWCTimelineListItem :last-child { margin-bottom: 0; -} \ No newline at end of file +} diff --git a/packages/main/src/themes/Tokenizer.css b/packages/main/src/themes/Tokenizer.css index f2bbce314545..311321d29e11 100644 --- a/packages/main/src/themes/Tokenizer.css +++ b/packages/main/src/themes/Tokenizer.css @@ -12,7 +12,7 @@ ui5-tokenizer { height: 2.25rem; } -span.sapUiSizeCompact .ui5-tokenizer--wrapper { +.sapUiSizeCompact.ui5-tokenizer--wrapper { padding: 0.1875rem 0.125rem; } @@ -63,11 +63,3 @@ span.sapUiSizeCompact .ui5-tokenizer--wrapper { width: 1px; margin-top: auto; } - -/* Edge / IE specific coding */ - -span[data-sap-ui-wc-root] { - display: flex; - height: 100%; - width: 100%; -} diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Kitchen.html b/packages/main/test/sap/ui/webcomponents/main/pages/Kitchen.html index e24fa66cde01..06e7ac09a712 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/Kitchen.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/Kitchen.html @@ -19,7 +19,7 @@ - + diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Simple.html b/packages/main/test/sap/ui/webcomponents/main/pages/Simple.html index 732f03ed3cc2..289abe4f367f 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/Simple.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/Simple.html @@ -29,27 +29,7 @@ - Normal link -
      - Default prevented -
      - Action Bar Button - - - - - Anna - Anelia - Bobi - - - - + ivan - \ No newline at end of file + diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/kitchen-scripts.js b/packages/main/test/sap/ui/webcomponents/main/pages/kitchen-scripts.js index 79e199a1a98b..a6fd4ec11e7c 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/kitchen-scripts.js +++ b/packages/main/test/sap/ui/webcomponents/main/pages/kitchen-scripts.js @@ -20,6 +20,12 @@ document.addEventListener("DOMContentLoaded", function(event) { document.body.style="background: #fff"; } + if (RTL) { + document.body.setAttribute("dir", "rtl"); + } else { + document.body.removeAttribute("dir"); + } + /* SideNav */ function toggleSideNav(toggle) { if (toggle) { diff --git a/packages/main/test/sap/ui/webcomponents/main/qunit/Table.qunit.js b/packages/main/test/sap/ui/webcomponents/main/qunit/Table.qunit.js index 4591b0aa12b5..4950e5edfe08 100644 --- a/packages/main/test/sap/ui/webcomponents/main/qunit/Table.qunit.js +++ b/packages/main/test/sap/ui/webcomponents/main/qunit/Table.qunit.js @@ -35,7 +35,7 @@ TestHelper.ready(function () { }); QUnit.test("Two column grid should be created with 2 columns", function (assert) { - var tableDOM = this.table._getRoot().children[0]; + var tableDOM = this.table.getDomRef(); var tableColumn = tableDOM.children[0]; var columnGridStyles = tableColumn.style["grid-template-columns"]; @@ -50,8 +50,8 @@ TestHelper.ready(function () { col1.setAttribute("width", "100px"); RenderScheduler.whenFinished().then(function() { - var tableDOM = this.table._getRoot().children[0]; - var rollDom = roll1._getRoot().children[0]; + var tableDOM = this.table.getDomRef(); + var rollDom = roll1.getDomRef(); var tableColumn = tableDOM.children[0]; var columnGridStyles = tableColumn.style["grid-template-columns"]; @@ -72,8 +72,8 @@ TestHelper.ready(function () { col1.setAttribute("min-width", "500px"); setTimeout(function() { - var tableDOM = this.table._getRoot().children[0]; - var rollDom = roll1._getRoot().children[0]; + var tableDOM = this.table.getDomRef(); + var rollDom = roll1.getDomRef(); var tableColumn = tableDOM.children[0]; var columnGridStyles = tableColumn.style["grid-template-columns"]; @@ -96,8 +96,8 @@ TestHelper.ready(function () { col1.setAttribute("demand-popin", true); setTimeout(function() { - var tableDOM = this.table._getRoot().children[0]; - var rollDom = roll1._getRoot().children[0]; + var tableDOM = this.table.getDomRef(); + var rollDom = roll1.getDomRef(); var tableColumn = tableDOM.children[0]; var columnGridStyles = tableColumn.style["grid-template-columns"]; diff --git a/packages/main/test/specs/Label.spec.js b/packages/main/test/specs/Label.spec.js index b0faf59065fa..9bb5b986a29c 100644 --- a/packages/main/test/specs/Label.spec.js +++ b/packages/main/test/specs/Label.spec.js @@ -65,4 +65,4 @@ describe("General API", () => { assert.ok(field.isFocused(), "ui5-datepicker should be focussed"); }); }); -}); \ No newline at end of file +});