lightning-base-components 1.14.3-alpha → 1.15.1-alpha

package/src/lightning/interactiveDialogBase/interactiveDialogBase.css

@@ -0,0 +1,494 @@
+/* Required for autofocus to work correctly:
+   - child elements of modal appear 'visibility: hidden' at
+     the moment that they are being reviewed for eligibility
+     for focus in focus.js at isElementVisible()
+*/
+.fix-slds-modal {
+    visibility: visible;
+    z-index: unset;
+}
+
+/* Required for z-index */
+.fix-slds-backdrop {
+    z-index: unset;
+}
+
+
+/* Modal */
+.slds-modal {
+    opacity: 0;
+    visibility: hidden;
+    -webkit-transition: opacity 0.1s linear, -webkit-transform 0.1s linear;
+    transition: opacity 0.1s linear, -webkit-transform 0.1s linear;
+    transition: transform 0.1s linear, opacity 0.1s linear;
+    transition: transform 0.1s linear, opacity 0.1s linear,
+        -webkit-transform 0.1s linear;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 9001;
+}
+
+/* Container */
+.slds-modal__container {
+    position: relative;
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+    -webkit-transition: opacity 0.1s linear, -webkit-transform 0.1s linear;
+    transition: opacity 0.1s linear, -webkit-transform 0.1s linear;
+    transition: transform 0.1s linear, opacity 0.1s linear;
+    transition: transform 0.1s linear, opacity 0.1s linear,
+        -webkit-transform 0.1s linear;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    margin: 0 2rem;
+    height: 100%;
+    padding: 3rem 0 5rem 0;
+    border-radius: 0.25rem;
+}
+@media (min-width: 48em) {
+    .slds-modal__container {
+        margin: 0 auto;
+        width: 50%;
+        max-width: 40rem;
+        min-width: 20rem;
+    }
+}
+
+/* p-around_medium */
+.slds-p-around_medium,
+.slds-p-around--medium {
+    padding: 1rem;
+}
+
+/* Header/Footer */
+.slds-modal__header,
+.slds-modal__footer {
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+}
+
+/* Header */
+.slds-modal__header {
+    position: relative;
+    border-top-right-radius: var(--sds-c-modal-radius-border, 0.25rem);
+    border-top-left-radius: var(--sds-c-modal-radius-border, 0.25rem);
+    border-bottom-width: var(--sds-c-modal-sizing-border, 2px);
+    border-bottom-style: solid;
+    border-bottom-color: var(--sds-c-modal-color-border, #e5e5e5);
+    background-color: var(
+        --sds-c-modal-header-color-background,
+        var(--sds-c-modal-color-background, white)
+    );
+    color: var(--sds-c-modal-header-text-color, var(--sds-c-modal-text-color));
+    padding-top: var(--sds-c-modal-header-spacing-block-start, 1rem);
+    padding-right: var(--sds-c-modal-header-spacing-inline-end, 1rem);
+    padding-bottom: var(--sds-c-modal-header-spacing-block-end, 1rem);
+    padding-left: var(--sds-c-modal-header-spacing-inline-start, 1rem);
+    text-align: center;
+}
+
+.slds-modal__content_headless {
+  border-top-right-radius:var(--slds-c-modal-radius-border, var(--sds-c-modal-radius-border, 0.25rem));
+  border-top-left-radius:var(--slds-c-modal-radius-border, var(--sds-c-modal-radius-border, 0.25rem));
+}
+
+/* Content */
+.slds-modal__content {
+    background-color: var(
+        --sds-c-modal-content-color-background,
+        var(--sds-c-modal-color-background, white)
+    );
+    color: var(--sds-c-modal-content-text-color, var(--sds-c-modal-text-color));
+    overflow: hidden;
+    overflow-y: auto;
+}
+
+/* Footer */
+.slds-modal__footer {
+    border-bottom-right-radius: var(--sds-c-modal-radius-border, 0.25rem);
+    border-bottom-left-radius: var(--sds-c-modal-radius-border, 0.25rem);
+    border-top-width: var(--sds-c-modal-sizing-border, 2px);
+    border-top-style: solid;
+    border-top-color: var(--sds-c-modal-color-border, #e5e5e5);
+    background-color: var(
+        --sds-c-modal-footer-color-background,
+        var(--sds-c-modal-color-background, #f3f2f3)
+    );
+    color: var(--sds-c-modal-footer-text-color, var(--sds-c-modal-text-color));
+    padding-top: var(--sds-c-modal-footer-spacing-block-start, 0.75rem);
+    padding-right: var(--sds-c-modal-footer-spacing-inline-end, 1rem);
+    padding-bottom: var(--sds-c-modal-footer-spacing-block-end, 0.75rem);
+    padding-left: var(--sds-c-modal-footer-spacing-inline-start, 1rem);
+    text-align: right;
+    -webkit-box-shadow: var(
+        --sds-c-modal-shadow,
+        0 2px 3px 0 rgba(0, 0, 0, 0.16)
+    );
+    box-shadow: var(--sds-c-modal-shadow, 0 2px 3px 0 rgba(0, 0, 0, 0.16));
+}
+.slds-modal__footer_directional .slds-button:first-child,
+.slds-modal__footer--directional .slds-button:first-child {
+    float: left;
+}
+.slds-modal__footer .slds-button + .slds-button {
+    margin-left: 0.5rem;
+}
+
+/* Default Theme (for footer) */
+.slds-theme_default,
+.slds-theme--default {
+    background-color: white;
+    color: #080707;
+}
+
+/* Modal Size */
+@media (min-width: 48em) {
+    .slds-modal_small .slds-modal__container {
+        width: 60%;
+        max-width: 52.0625rem;
+        min-width: 40rem;
+    }
+}
+@media (min-width: 48em) {
+    .slds-modal_medium .slds-modal__container {
+        width: 70%;
+        max-width: 75rem;
+        min-width: 40rem;
+    }
+}
+@media (min-width: 48em) {
+    .slds-modal_large .slds-modal__container,
+    .slds-modal--large .slds-modal__container {
+        width: 90%;
+        max-width: none;
+        min-width: 40rem;
+    }
+}
+
+/* Backdrop */
+.slds-backdrop {
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    visibility: hidden;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: var(--sds-c-backdrop-color-background, rgba(8, 7, 7, 0.6));
+    z-index: 9000;
+}
+.slds-backdrop_open,
+.slds-backdrop--open {
+    visibility: visible;
+    opacity: 1;
+    -webkit-transition: opacity 0.4s linear;
+    transition: opacity 0.4s linear;
+}
+
+/* Fade-in Animation Styling */
+.slds-fade-in-open {
+    opacity: 1;
+    visibility: visible;
+    -webkit-transition: opacity 0.1s linear;
+    transition: opacity 0.1s linear;
+}
+.slds-fade-in-open .slds-modal__container-reset {
+    opacity: 1;
+    visibility: visible;
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+}
+
+/* Prompt */
+.slds-modal_prompt .slds-modal__close,
+.slds-modal--prompt .slds-modal__close {
+    display: none;
+}
+.slds-modal_prompt .slds-modal__header,
+.slds-modal--prompt .slds-modal__header {
+    border-bottom: 0;
+}
+.slds-modal_prompt .slds-modal__content,
+.slds-modal--prompt .slds-modal__content {
+    padding-left: 2rem;
+    padding-right: 2rem;
+}
+.slds-modal_prompt .slds-modal__footer,
+.slds-modal--prompt .slds-modal__footer {
+    border-top: 0;
+    text-align: center;
+}
+
+/*Button*/
+.slds-button {
+    position: relative;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    padding-top: var(--sds-c-button-spacing-block-start, 0);
+    padding-right: var(--sds-c-button-spacing-inline-end, 0);
+    padding-bottom: var(--sds-c-button-spacing-block-end, 0);
+    padding-left: var(--sds-c-button-spacing-inline-start, 0);
+    background: none;
+    background-color: var(--sds-c-button-color-background, transparent);
+    background-clip: border-box;
+    border-color: var(--sds-c-button-color-border, transparent);
+    border-style: solid;
+    border-width: var(--sds-c-button-sizing-border, 1px);
+    border-radius: var(--sds-c-button-radius-border, 0.25rem);
+    -webkit-box-shadow: var(--sds-c-button-shadow);
+    box-shadow: var(--sds-c-button-shadow);
+    line-height: var(--sds-c-button-line-height, 1.875rem);
+    text-decoration: none;
+    color: var(--sds-c-button-text-color, #0176d3);
+    -webkit-appearance: none;
+    white-space: normal;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+.slds-button:hover,
+.slds-button:focus,
+.slds-button:active,
+.slds-button:visited {
+    text-decoration: none;
+}
+.slds-button:hover,
+.slds-button:focus {
+    color: var(--sds-c-button-text-color-hover, #014486);
+}
+.slds-button:focus {
+    outline: 0;
+    -webkit-box-shadow: var(--sds-c-button-shadow-focus, 0 0 3px #0176d3);
+    box-shadow: var(--sds-c-button-shadow-focus, 0 0 3px #0176d3);
+}
+.slds-button:active {
+    color: var(--sds-c-button-text-color-active, #014486);
+    background-color:var(--slds-c-button-color-background-active);
+    border-color:var(--slds-c-button-color-border-active);
+}
+
+/*Neutral Button*/
+.slds-button_neutral,
+.slds-button--neutral {
+    padding-left: var(--sds-c-button-neutral-spacing-inline-start, 1rem);
+    padding-right: var(--sds-c-button-neutral-spacing-inline-end, 1rem);
+    text-align: center;
+    vertical-align: middle;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-transition: border 0.15s linear;
+    transition: border 0.15s linear;
+    background-color: var(--sds-c-button-neutral-color-background, white);
+    border-color: var(--sds-c-button-neutral-color-border, #c9c9c9);
+}
+.slds-button_neutral:hover,
+.slds-button_neutral:focus,
+.slds-button--neutral:hover,
+.slds-button--neutral:focus {
+    background-color: var(
+        --sds-c-button-neutral-color-background-hover,
+        #f3f3f3
+    );
+    border-color: var(--sds-c-button-neutral-color-border-hover, #c9c9c9);
+}
+.slds-button_neutral:active,
+.slds-button--neutral:active {
+    background-color: var(
+        --sds-c-button-neutral-color-background-active,
+        #f3f2f3
+    );
+    border-color: var(--sds-c-button-neutral-color-border-active, #c9c9c9);
+}
+
+/*Brand Button*/
+.slds-button_brand,
+.slds-button--brand {
+    padding-left: var(--sds-c-button-brand-spacing-inline-start, 1rem);
+    padding-right: var(--sds-c-button-brand-spacing-inline-end, 1rem);
+    text-align: center;
+    vertical-align: middle;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-transition: border 0.15s linear;
+    transition: border 0.15s linear;
+    background-color: var(--sds-c-button-brand-color-background, #0176d3);
+    border-color: var(--sds-c-button-brand-color-border, #0176d3);
+    color: var(--sds-c-button-brand-text-color, white);
+}
+.slds-button_brand:hover,
+.slds-button_brand:focus,
+.slds-button--brand:hover,
+.slds-button--brand:focus {
+    background-color: var(--sds-c-button-brand-color-background-hover, #014486);
+    border-color: var(--sds-c-button-brand-color-border-hover, #014486);
+    color: var(--sds-c-button-brand-text-color-hover, white);
+}
+.slds-button_brand:active,
+.slds-button--brand:active {
+    background-color: var(
+        --sds-c-button-brand-color-background-active,
+        #014486
+    );
+    border-color: var(--sds-c-button-brand-color-border-active, #014486);
+    color: var(--sds-c-button-brand-text-color-active, white);
+}
+
+/* Recreate Font Styling */
+
+.slds-modal_prompt {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol';
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    /* background:#eef4ff; */
+    color: #080707;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+button {
+    color: inherit;
+    font: inherit;
+    margin: 0;
+    overflow: visible;
+    text-transform: none;
+    -webkit-appearance: button;
+    cursor: pointer;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+button,
+html input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+    -webkit-appearance: button;
+    cursor: pointer;
+}
+
+*,
+*:before,
+*:after {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+/* Themes */
+.slds-theme_default,
+.slds-theme--default {
+    background-color: white;
+    color: #080707;
+}
+.slds-theme_shade,
+.slds-theme--shade {
+    background-color: #f3f2f2;
+}
+.slds-theme_inverse,
+.slds-theme--inverse {
+    color: white;
+    background-color: #001639;
+    border-color: #001639;
+}
+.slds-theme_alt-inverse,
+.slds-theme--alt-inverse {
+    color: white;
+    background-color: #032d60;
+    border-color: #032d60;
+}
+.slds-theme_success,
+.slds-theme--success {
+    color: white;
+    background-color: #2e844a;
+}
+.slds-theme_info,
+.slds-theme--info {
+    color: white;
+    background-color: #706e6b;
+}
+.slds-theme_warning,
+.slds-theme--warning {
+    background-color: #fe9339;
+    color: #080707;
+}
+.slds-theme_error,
+.slds-theme--error {
+    color: white;
+    background-color: #ea001e;
+}
+.slds-theme_offline,
+.slds-theme--offline {
+    color: white;
+    background-color: #444;
+}
+.slds-theme_alert-texture,
+.slds-theme--alert-texture {
+    background-image: linear-gradient(
+        45deg,
+        rgba(0, 0, 0, 0.025) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(0, 0, 0, 0.025) 50%,
+        rgba(0, 0, 0, 0.025) 75%,
+        transparent 75%,
+        transparent
+    );
+    background-size: 64px 64px;
+}
+
+/* Heading Text */
+.slds-text-heading_medium,
+.slds-text-heading--medium {
+    font-size: 1.25rem;
+    line-height: 1.25;
+}
+h2 {
+    margin: 0;
+    padding: 0;
+    font-weight: inherit;
+    font-size: 1em;
+    orphans: 3;
+    widows: 3;
+    page-break-after: void;
+}
+
+/* Assistive Text */
+.slds-assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+}

package/src/lightning/interactiveDialogBase/interactiveDialogBase.html

@@ -0,0 +1,63 @@
+<template>
+    <div
+        class={modalBackdropCssClasses}
+        role="presentation"
+        data-backdrop
+    ></div>
+    <lightning-focus-trap>
+        <section
+            role={role}
+            tabindex="-1"
+            aria-modal="true"
+            class={computedModalCssClasses}
+            aria-label={ariaLabel}
+            onkeydown={handleModalKeyDown}
+            onprivateclose={handlePrivateClose}
+            onprivatechildrender={handlePrivateChildRender}
+            data-modal
+        >
+            <template if:true={showAriaDescribedBy}>
+                <span
+                    id="modal-description"
+                    class="slds-assistive-text"
+                    data-aria-description
+                >{description}</span>
+            </template>
+            <div class="slds-modal__container">
+                <template if:true={showHeader}>
+                    <div class={computedModalHeaderCssClasses}>
+                        <h1
+                            class="slds-text-heading_medium"
+                            id="prompt-heading-id"
+                            data-modal-heading
+                        >{label}</h1>
+                    </div>
+                </template>
+                <div
+                    class={computedModalContentCssClasses}
+                    data-slot
+                    lwc:dom="manual"
+                >
+                </div>
+                <div class="slds-modal__footer slds-theme_default">
+                    <template if:false={hideCancel}>
+                        <button
+                            class="slds-button slds-button_neutral"
+                            onclick={handleCloseClick}
+                            data-cancel-button
+                        >
+                            {cancelText}
+                        </button>
+                    </template>
+                    <button
+                        class="slds-button slds-button_brand"
+                        onclick={handleOkClick}
+                        data-ok-button
+                    >
+                        {okText}
+                    </button>
+                </div>
+            </div>
+        </section>
+    </lightning-focus-trap>
+</template>