Skip to content

Commit

Permalink
refactor(modal)!: rename width property to widthScale (#8252)
Browse files Browse the repository at this point in the history 
**Related Issue:** #8250 

## Summary

BREAKING CHANGE: For consistency, renames `width` property to
`widthScale`.
  • Loading branch information
@anveshmekala @benelan
anveshmekala authored and benelan committed Dec 2, 2023
1 parent 335d010 commit 6b09245
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 37 deletions.
6 changes: 3 additions & 3 deletions packages/calcite-components/src/components/modal/modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,14 +269,14 @@ slot[name="primary"] {
* Sizes
*/
@mixin modal-size($size, $width) {
:host([width="#{$size}"]) .modal {
:host([width-scale="#{$size}"]) .modal {
@apply max-h-full max-w-full;
inline-size: var(--calcite-modal-width, $width);
block-size: var(--calcite-modal-height, auto);
}

@media screen and (max-width: $width + 2 * $baseline) {
:host([width="#{$size}"]) {
:host([width-scale="#{$size}"]) {
.modal {
@apply m-0 h-full max-h-full w-full max-w-full;
}
Expand All @@ -285,7 +285,7 @@ slot[name="primary"] {
max-block-size: unset;
}
}
:host([width="#{$size}"][docked]) .container {
:host([width-scale="#{$size}"][docked]) .container {
align-items: flex-end;
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/modal/modal.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const simple = (): string => html`
${boolean("open", true)}
kind="${select("kind", ["brand", "danger", "info", "success", "warning"], "")}"
scale="${select("scale", ["s", "m", "l"], "m")}"
width="${select("width", ["s", "m", "l"], "s")}"
width-scale="${select("width-scale", ["s", "m", "l"], "s")}"
${boolean("fullscreen", false)}
${boolean("docked", false)}
${boolean("escape-disabled", false)}
Expand Down Expand Up @@ -52,7 +52,7 @@ export const slots = (): string => html`
${boolean("open", true)}
kind="${select("kind", ["brand", "danger", "info", "success", "warning"], "")}"
scale="${select("scale", ["s", "m", "l"], "m")}"
width="${select("width", ["s", "m", "l"], "s")}"
width-scale="${select("width-scale", ["s", "m", "l"], "s")}"
${boolean("fullscreen", false)}
${boolean("docked", false)}
${boolean("escape-disabled", false)}
Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/modal/modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export class Modal
@Prop({ reflect: true }) scale: Scale = "m";

/** Specifies the width of the component. */
@Prop({ reflect: true }) width: Scale = "m";
@Prop({ reflect: true }) widthScale: Scale = "m";

/** Sets the component to always be fullscreen (overrides `width` and `--calcite-modal-width` / `--calcite-modal-height`). */
@Prop({ reflect: true }) fullscreen: boolean;
Expand Down
62 changes: 31 additions & 31 deletions packages/calcite-components/src/demos/modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,12 @@ <h1 style="margin: 0 auto; text-align: center">Modal</h1>
**************************************************
-->
<div class="parent">
<div class="child right-aligned-text">Width S</div>
<div class="child right-aligned-text">WidthScale S</div>

<!-- small width & scale -->
<!-- small widthScale & scale -->
<div class="child">
<calcite-modal class="js-modal-s-s" width="s" scale="s">
<h3 slot="header">Small width and small scale modal</h3>
<calcite-modal class="js-modal-s-s" width-scale="s" scale="s">
<h3 slot="header">Small widthScale and small scale modal</h3>
<div slot="content">
<p>
The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements.
Expand All @@ -82,10 +82,10 @@ <h3 slot="header">Small width and small scale modal</h3>
</calcite-button>
</div>

<!-- small width & medium scale -->
<!-- small widthScale & medium scale -->
<div class="child">
<calcite-modal class="js-modal-s-m" width="s" scale="m">
<h3 slot="header">Small width and medium scale modal</h3>
<calcite-modal class="js-modal-s-m" width-scale="s" scale="m">
<h3 slot="header">Small widthScale and medium scale modal</h3>
<div slot="content">
<p>
The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements.
Expand All @@ -109,10 +109,10 @@ <h3 slot="header">Small width and medium scale modal</h3>
</calcite-button>
</div>

<!-- small width & large scale -->
<!-- small widthScale & large scale -->
<div class="child">
<calcite-modal class="js-modal-s-l" width="s" scale="l">
<h3 slot="header">Small width and large scale modal</h3>
<calcite-modal class="js-modal-s-l" width-scale="s" scale="l">
<h3 slot="header">Small widthScale and large scale modal</h3>
<div slot="content">
<p>
The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements.
Expand Down Expand Up @@ -143,12 +143,12 @@ <h3 slot="header">Small width and large scale modal</h3>
**************************************************
-->
<div class="parent">
<div class="child right-aligned-text">Width M</div>
<div class="child right-aligned-text">WidthScale M</div>

<!-- medium width & small scale -->
<!-- medium widthScale & small scale -->
<div class="child">
<calcite-modal class="js-modal-m-s" width="m" scale="s">
<h3 slot="header">Medium wdith and small scale modal</h3>
<calcite-modal class="js-modal-m-s" width-scale="m" scale="s">
<h3 slot="header">Medium wdithScale and small scale modal</h3>
<div slot="content">
<table>
<tbody>
Expand Down Expand Up @@ -184,10 +184,10 @@ <h3 slot="header">Medium wdith and small scale modal</h3>
</calcite-button>
</div>

<!-- medium width & medium scale -->
<!-- medium widthScale & medium scale -->
<div class="child">
<calcite-modal class="js-modal-m-m" width="m" scale="m">
<h3 slot="header">Medium width and medium scale modal</h3>
<calcite-modal class="js-modal-m-m" width-scale="m" scale="m">
<h3 slot="header">Medium widthScale and medium scale modal</h3>
<div slot="content">
<table>
<tbody>
Expand Down Expand Up @@ -223,10 +223,10 @@ <h3 slot="header">Medium width and medium scale modal</h3>
</calcite-button>
</div>

<!-- medium width & large scale -->
<!-- medium widthScale & large scale -->
<div class="child">
<calcite-modal class="js-modal-m-l" width="m" scale="l">
<h3 slot="header">Medium width and large scale modal</h3>
<calcite-modal class="js-modal-m-l" width-scale="m" scale="l">
<h3 slot="header">Medium widthScale and large scale modal</h3>
<div slot="content">
<table>
<tbody>
Expand Down Expand Up @@ -269,12 +269,12 @@ <h3 slot="header">Medium width and large scale modal</h3>
**************************************************
-->
<div class="parent">
<div class="child right-aligned-text">Width L</div>
<div class="child right-aligned-text">WidthScale L</div>

<!-- large width & small scale -->
<!-- large widthScale & small scale -->
<div class="child">
<calcite-modal class="js-modal-l-s" width="l" scale="s">
<h3 slot="header">Large width and small scale modal</h3>
<calcite-modal class="js-modal-l-s" width-scale="l" scale="s">
<h3 slot="header">Large widthScale and small scale modal</h3>
<div slot="content">
<p>
This modal will be fullscreen until it is as wide as the calcite-web grid's max-width. This enables you
Expand All @@ -300,10 +300,10 @@ <h3 slot="header">Large width and small scale modal</h3>
</calcite-button>
</div>

<!-- large width & medium scale -->
<!-- large widthScale & medium scale -->
<div class="child">
<calcite-modal class="js-modal-l-m" width="l" scale="m">
<h3 slot="header">Large width and medium scale modal</h3>
<calcite-modal class="js-modal-l-m" width-scale="l" scale="m">
<h3 slot="header">Large widthScale and medium scale modal</h3>
<div slot="content">
<p>
This modal will be fullscreen until it is as wide as the calcite-web grid's max-width. This enables you
Expand All @@ -329,10 +329,10 @@ <h3 slot="header">Large width and medium scale modal</h3>
</calcite-button>
</div>

<!-- large width & large scale -->
<!-- large widthScale & large scale -->
<div class="child">
<calcite-modal class="js-modal-l-l" width="l" scale="l">
<h3 slot="header">Large width and large scale modal</h3>
<calcite-modal class="js-modal-l-l" width-scale="l" scale="l">
<h3 slot="header">Large widthScale and large scale modal</h3>
<div slot="content">
<p>
This modal will be fullscreen until it is as wide as the calcite-web grid's max-width. This enables you
Expand Down Expand Up @@ -873,7 +873,7 @@ <h3 slot="header">Fullscreen modal</h3>
**************************************************
-->
<div class="child">
<calcite-modal class="js-modal-docked" status="info" docked width="s">
<calcite-modal class="js-modal-docked" status="info" docked width-scale="s">
<h3 slot="header">Docked</h3>
<div slot="content">
<p>
Expand Down

0 comments on commit 6b09245

Please sign in to comment.