Skip to content

Commit 2db62ba

Browse files
MapTo0MapTo0
authored
refactor: propagate compact size when ui5-content-density-compact class is set (#1136)
- add a global classes `ui5-content-density-compact`, `sapUiSizeCompact`(private) which redefine all **COSY** variables with **COMPACT** values - adopt all components - remove compact setting from Configuration - update documentation for compact / cosy setting - remove content density related modules BREAKING CHANGE: set/get for compact size is removed, use CSS class ui5-content-density-compact as a replacement.
1 parent 964dbc2 commit 2db62ba

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+266
-695
lines changed

‎README.md

+5-6
Original file line numberDiff line numberDiff line change
@@ -127,14 +127,13 @@ UI5 Web Components support right-to-left text direction (RTL). To enable RTL glo
127127
```
128128

129129
### Configure Compact/Cozy setting
130-
UI5 Web Components supports ```Compact``` and ```Cozy``` mode. It is set to ```Cozy``` by default. To enable ```Compact``` globally, provide the option ```compactSize: true``` in the configuration ```script``` tag:
130+
UI5 Web Components supports ```Compact``` and ```Cozy``` mode. It is set to ```Cozy``` by default. To enable ```Compact```, provide the css class ```ui5-content-density-compact``` to any of your HTML elements and it apply compact size to all of its children.
131131

132132
```html
133-
<script data-ui5-config type="application/json">
134-
{
135-
"compactSize": true
136-
}
137-
</script>
133+
<body class="ui5-content-density-compact">
134+
<ui5-button></ui5-button>
135+
<ui5-checkbox></ui5-checkbox>
136+
</body>
138137
```
139138

140139
### Configure Calendar Type

‎docs/Configuration.md

+4-3
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,15 @@ There are several configuration settings that affect all UI5 Web Components glob
1010
[theme](#theme) | sap_fiori_3, sap_fiori_3_dark, sap_belize, sap_belize_hcb | sap_fiori_3 | Visual theme
1111
language | en, de, es, etc... | en | Language to be used for translatable texts
1212
[RTL](#rtl) | true, false | false | When true, sets global text direction to right-to-left
13-
compactSize | true, false | false | When set, enforces compact density (smaller margins/paddings)
1413
[animationMode](#animationMode) | full, basic, minimal, none | full | Defines different animation scenarios or levels
1514
calendarType | Gregorian, Islamic, Buddhist, Japanese, Persian | Gregorian | Default calendar type for date-related web components
1615
[noConflict](#noConflict) | true, false | Object | false | When set to true, all events will be fired with a "ui5-" prefix only
1716
[formatSettings](#formatSettings)| See the [Format settings](#formatSettings) section below | Empty object | Allows to override locale-specific configuration
1817

18+
### Content Density
19+
20+
UI5 Web Components contains different content densities for certain controls that allow your app to adapt to the device in question, allowing you to display larger controls for touch-enabled devices and a smaller, more compact design for devices that are operated by mouse. Cosy size is the default density for all components. Compact Size could be set by adding a class `ui5-content-density-compact` to an html element. It cascades all the way down and enforces compact density (smaller margins/paddings, smaller touch areas, etc).
21+
1922
<a name="theme"></a>
2023
### Theme
2124
The `theme` setting values above are the technical names of our themes.
@@ -92,7 +95,6 @@ In order to provide configuration settings, include the following ```<script>```
9295
<script data-ui5-config type="application/json">
9396
{
9497
"rtl": true,
95-
"compactSize": true,
9698
"language": "ja",
9799
"calendarType": "Japanese",
98100
"formatSettings": {
@@ -118,7 +120,6 @@ To do so, please import the desired functionality from the respective `"@ui5/web
118120
```js
119121
import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
120122
import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
121-
import { getCompactSize, setCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js";
122123
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
123124
import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
124125
import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";

‎docs/Public Module Imports.md

-1
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,6 @@ In order to to be able to use Buddhist, Islamic, Japanese or Persian calendar wi
309309
```js
310310
import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
311311
import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
312-
import { getCompactSize, setCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js";
313312
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
314313
import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
315314
import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";

‎packages/base/bundle.es5.js

-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { getLanguage } from "./dist/config/Language.js";
88
import { getCalendarType } from "./dist/config/CalendarType.js";
99
import { getTheme, setTheme } from "./dist/config/Theme.js";
1010
import { getNoConflict, setNoConflict } from "./dist/config/NoConflict.js";
11-
import { getCompactSize, setCompactSize } from "./dist/config/CompactSize.js";
1211
import { getRTL } from "./dist/config/RTL.js";
1312
import { getFirstDayOfWeek } from "./dist/config/FormatSettings.js";
1413
import { getRegisteredNames as getIconNames } from "./dist/SVGIconRegistry.js"
@@ -19,8 +18,6 @@ const configuration = {
1918
setTheme,
2019
getNoConflict,
2120
setNoConflict,
22-
getCompactSize,
23-
setCompactSize,
2421
getCalendarType,
2522
getRTL,
2623
getFirstDayOfWeek,

‎packages/base/bundle.esm.js

-4
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import "./dist/test-resources/elements/Generic.js";
1313
import "./dist/test-resources/elements/NoShadowDOM.js";
1414
import "./dist/test-resources/elements/Parent.js";
1515
import "./dist/test-resources/elements/Child.js";
16-
import "./dist/test-resources/elements/DensityAware.js";
1716
import "./dist/test-resources/elements/GenericExt.js";
1817

1918
// Test themes - CSS Vars for the sap_fiori_3, sap_fiori_3_dark, sap_belize and sap_belize_hcb themes
@@ -34,7 +33,6 @@ import { getLanguage } from "./dist/config/Language.js";
3433
import { getCalendarType } from "./dist/config/CalendarType.js";
3534
import { getTheme, setTheme } from "./dist/config/Theme.js";
3635
import { getNoConflict, setNoConflict } from "./dist/config/NoConflict.js";
37-
import { getCompactSize, setCompactSize } from "./dist/config/CompactSize.js";
3836
import { getRTL } from "./dist/config/RTL.js";
3937
import { getFirstDayOfWeek } from "./dist/config/FormatSettings.js";
4038
import { getRegisteredNames as getIconNames } from "./dist/SVGIconRegistry.js"
@@ -46,8 +44,6 @@ window["sap-ui-webcomponents-bundle"] = {
4644
setTheme,
4745
getNoConflict,
4846
setNoConflict,
49-
getCompactSize,
50-
setCompactSize,
5147
getCalendarType,
5248
getRTL,
5349
getFirstDayOfWeek,

‎packages/base/src/ContentDensity.js

-20
This file was deleted.

‎packages/base/src/InitialConfiguration.js

-7
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ const initialConfig = {
55
theme: "sap_fiori_3",
66
rtl: null,
77
language: null,
8-
compactSize: false,
98
calendarType: null,
109
noConflict: false, // no URL
1110
formatSettings: {},
@@ -32,11 +31,6 @@ const getLanguage = () => {
3231
return initialConfig.language;
3332
};
3433

35-
const getCompactSize = () => {
36-
initConfiguration();
37-
return initialConfig.compactSize;
38-
};
39-
4034
const getNoConflict = () => {
4135
initConfiguration();
4236
return initialConfig.noConflict;
@@ -119,7 +113,6 @@ export {
119113
getTheme,
120114
getRTL,
121115
getLanguage,
122-
getCompactSize,
123116
getNoConflict,
124117
getCalendarType,
125118
getFormatSettings,

‎packages/base/src/UI5Element.js

-29
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
import merge from "@ui5/webcomponents-utils/dist/sap/base/util/merge.js";
2-
32
import boot from "./boot.js";
43
import { skipOriginalEvent } from "./config/NoConflict.js";
5-
import { getCompactSize } from "./config/CompactSize.js";
64
import DOMObserver from "./compatibility/DOMObserver.js";
75
import UI5ElementMetadata from "./UI5ElementMetadata.js";
86
import Integer from "./types/Integer.js";
97
import RenderScheduler from "./RenderScheduler.js";
108
import { getConstructableStyle, createHeadStyle } from "./CSS.js";
119
import { getEffectiveStyle } from "./Theming.js";
12-
import { attachContentDensityChange } from "./ContentDensity.js";
1310
import { kebabToCamelCase, camelToKebabCase } from "./util/StringHelper.js";
1411
import isValidPropertyName from "./util/isValidPropertyName.js";
1512

@@ -40,8 +37,6 @@ class UI5Element extends HTMLElement {
4037
this._upgradeAllProperties();
4138
this._initializeShadowRoot();
4239

43-
attachContentDensityChange(this._onContentDensityChanged.bind(this));
44-
4540
let deferredResolve;
4641
this._domRefReadyPromise = new Promise(resolve => {
4742
deferredResolve = resolve;
@@ -51,28 +46,6 @@ class UI5Element extends HTMLElement {
5146
this._monitoredChildProps = new Map();
5247
}
5348

54-
/**
55-
* @private
56-
*/
57-
_onContentDensityChanged() {
58-
this._syncContentDensity();
59-
if (this.constructor.getMetadata().getInvalidateOnContentDensityChange()) {
60-
this._invalidate();
61-
}
62-
}
63-
64-
/**
65-
* @private
66-
*/
67-
_syncContentDensity() {
68-
const isCompact = getCompactSize();
69-
if (isCompact) {
70-
this.setAttribute("data-ui5-compact-size", "");
71-
} else {
72-
this.removeAttribute("data-ui5-compact-size");
73-
}
74-
}
75-
7649
/**
7750
* @private
7851
*/
@@ -107,8 +80,6 @@ class UI5Element extends HTMLElement {
10780
* @private
10881
*/
10982
async connectedCallback() {
110-
this._syncContentDensity();
111-
11283
if (!this.constructor._needsShadowDOM()) {
11384
return;
11485
}

‎packages/base/src/UI5ElementMetadata.js

-8
Original file line numberDiff line numberDiff line change
@@ -100,14 +100,6 @@ class UI5ElementMetadata {
100100
getEvents() {
101101
return this.metadata.events || {};
102102
}
103-
104-
/**
105-
* Determines whether this UI5 Element invalidates automatically when content density changes
106-
* @public
107-
*/
108-
getInvalidateOnContentDensityChange() {
109-
return !!this.metadata.invalidateOnContentDensityChange;
110-
}
111103
}
112104

113105
const validateSingleProperty = (value, propData) => {

‎packages/base/src/config/CompactSize.js

-23
This file was deleted.

‎packages/base/test/elements/DensityAware.js

-14
This file was deleted.

‎packages/base/test/pages/ConfigurationScript.html

-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
{
1111
"animationMode": "basic",
1212
"rtl": true,
13-
"compactSize": true,
1413
"language": "ja",
1514
"calendarType": "Japanese",
1615
"formatSettings": {

‎packages/base/test/specs/ConfigurationChange.spec.js

-9
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,6 @@ const assert = require("chai").assert;
33
describe("Some configuration options can be changed at runtime", () => {
44
browser.url("http://localhost:9191/test-resources/pages/Configuration.html");
55

6-
it("Tests that compactSize can be changed", () => {
7-
const res = browser.execute( () => {
8-
const config = window['sap-ui-webcomponents-bundle'].configuration;
9-
config.setCompactSize(true);
10-
return config.getCompactSize();
11-
});
12-
assert.strictEqual(res, true, "compactSize changed to true");
13-
});
14-
156
it("Tests that theme can be changed", () => {
167
const newTheme = 'sap_belize_hcb';
178

‎packages/base/test/specs/ConfigurationScript.spec.js

-8
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,6 @@ describe("Configuration script has effect", () => {
1111
assert.strictEqual(res, true, "RTL is true");
1212
});
1313

14-
it("Tests that compactSize is applied", () => {
15-
const res = browser.execute( () => {
16-
const config = window['sap-ui-webcomponents-bundle'].configuration;
17-
return config.getCompactSize();
18-
});
19-
assert.strictEqual(res, true, "compactSize is true");
20-
});
21-
2214
it("Tests that language is applied", () => {
2315
const res = browser.execute( () => {
2416
const config = window['sap-ui-webcomponents-bundle'].configuration;

‎packages/base/test/specs/ConfigurationURL.spec.js

+1-9
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const assert = require("chai").assert;
22

33
describe("Some settings can be set via URL params", () => {
4-
browser.url("http://localhost:9191/test-resources/pages/Configuration.html?sap-ui-rtl=true&sap-ui-compactSize=true&sap-ui-language=ja&sap-ui-calendarType=Japanese&sap-ui-theme=sap_belize_hcb&sap-ui-animationMode=basic");
4+
browser.url("http://localhost:9191/test-resources/pages/Configuration.html?sap-ui-rtl=true&sap-ui-language=ja&sap-ui-calendarType=Japanese&sap-ui-theme=sap_belize_hcb&sap-ui-animationMode=basic");
55

66
it("Tests that RTL is applied", () => {
77
const res = browser.execute( () => {
@@ -11,14 +11,6 @@ describe("Some settings can be set via URL params", () => {
1111
assert.strictEqual(res, true, "RTL is true");
1212
});
1313

14-
it("Tests that compactSize is applied", () => {
15-
const res = browser.execute( () => {
16-
const config = window['sap-ui-webcomponents-bundle'].configuration;
17-
return config.getCompactSize();
18-
});
19-
assert.strictEqual(res, true, "compactSize is true");
20-
});
21-
2214
it("Tests that language is applied", () => {
2315
const res = browser.execute( () => {
2416
const config = window['sap-ui-webcomponents-bundle'].configuration;

‎packages/base/test/specs/UI5ElementDensityAware.spec.js

-51
This file was deleted.

‎packages/fiori/bundle.es5.js

-2
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,13 @@ import "./bundle.esm.js";
66
import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
77
import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
88
import { setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
9-
import { getCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js";
109
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
1110
import { getRegisteredNames as getIconNames } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js"
1211
const configuration = {
1312
getAnimationMode,
1413
getTheme,
1514
setTheme,
1615
setNoConflict,
17-
getCompactSize,
1816
getRTL,
1917
};
2018
export {

0 commit comments

Comments
 (0)