Skip to content

Commit 330f966

Browse files
anveshmekalabenelan
anveshmekala
authored and
benelan
committed
refactor(modal)!: rename width property to widthScale (#8252)
**Related Issue:** #8250 ## Summary BREAKING CHANGE: For consistency, renames `width` property to `widthScale`.
1 parent f0f1f25 commit 330f966

File tree

4 files changed

+37
-37
lines changed

4 files changed

+37
-37
lines changed

‎packages/calcite-components/src/components/modal/modal.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -269,14 +269,14 @@ slot[name="primary"] {
269269
* Sizes
270270
*/
271271
@mixin modal-size($size, $width) {
272-
:host([width="#{$size}"]) .modal {
272+
:host([width-scale="#{$size}"]) .modal {
273273
@apply max-h-full max-w-full;
274274
inline-size: var(--calcite-modal-width, $width);
275275
block-size: var(--calcite-modal-height, auto);
276276
}
277277

278278
@media screen and (max-width: $width + 2 * $baseline) {
279-
:host([width="#{$size}"]) {
279+
:host([width-scale="#{$size}"]) {
280280
.modal {
281281
@apply m-0 h-full max-h-full w-full max-w-full;
282282
}
@@ -285,7 +285,7 @@ slot[name="primary"] {
285285
max-block-size: unset;
286286
}
287287
}
288-
:host([width="#{$size}"][docked]) .container {
288+
:host([width-scale="#{$size}"][docked]) .container {
289289
align-items: flex-end;
290290
}
291291
}

‎packages/calcite-components/src/components/modal/modal.stories.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const simple = (): string => html`
2020
${boolean("open", true)}
2121
kind="${select("kind", ["brand", "danger", "info", "success", "warning"], "")}"
2222
scale="${select("scale", ["s", "m", "l"], "m")}"
23-
width="${select("width", ["s", "m", "l"], "s")}"
23+
width-scale="${select("width-scale", ["s", "m", "l"], "s")}"
2424
${boolean("fullscreen", false)}
2525
${boolean("docked", false)}
2626
${boolean("escape-disabled", false)}
@@ -52,7 +52,7 @@ export const slots = (): string => html`
5252
${boolean("open", true)}
5353
kind="${select("kind", ["brand", "danger", "info", "success", "warning"], "")}"
5454
scale="${select("scale", ["s", "m", "l"], "m")}"
55-
width="${select("width", ["s", "m", "l"], "s")}"
55+
width-scale="${select("width-scale", ["s", "m", "l"], "s")}"
5656
${boolean("fullscreen", false)}
5757
${boolean("docked", false)}
5858
${boolean("escape-disabled", false)}

‎packages/calcite-components/src/components/modal/modal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ export class Modal
128128
@Prop({ reflect: true }) scale: Scale = "m";
129129

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

133133
/** Sets the component to always be fullscreen (overrides `width` and `--calcite-modal-width` / `--calcite-modal-height`). */
134134
@Prop({ reflect: true }) fullscreen: boolean;

‎packages/calcite-components/src/demos/modal.html

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,12 @@ <h1 style="margin: 0 auto; text-align: center">Modal</h1>
5353
**************************************************
5454
-->
5555
<div class="parent">
56-
<div class="child right-aligned-text">Width S</div>
56+
<div class="child right-aligned-text">WidthScale S</div>
5757

58-
<!-- small width & scale -->
58+
<!-- small widthScale & scale -->
5959
<div class="child">
60-
<calcite-modal class="js-modal-s-s" width="s" scale="s">
61-
<h3 slot="header">Small width and small scale modal</h3>
60+
<calcite-modal class="js-modal-s-s" width-scale="s" scale="s">
61+
<h3 slot="header">Small widthScale and small scale modal</h3>
6262
<div slot="content">
6363
<p>
6464
The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements.
@@ -82,10 +82,10 @@ <h3 slot="header">Small width and small scale modal</h3>
8282
</calcite-button>
8383
</div>
8484

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

112-
<!-- small width & large scale -->
112+
<!-- small widthScale & large scale -->
113113
<div class="child">
114-
<calcite-modal class="js-modal-s-l" width="s" scale="l">
115-
<h3 slot="header">Small width and large scale modal</h3>
114+
<calcite-modal class="js-modal-s-l" width-scale="s" scale="l">
115+
<h3 slot="header">Small widthScale and large scale modal</h3>
116116
<div slot="content">
117117
<p>
118118
The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements.
@@ -143,12 +143,12 @@ <h3 slot="header">Small width and large scale modal</h3>
143143
**************************************************
144144
-->
145145
<div class="parent">
146-
<div class="child right-aligned-text">Width M</div>
146+
<div class="child right-aligned-text">WidthScale M</div>
147147

148-
<!-- medium width & small scale -->
148+
<!-- medium widthScale & small scale -->
149149
<div class="child">
150-
<calcite-modal class="js-modal-m-s" width="m" scale="s">
151-
<h3 slot="header">Medium wdith and small scale modal</h3>
150+
<calcite-modal class="js-modal-m-s" width-scale="m" scale="s">
151+
<h3 slot="header">Medium wdithScale and small scale modal</h3>
152152
<div slot="content">
153153
<table>
154154
<tbody>
@@ -184,10 +184,10 @@ <h3 slot="header">Medium wdith and small scale modal</h3>
184184
</calcite-button>
185185
</div>
186186

187-
<!-- medium width & medium scale -->
187+
<!-- medium widthScale & medium scale -->
188188
<div class="child">
189-
<calcite-modal class="js-modal-m-m" width="m" scale="m">
190-
<h3 slot="header">Medium width and medium scale modal</h3>
189+
<calcite-modal class="js-modal-m-m" width-scale="m" scale="m">
190+
<h3 slot="header">Medium widthScale and medium scale modal</h3>
191191
<div slot="content">
192192
<table>
193193
<tbody>
@@ -223,10 +223,10 @@ <h3 slot="header">Medium width and medium scale modal</h3>
223223
</calcite-button>
224224
</div>
225225

226-
<!-- medium width & large scale -->
226+
<!-- medium widthScale & large scale -->
227227
<div class="child">
228-
<calcite-modal class="js-modal-m-l" width="m" scale="l">
229-
<h3 slot="header">Medium width and large scale modal</h3>
228+
<calcite-modal class="js-modal-m-l" width-scale="m" scale="l">
229+
<h3 slot="header">Medium widthScale and large scale modal</h3>
230230
<div slot="content">
231231
<table>
232232
<tbody>
@@ -269,12 +269,12 @@ <h3 slot="header">Medium width and large scale modal</h3>
269269
**************************************************
270270
-->
271271
<div class="parent">
272-
<div class="child right-aligned-text">Width L</div>
272+
<div class="child right-aligned-text">WidthScale L</div>
273273

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

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

332-
<!-- large width & large scale -->
332+
<!-- large widthScale & large scale -->
333333
<div class="child">
334-
<calcite-modal class="js-modal-l-l" width="l" scale="l">
335-
<h3 slot="header">Large width and large scale modal</h3>
334+
<calcite-modal class="js-modal-l-l" width-scale="l" scale="l">
335+
<h3 slot="header">Large widthScale and large scale modal</h3>
336336
<div slot="content">
337337
<p>
338338
This modal will be fullscreen until it is as wide as the calcite-web grid's max-width. This enables you
@@ -873,7 +873,7 @@ <h3 slot="header">Fullscreen modal</h3>
873873
**************************************************
874874
-->
875875
<div class="child">
876-
<calcite-modal class="js-modal-docked" status="info" docked width="s">
876+
<calcite-modal class="js-modal-docked" status="info" docked width-scale="s">
877877
<h3 slot="header">Docked</h3>
878878
<div slot="content">
879879
<p>

0 commit comments

Comments
 (0)