mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 06:04:44 +03:00
Merge pull request #556 from material-components:dialog-title
PiperOrigin-RevId: 274818945
This commit is contained in:
Copybara-Service
commit
106b21768a
@ -4,7 +4,12 @@ All notable changes to this project will be documented in this file.
|
||||
The format is based on [Keep a Changelog](http://keepachangelog.com/)
|
||||
and this project adheres to [Semantic Versioning](http://semver.org/).
|
||||
|
||||
<!-- ## Unreleased -->
|
||||
## Unreleased
|
||||
|
||||
### Changed
|
||||
- **BREAKING** `Dialog.title` renamed to `Dialog.heading` and
|
||||
`--mdc-dialog-title-ink-color` renamed to `--mdc-dialog-heading-ink-color` as
|
||||
it caused clashes with `HTMLElement.prototype.title`.
|
||||
|
||||
## [0.10.0] - 2019-10-11
|
||||
|
||||
|
||||
@ -44,14 +44,14 @@ limitations under the License.
|
||||
<div>
|
||||
|
||||
<mwc-button data-num="1" raised>Basic</mwc-button>
|
||||
<mwc-dialog id="dialog1" title="Dialog header">
|
||||
<mwc-dialog id="dialog1" heading="Dialog header">
|
||||
Dialog body text
|
||||
<mwc-button slot="primaryAction" dialogAction="ok">Action 2</mwc-button>
|
||||
<mwc-button slot="secondaryAction" dialogAction="cancel">Action 1</mwc-button>
|
||||
</mwc-dialog>
|
||||
|
||||
<mwc-button data-num="2" raised>Actions</mwc-button>
|
||||
<mwc-dialog id="dialog2" title="Actions">
|
||||
<mwc-dialog id="dialog2" heading="Actions">
|
||||
<p>
|
||||
By setting the dialogAction="my-action" attribute on any element projected into
|
||||
mwc-dialog, you can close the dialog by clicking on that element. The
|
||||
@ -63,7 +63,7 @@ limitations under the License.
|
||||
</mwc-dialog>
|
||||
|
||||
<mwc-button data-num="3" raised>Scrollable</mwc-button>
|
||||
<mwc-dialog id="dialog3" title="My Title">
|
||||
<mwc-dialog id="dialog3" heading="My Title">
|
||||
<p>
|
||||
Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
|
||||
</p>
|
||||
@ -71,7 +71,7 @@ limitations under the License.
|
||||
</mwc-dialog>
|
||||
|
||||
<mwc-button data-num="4" raised>Hide Actions</mwc-button>
|
||||
<mwc-dialog id="dialog4" title="Hide Actions">
|
||||
<mwc-dialog id="dialog4" heading="Hide Actions">
|
||||
<p>
|
||||
If you don't have actions, you may want to set the "hideActions" property.
|
||||
This property will remove extra whitespace at the bottom of this dialog.
|
||||
@ -90,7 +90,7 @@ limitations under the License.
|
||||
.styled {
|
||||
--mdc-theme-surface: #FFF;
|
||||
--mdc-dialog-scrim-color: rgba(35, 47, 52, .32);
|
||||
--mdc-dialog-title-ink-color: #232F34;
|
||||
--mdc-dialog-heading-ink-color: #232F34;
|
||||
--mdc-dialog-content-ink-color: #232F34;
|
||||
--mdc-dialog-scroll-divider-color: transparent;
|
||||
--mdc-dialog-min-width: 500px;
|
||||
@ -104,12 +104,12 @@ limitations under the License.
|
||||
</style>
|
||||
|
||||
<mwc-button data-num="5" raised>Styled</mwc-button>
|
||||
<mwc-dialog id="dialog5" title="Styled" class="styled">
|
||||
<mwc-dialog id="dialog5" heading="Styled" class="styled">
|
||||
<div>These are the current styles applied to this dialog</div>
|
||||
<pre>
|
||||
--mdc-theme-surface: #FFF;
|
||||
--mdc-dialog-scrim-color: rgba(35, 47, 52, .32);
|
||||
--mdc-dialog-title-ink-color: #232F34;
|
||||
--mdc-dialog-heading-ink-color: #232F34;
|
||||
--mdc-dialog-content-ink-color: #232F34;
|
||||
--mdc-dialog-scroll-divider-color: transparent;
|
||||
--mdc-dialog-min-width: 500px;
|
||||
@ -126,7 +126,7 @@ limitations under the License.
|
||||
</mwc-dialog>
|
||||
|
||||
<mwc-button data-num="6" raised>Stacked</mwc-button>
|
||||
<mwc-dialog id="dialog6" title="Stacked" stacked>
|
||||
<mwc-dialog id="dialog6" heading="Stacked" stacked>
|
||||
<div>
|
||||
This is what happens when you set the stacked property on mwc-dialog.
|
||||
Notice that the primary action is now on top.
|
||||
@ -140,7 +140,7 @@ limitations under the License.
|
||||
</mwc-dialog>
|
||||
|
||||
<mwc-button data-num="7" raised>Initial Focus</mwc-button>
|
||||
<mwc-dialog id="dialog7" title="Initial Focus">
|
||||
<mwc-dialog id="dialog7" heading="Initial Focus">
|
||||
<div>
|
||||
In this example we set "dialogInitialFocus" on the mwc-textfield.
|
||||
When this dialog opens, it is auto-focused.
|
||||
|
||||
@ -33,7 +33,7 @@ npm install @material/mwc-dialog
|
||||
|
||||
```html
|
||||
<mwc-dialog
|
||||
title="Simple Dialog"
|
||||
heading="Simple Dialog"
|
||||
open
|
||||
hideActions>
|
||||
<ul>
|
||||
@ -103,7 +103,7 @@ npm install @material/mwc-dialog
|
||||
}
|
||||
</style>
|
||||
|
||||
<mwc-dialog title="Phone Ringtone" open>
|
||||
<mwc-dialog heading="Phone Ringtone" open>
|
||||
<div>
|
||||
<mwc-formfield label="Never Gonna Give You Up">
|
||||
<mwc-radio id="a1" name="a" checked></mwc-radio>
|
||||
@ -140,7 +140,7 @@ npm install @material/mwc-dialog
|
||||
<img src="images/scrollable.png" width="598px">
|
||||
|
||||
```html
|
||||
<mwc-dialog title="Privacy Policy" open>
|
||||
<mwc-dialog heading="Privacy Policy" open>
|
||||
<div>
|
||||
really large amount of text...
|
||||
</div>
|
||||
@ -172,7 +172,7 @@ npm install @material/mwc-dialog
|
||||
}
|
||||
</style>
|
||||
|
||||
<mwc-dialog title="Styled" class="styled" open>
|
||||
<mwc-dialog heading="Styled" class="styled" open>
|
||||
<div>
|
||||
In this dialog we have changed the button color and removed the border
|
||||
radius.
|
||||
@ -188,7 +188,7 @@ npm install @material/mwc-dialog
|
||||
<img src="images/stacked.png" width="594px">
|
||||
|
||||
```html
|
||||
<mwc-dialog title="Stacked" stacked>
|
||||
<mwc-dialog heading="Stacked" stacked>
|
||||
<div>
|
||||
This is what happens when you set the stacked property on mwc-dialog.
|
||||
Notice that the primary action is now on top.
|
||||
@ -219,7 +219,7 @@ npm install @material/mwc-dialog
|
||||
| `open` | `boolean` | Whether the dialog should open.
|
||||
| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.
|
||||
| `stacked` | `boolean` | Whether to stack the action buttons.
|
||||
| `title` | `string` | Title of the dialog.
|
||||
| `heading` | `string` | Heading text of the dialog.
|
||||
| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).
|
||||
| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).
|
||||
| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `<mwc-dialog>.open` is toggled (see [actions section](#actions)).
|
||||
@ -258,7 +258,7 @@ npm install @material/mwc-dialog
|
||||
| ----------------------------------- | --------------------- |------------
|
||||
| `--mdc-theme-surface` |  `#fff` | Color of the dialog surface's background.
|
||||
| `--mdc-dialog-scrim-color` |  `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).
|
||||
| `--mdc-dialog-title-ink-color` |  `rgba(0, 0, 0, 0.87)` | Color of the title text.
|
||||
| `--mdc-dialog-heading-ink-color` |  `rgba(0, 0, 0, 0.87)` | Color of the heading text.
|
||||
| `--mdc-dialog-content-ink-color` |  `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).
|
||||
| `--mdc-dialog-scroll-divider-color` |  `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.
|
||||
| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.
|
||||
@ -333,7 +333,7 @@ For example:
|
||||
<img src="images/initial-focus.png" width="597px">
|
||||
|
||||
```html
|
||||
<mwc-dialog title="Initial Focus" open>
|
||||
<mwc-dialog heading="Initial Focus" open>
|
||||
<div>
|
||||
In this example we set "dialogInitialFocus" on the mwc-textfield.
|
||||
When this dialog opens, it is auto-focused.
|
||||
|
||||
@ -59,7 +59,7 @@ export class DialogBase extends BaseElement {
|
||||
})
|
||||
stacked = false;
|
||||
|
||||
@property({type: String}) title = '';
|
||||
@property({type: String}) heading = '';
|
||||
|
||||
@property({type: String})
|
||||
@observer(function(this: DialogBase, newAction: string) {
|
||||
@ -180,10 +180,11 @@ export class DialogBase extends BaseElement {
|
||||
[cssClasses.STACKED]: this.stacked,
|
||||
};
|
||||
|
||||
let title = html``;
|
||||
let heading = html``;
|
||||
|
||||
if (this.title) {
|
||||
title = html`<h2 class="mdc-dialog__title">${this.title}</h2>`;
|
||||
if (this.heading) {
|
||||
heading = html`
|
||||
<h2 id="title" class="mdc-dialog__title">${this.heading}</h2>`;
|
||||
}
|
||||
|
||||
const actionsClasses = {
|
||||
@ -194,12 +195,12 @@ export class DialogBase extends BaseElement {
|
||||
<div class="mdc-dialog ${classMap(classes)}"
|
||||
role="alertdialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="my-dialog-title"
|
||||
aria-describedby="my-dialog-content">
|
||||
aria-labelledby="title"
|
||||
aria-describedby="content">
|
||||
<div class="mdc-dialog__container">
|
||||
<div class="mdc-dialog__surface">
|
||||
${title}
|
||||
<div class="mdc-dialog__content">
|
||||
${heading}
|
||||
<div id="content" class="mdc-dialog__content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<footer
|
||||
|
||||
@ -103,7 +103,7 @@ limitations under the License.
|
||||
.mdc-dialog__title {
|
||||
@include mdc-feature-targets($feat-color) {
|
||||
@include mdc-theme-prop(color, (
|
||||
varname: --mdc-dialog-title-ink-color,
|
||||
varname: --mdc-dialog-heading-ink-color,
|
||||
fallback: rgba(mdc-theme-prop-value($color), $opacity)
|
||||
));
|
||||
}
|
||||
|
||||
@ -54,7 +54,7 @@ const opened = html`
|
||||
`;
|
||||
|
||||
const withButtons = html`
|
||||
<mwc-dialog title="myTitle" actionAttribute="data-dialogAction">
|
||||
<mwc-dialog heading="myTitle" actionAttribute="data-dialogAction">
|
||||
<mwc-button
|
||||
slot="primaryAction"
|
||||
data-dialogAction="ok">
|
||||
@ -86,7 +86,7 @@ suite('mwc-dialog:', () => {
|
||||
let titleTag = element.shadowRoot!.querySelector('.mdc-dialog__title');
|
||||
assert.isNull(titleTag);
|
||||
|
||||
element.title = 'This is my Title';
|
||||
element.heading = 'This is my Title';
|
||||
await element.requestUpdate();
|
||||
titleTag = element.shadowRoot!.querySelector('.mdc-dialog__title');
|
||||
assert.notStrictEqual(titleTag, null);
|
||||
@ -128,7 +128,7 @@ suite('mwc-dialog:', () => {
|
||||
assert.strictEqual(surfaceElement.offsetWidth, 0);
|
||||
assert.strictEqual(surfaceElement.offsetHeight, 0);
|
||||
|
||||
element.title = 'Basic title';
|
||||
element.heading = 'Basic title';
|
||||
element.hideActions = true;
|
||||
element.open = true;
|
||||
await openedPromise;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user