From ba593e3acc3d82f0ddd64ebedf3ae09d9b4657ea Mon Sep 17 00:00:00 2001 From: Lidiya Georgieva Date: Fri, 15 Nov 2024 16:49:04 +0200 Subject: [PATCH 1/4] fix(ui5-dialog): width on mobile is not bigger than the phone width Issue: When the base font in the 'html' element is changed to something different than the default 16px (for example 32px) the width of the dialog can become larger than the width of the phone's display. This is caused by the 'min-width' (20rem) of the dialog. For the dialog on phone it is recommended by the design to set the dialog's property 'stretch' to true to use the full screen size. The solution: When we have stretched dialog on phone the 'min-width' should not be applied (the width is 100%). fixes: #10000 --- packages/main/src/Dialog.ts | 10 +++++----- packages/main/src/themes/Dialog.css | 1 + 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts index 2c909c3655bf..f6bcfa173b11 100644 --- a/packages/main/src/Dialog.ts +++ b/packages/main/src/Dialog.ts @@ -71,8 +71,8 @@ const ICON_PER_STATE: Record = { * * ### Responsive Behavior - * The `stretch` property can be used to stretch the - * `ui5-dialog` on full screen. + * The `stretch` property can be used to stretch the `ui5-dialog` on full screen. This is recommended for better usability on mobile devices. + * On desktop and tablet `stretch` property can be switched off. * * **Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings. * @@ -131,10 +131,10 @@ class Dialog extends Popup { headerText?: string; /** - * Determines whether the component should be stretched to fullscreen. + * Determines if the Dialog will be stretched to full screen on mobile. On desktop, + * the Dialog will be stretched to approximately 90% of the viewport. * - * **Note:** The component will be stretched to approximately - * 90% of the viewport. + * **Note:** For better usability of the component it is recommended to set this property to "true" when the Dialog is opened in phone. * @default false * @public */ diff --git a/packages/main/src/themes/Dialog.css b/packages/main/src/themes/Dialog.css index 6105faad10ca..33c3116d846c 100644 --- a/packages/main/src/themes/Dialog.css +++ b/packages/main/src/themes/Dialog.css @@ -21,6 +21,7 @@ max-height: 100%; max-width: 100%; border-radius: 0; + min-width: 0; /*this is for preventing the dialog to hold it's width in small screens*/ } :host([draggable]) .ui5-popup-header-root, From 886476c57b4ee5ee79a3c70368642ee6976f399b Mon Sep 17 00:00:00 2001 From: Lidiya Georgieva Date: Mon, 18 Nov 2024 14:01:56 +0200 Subject: [PATCH 2/4] fix(ui5-dialog): property description enhanced --- packages/main/src/Dialog.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts index f6bcfa173b11..a091d55ba086 100644 --- a/packages/main/src/Dialog.ts +++ b/packages/main/src/Dialog.ts @@ -71,7 +71,7 @@ const ICON_PER_STATE: Record = { * * ### Responsive Behavior - * The `stretch` property can be used to stretch the `ui5-dialog` on full screen. This is recommended for better usability on mobile devices. + * The `stretch` property can be used to stretch the `ui5-dialog` on full screen. For better usability it is recommended to stretch the dialog on phone devices. * On desktop and tablet `stretch` property can be switched off. * * **Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings. From 48200fca378668475b81e2d7f41099ceb6c8a98f Mon Sep 17 00:00:00 2001 From: Lidiya Georgieva Date: Mon, 18 Nov 2024 14:54:56 +0200 Subject: [PATCH 3/4] fix(ui5-dialog): property description enhanced --- packages/main/src/Dialog.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts index a091d55ba086..adad5e316d25 100644 --- a/packages/main/src/Dialog.ts +++ b/packages/main/src/Dialog.ts @@ -72,7 +72,6 @@ const ICON_PER_STATE: Record = { * * ### Responsive Behavior * The `stretch` property can be used to stretch the `ui5-dialog` on full screen. For better usability it is recommended to stretch the dialog on phone devices. - * On desktop and tablet `stretch` property can be switched off. * * **Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings. * From b120ba8c1b74e1af3ed7b0c6e44a0ac39f3f886e Mon Sep 17 00:00:00 2001 From: Lidiya Georgieva Date: Mon, 18 Nov 2024 16:08:19 +0200 Subject: [PATCH 4/4] fix(ui5-dialog): edit texts --- packages/main/src/Dialog.ts | 8 ++++---- packages/main/src/themes/Dialog.css | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts index adad5e316d25..8ee6683cb1a5 100644 --- a/packages/main/src/Dialog.ts +++ b/packages/main/src/Dialog.ts @@ -71,7 +71,7 @@ const ICON_PER_STATE: Record = { * * ### Responsive Behavior - * The `stretch` property can be used to stretch the `ui5-dialog` on full screen. For better usability it is recommended to stretch the dialog on phone devices. + * The `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices. * * **Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings. * @@ -130,10 +130,10 @@ class Dialog extends Popup { headerText?: string; /** - * Determines if the Dialog will be stretched to full screen on mobile. On desktop, - * the Dialog will be stretched to approximately 90% of the viewport. + * Determines if the dialog will be stretched to full screen on mobile. On desktop, + * the dialog will be stretched to approximately 90% of the viewport. * - * **Note:** For better usability of the component it is recommended to set this property to "true" when the Dialog is opened in phone. + * **Note:** For better usability of the component it is recommended to set this property to "true" when the dialog is opened on phone. * @default false * @public */ diff --git a/packages/main/src/themes/Dialog.css b/packages/main/src/themes/Dialog.css index 33c3116d846c..4f18624a43ab 100644 --- a/packages/main/src/themes/Dialog.css +++ b/packages/main/src/themes/Dialog.css @@ -21,7 +21,7 @@ max-height: 100%; max-width: 100%; border-radius: 0; - min-width: 0; /*this is for preventing the dialog to hold it's width in small screens*/ + min-width: 0; /*this is for preventing the dialog to hold its width on small screens*/ } :host([draggable]) .ui5-popup-header-root,