Skip to content

Commit

Permalink
feat(ui5-dialog): add state property (#5587)
Browse files Browse the repository at this point in the history
* feat(ui5-dialog): add state property

Dialogs now support the alertdialog role according to their state property

* Address code review comments

* Address review comments
  • Loading branch information
kskondov authored Aug 3, 2022
1 parent 1706174 commit c680e7c
Show file tree
Hide file tree
Showing 13 changed files with 316 additions and 10 deletions.
6 changes: 5 additions & 1 deletion packages/main/src/Dialog.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@
tabindex="{{_headerTabIndex}}"
@keydown="{{_onDragOrResizeKeyDown}}"
@mousedown="{{_onDragMouseDown}}"
part="header">
part="header"
state="{{this.state}}">
{{#if hasValueState}}
<ui5-icon class="ui5-dialog-value-state-icon" name="{{_dialogStateIcon}}"></ui5-icon>
{{/if}}
{{#if header.length }}
<slot name="header"></slot>
{{else}}
Expand Down
42 changes: 41 additions & 1 deletion packages/main/src/Dialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,14 @@ import {
isUp, isDown, isLeft, isRight,
isUpShift, isDownShift, isLeftShift, isRightShift,
} from "@ui5/webcomponents-base/dist/Keys.js";
import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
import Popup from "./Popup.js";
import "@ui5/webcomponents-icons/dist/resize-corner.js";
import Icon from "./Icon.js";
import "@ui5/webcomponents-icons/dist/resize-corner.js";
import "@ui5/webcomponents-icons/dist/error.js";
import "@ui5/webcomponents-icons/dist/alert.js";
import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
import "@ui5/webcomponents-icons/dist/information.js";

// Template
import DialogTemplate from "./generated/templates/DialogTemplate.lit.js";
Expand All @@ -20,6 +25,15 @@ import dialogCSS from "./generated/themes/Dialog.css.js";
*/
const STEP_SIZE = 16;

/**
* Defines the icons corresponding to the dialog's state.
*/
const ICON_PER_STATE = {
[ValueState.Error]: "error",
[ValueState.Warning]: "alert",
[ValueState.Success]: "sys-enter-2",
[ValueState.Information]: "information",
};
/**
* @public
*/
Expand Down Expand Up @@ -123,6 +137,20 @@ const metadata = {
onDesktop: {
type: Boolean,
},

/**
* Defines the state of the <code>Dialog</code>.
* <br>
* Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
* @type {ValueState}
* @defaultvalue "None"
* @public
* @since 1.0.0-rc.15
*/
state: {
type: ValueState,
defaultValue: ValueState.None,
},
},
};

Expand Down Expand Up @@ -286,6 +314,18 @@ class Dialog extends Popup {
return minHeight;
}

get hasValueState() {
return this.state !== ValueState.None;
}

get _dialogStateIcon() {
return ICON_PER_STATE[this.state];
}

get _role() {
return (this.state === ValueState.Error || this.state === ValueState.Warning) ? "alertdialog" : "dialog";
}

_show() {
super._show();
this._center();
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/Popup.hbs
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<section
style="{{styles.root}}"
class="{{classes.root}}"
role="dialog"
role="{{_role}}"
aria-modal="{{_ariaModal}}"
aria-label="{{_ariaLabel}}"
aria-labelledby="{{_ariaLabelledBy}}"
Expand Down
4 changes: 4 additions & 0 deletions packages/main/src/Popup.js
Original file line number Diff line number Diff line change
Expand Up @@ -596,6 +596,10 @@ class Popup extends UI5Element {
return this.shadowRoot.querySelector(".ui5-popup-root");
}

get _role() {
return "dialog";
}

get contentDOM() {
return this.shadowRoot.querySelector(".ui5-popup-content");
}
Expand Down
35 changes: 35 additions & 0 deletions packages/main/src/themes/Dialog.css
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,41 @@
position: relative;
}


:host([state="Error"]) .ui5-popup-header-root {
box-shadow: var(--_ui5_dialog_header_error_state_box_shadow);
}

:host([state="Information"]) .ui5-popup-header-root {
box-shadow: var(--_ui5_dialog_header_information_state_box_shadow);
}
:host([state="Success"]) .ui5-popup-header-root {
box-shadow: var(--_ui5_dialog_header_success_state_box_shadow);
}

:host([state="Warning"]) .ui5-popup-header-root {
box-shadow: var(--_ui5_dialog_header_warning_state_box_shadow);
}

.ui5-dialog-value-state-icon {
margin-inline-end: 0.5rem;
}

:host([state="Error"]) .ui5-dialog-value-state-icon {
color: var(--_ui5_dialog_header_error_state_icon_color);
}

:host([state="Information"]) .ui5-dialog-value-state-icon {
color: var(--_ui5_dialog_header_information_state_icon_color);
}
:host([state="Success"]) .ui5-dialog-value-state-icon {
color: var(--_ui5_dialog_header_success_state_icon_color);
}

:host([state="Warning"]) .ui5-dialog-value-state-icon {
color: var(--_ui5_dialog_header_warning_state_icon_color);
}

.ui5-popup-header-root:focus {
outline: none;
}
Expand Down
8 changes: 8 additions & 0 deletions packages/main/src/themes/base/Dialog-parameters.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,12 @@
--_ui5_dialog_header_focus_left_offset: 2px;
--_ui5_dialog_header_focus_right_offset: 2px;
--_ui5_dialog_header_border_radius: 0px;
--_ui5_dialog_header_error_state_box_shadow: inset 0 -0.0625rem var(--sapErrorBorderColor), var(--sapContent_HeaderShadow);
--_ui5_dialog_header_information_state_box_shadow: inset 0 -0.0625rem var(--sapInformationBorderColor), var(--sapContent_HeaderShadow);
--_ui5_dialog_header_success_state_box_shadow: inset 0 -0.0625rem var(--sapSuccessBorderColor), var(--sapContent_HeaderShadow);
--_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.0625rem var(--sapWarningBorderColor), var(--sapContent_HeaderShadow);
--_ui5_dialog_header_error_state_icon_color: var(--sapNegativeElementColor);
--_ui5_dialog_header_information_state_icon_color: var(--sapInformativeElementColor);
--_ui5_dialog_header_success_state_icon_color: var(--sapPositiveElementColor);
--_ui5_dialog_header_warning_state_icon_color: var(--sapCriticalElementColor);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@import "../base/Dialog-parameters.css";

:root {
--_ui5_dialog_header_error_state_box_shadow: inset 0 -0.125rem var(--sapErrorBorderColor);
--_ui5_dialog_header_information_state_box_shadow: inset 0 -0.125rem var(--sapInformationBorderColor);
--_ui5_dialog_header_success_state_box_shadow: inset 0 -0.125rem var(--sapSuccessBorderColor);
--_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.125rem var(--sapWarningBorderColor);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@import "../base/Dialog-parameters.css";

:root {
--_ui5_dialog_header_error_state_box_shadow: inset 0 -0.125rem var(--sapErrorBorderColor);
--_ui5_dialog_header_information_state_box_shadow: inset 0 -0.125rem var(--sapInformationBorderColor);
--_ui5_dialog_header_success_state_box_shadow: inset 0 -0.125rem var(--sapSuccessBorderColor);
--_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.125rem var(--sapWarningBorderColor);
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,8 @@
:root {
--_ui5_dialog_resize_handle_right: 3px;
--_ui5_dialog_resize_handle_bottom: 3px;
--_ui5_dialog_header_error_state_box_shadow: inset 0 -0.125rem var(--sapErrorBorderColor);
--_ui5_dialog_header_information_state_box_shadow: inset 0 -0.125rem var(--sapInformationBorderColor);
--_ui5_dialog_header_success_state_box_shadow: inset 0 -0.125rem var(--sapSuccessBorderColor);
--_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.125rem var(--sapWarningBorderColor);
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,8 @@
:root {
--_ui5_dialog_resize_handle_right: 3px;
--_ui5_dialog_resize_handle_bottom: 3px;
--_ui5_dialog_header_error_state_box_shadow: inset 0 -0.125rem var(--sapErrorBorderColor);
--_ui5_dialog_header_information_state_box_shadow: inset 0 -0.125rem var(--sapInformationBorderColor);
--_ui5_dialog_header_success_state_box_shadow: inset 0 -0.125rem var(--sapSuccessBorderColor);
--_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.125rem var(--sapWarningBorderColor);
}
51 changes: 51 additions & 0 deletions packages/main/test/pages/Dialog.html
Original file line number Diff line number Diff line change
Expand Up @@ -450,7 +450,42 @@
</div>
<span>Hello World!</span>
</ui5-dialog>
<div>
<div>
<ui5-label>Dialog states</ui5-label>
</div>
<ui5-button id="btn-error-state">Dialog with Error State</ui5-button>
<ui5-dialog id="dialog-error-state" state="Error">
<div slot="header">
<ui5-title level="H2">Error</ui5-title>
</div>
<span>Hello World!</span>
</ui5-dialog>

<ui5-button id="btn-info-state">Dialog with Information State</ui5-button>
<ui5-dialog id="dialog-info-state" state="Information">
<div slot="header">
<ui5-title level="H2">Information</ui5-title>
</div>
<span>Hello World!</span>
</ui5-dialog>

<ui5-button id="btn-success-state">Dialog with Success State</ui5-button>
<ui5-dialog id="dialog-success-state" state="Success">
<div slot="header">
<ui5-title level="H2">Success</ui5-title>
</div>
<span>Hello World!</span>
</ui5-dialog>

<ui5-button id="btn-warn-state">Dialog with Warning State</ui5-button>
<ui5-dialog id="dialog-warn-state" state="Warning">
<div slot="header">
<ui5-title level="H2">Warning</ui5-title>
</div>
<span>Hello World!</span>
</ui5-dialog>
</div>
<div id="scrollHelper" class="dialog9scrollHelper">
<span>Scroll Helper</span>
<ui5-button id="scrolledBtn" class="scrolledBtn">open</ui5-button>
Expand Down Expand Up @@ -584,6 +619,22 @@
window["dialog"].show();
});

window["btn-error-state"].addEventListener("click", function () {
window["dialog-error-state"].show();
});

window["btn-info-state"].addEventListener("click", function () {
window["dialog-info-state"].show();
});

window["btn-success-state"].addEventListener("click", function () {
window["dialog-success-state"].show();
});

window["btn-warn-state"].addEventListener("click", function () {
window["dialog-warn-state"].show();
});

</script>
</body>

Expand Down
112 changes: 105 additions & 7 deletions packages/main/test/samples/Dialog.sample.html
Original file line number Diff line number Diff line change
Expand Up @@ -187,14 +187,112 @@ <h3>Dialog with SAP Fiori Styled Footer</h3>
});
</script>

<pre class="highlight">{% highlight html %}
<ui5-dialog id="fiori-footer-dialog" header-text="SAP Fiori Styled Footer">
<p>Adding custom styles to achieve the look and feel of a SAP Fiori footer</p>
<div slot="footer" style="display: flex; align-items: center; justify-content: end; width: 100%; box-sizing: border-box;">
<ui5-button design="Emphasized" style="min-width: 4rem;">OK</ui5-button>
<ui5-button style="margin: 0 0 0 0.5rem; min-width: 4rem;">Close</ui5-button>
<pre class="prettyprint lang-html"><xmp>
<ui5-dialog id="fiori-footer-dialog" header-text="SAP Fiori Styled Footer">
<p>Adding custom styles to achieve the look and feel of a SAP Fiori footer</p>
<div slot="footer" style="display: flex; align-items: center; justify-content: end; width: 100%; box-sizing: border-box;">
<ui5-button design="Emphasized" style="min-width: 4rem;">OK</ui5-button>
<ui5-button style="margin: 0 0 0 0.5rem; min-width: 4rem;">Close</ui5-button>
</div>
</ui5-dialog>
</xmp></pre>
</section>

<section>
<h3>Dialogs with various state properties</h3>
<div class="snippet">
<ui5-button id="error-state">Open error state dialog</ui5-button>
<ui5-button id="information-state">Open information state dialog</ui5-button>
<ui5-button id="success-state">Open success state dialog</ui5-button>
<ui5-button id="warning-state">Open warning state dialog</ui5-button>

<ui5-dialog id="error-state-dialog" header-text="Error" state="Error">
<p>Error state dialog</p>
<div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; padding: .25rem 1rem;">
<ui5-button id="error-close">Close</ui5-button>
</div>
</ui5-dialog>
{% endhighlight %}</pre>

<ui5-dialog id="information-state-dialog" header-text="Information" state="Information">
<p>Information state dialog</p>
<div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; padding: .25rem 1rem;">
<ui5-button id="information-close">Close</ui5-button>
</div>
</ui5-dialog>

<ui5-dialog id="success-state-dialog" header-text="Success" state="Success">
<p>Success state dialog</p>
<div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; padding: .25rem 1rem;">
<ui5-button id="success-close">Close</ui5-button>
</div>
</ui5-dialog>

<ui5-dialog id="warning-state-dialog" header-text="Warning" state="Warning">
<p>Warning state dialog</p>
<div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; padding: .25rem 1rem;">
<ui5-button id="warning-close">Close</ui5-button>
</div>
</ui5-dialog>
</div>

<script>
var dialogOpenerError = document.getElementById("error-state");
var dialogError = document.getElementById("error-state-dialog");
var dialogCloserError = document.getElementById("error-close");

dialogOpenerError.addEventListener("click", function () {
dialogError.show();
});

dialogCloserError.addEventListener("click", function () {
dialogError.close();
});

var dialogOpenerInfo = document.getElementById("information-state");
var dialogInfo = document.getElementById("information-state-dialog");
var dialogCloserInfo = document.getElementById("information-close");

dialogOpenerInfo.addEventListener("click", function () {
dialogInfo.show();
});

dialogCloserInfo.addEventListener("click", function () {
dialogInfo.close();
});

var dialogOpenerSuccess = document.getElementById("success-state");
var dialogSuccess = document.getElementById("success-state-dialog");
var dialogCloserSuccess = document.getElementById("success-close");

dialogOpenerSuccess.addEventListener("click", function () {
dialogSuccess.show();
});

dialogCloserSuccess.addEventListener("click", function () {
dialogSuccess.close();
});

var dialogOpenerWarning = document.getElementById("warning-state");
var dialogWarning = document.getElementById("warning-state-dialog");
var dialogCloserWarning = document.getElementById("warning-close");

dialogOpenerWarning.addEventListener("click", function () {
dialogWarning.show();
});

dialogCloserWarning.addEventListener("click", function () {
dialogWarning.close();
});

</script>

<pre class="prettyprint lang-html"><xmp>
<ui5-dialog id="error-state-dialog" header-text="Error" state="Error">
<p>Error state dialog</p>
<div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; padding: .25rem 1rem;">
<ui5-button id="error-close">Close</ui5-button>
</div>
</ui5-dialog>
</xmp></pre>
</section>
<!-- JSDoc marker -->
Loading

0 comments on commit c680e7c

Please sign in to comment.