Skip to content

Commit 0633fcb

Browse files
driskulldriskull
committed
Merge branch 'master' into dris0000/panel-footer-min-size-removal
# Conflicts: # src/components/panel/panel.scss
2 parents 1e5a805 + cfa5689 commit 0633fcb

20 files changed

+105
-72
lines changed

‎src/components/flow-item/flow-item.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
1+
/**
2+
* CSS Custom Properties
3+
*
4+
* These properties can be overridden using the component's tag as selector.
5+
*
6+
* @prop --calcite-flow-item-footer-padding: Specifies the padding of the component's footer.
7+
*/
8+
19
:host {
210
@extend %component-host;
311
@apply relative flex w-full flex-auto overflow-hidden;
12+
--calcite-flow-item-footer-padding: theme("spacing.2");
413
}
514

615
@include disabled();
@@ -11,3 +20,7 @@
1120
border-solid;
1221
border-inline-end-width: theme("borderWidth.DEFAULT");
1322
}
23+
24+
calcite-panel {
25+
--calcite-panel-footer-padding: var(--calcite-flow-item-footer-padding);
26+
}

‎src/components/flow-item/flow-item.stories.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,3 +223,11 @@ export const withActionBar_TestOnly = (): string => html`<div style="width: 300p
223223
<p>Slotted content!</p>
224224
</calcite-flow-item>
225225
</div>`;
226+
227+
export const footerPadding_TestOnly = (): string => html`<div style="width: 300px;">
228+
<calcite-flow-item height-scale="s" style="--calcite-flow-item-footer-padding: 20px;">
229+
<div slot="header-content">Header!</div>
230+
<p>Slotted content!</p>
231+
<div slot="footer">Footer!</div>
232+
</calcite-flow-item>
233+
</div>`;

‎src/components/flow-item/flow-item.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ import { CSS, ICONS, SLOTS } from "./resources";
4040
* @slot header-content - A slot for adding custom content to the component's header.
4141
* @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
4242
* @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
43-
* @slot footer-actions - A slot for adding `calcite-button`s to the component's footer.
43+
* @slot footer-actions - [Deprecated] A slot for adding `calcite-button`s to the component's footer.
4444
* @slot footer - A slot for adding custom content to the component's footer.
4545
*/
4646
@Component({

‎src/components/flow/readme.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,17 @@ Renders a basic flow with a couple `calcite-panel`s.
2121
</calcite-flow>
2222
```
2323

24-
### Menu-actions-and-footer-actions
24+
### Menu-actions-and-footer
2525

26-
Renders a flow with menu-actions and footer-actions in the form of buttons.
26+
Renders a flow with menu-actions and footer in the form of buttons.
2727

2828
```html
2929
<calcite-flow>
3030
<calcite-panel heading="What are the most popular commute alternatives?">
3131
<button slot="header-menu-actions">Reset</button>
3232
<button slot="header-menu-actions">Rename</button>
33-
<button slot="footer-actions">Save</button>
34-
<button slot="footer-actions">Cancel</button>
33+
<button slot="footer">Save</button>
34+
<button slot="footer">Cancel</button>
3535
</calcite-panel>
3636
</calcite-flow>
3737
```

‎src/components/flow/usage/Menu-actions-and-footer-actions.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
Renders a flow with menu-actions and footer-actions in the form of buttons.
1+
Renders a flow with menu-actions and footer in the form of buttons.
22

33
```html
44
<calcite-flow>
55
<calcite-panel heading="What are the most popular commute alternatives?">
66
<button slot="header-menu-actions">Reset</button>
77
<button slot="header-menu-actions">Rename</button>
8-
<button slot="footer-actions">Save</button>
9-
<button slot="footer-actions">Cancel</button>
8+
<button slot="footer">Save</button>
9+
<button slot="footer">Cancel</button>
1010
</calcite-panel>
1111
</calcite-flow>
1212
```

‎src/components/panel/panel.scss

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
1+
/**
2+
* CSS Custom Properties
3+
*
4+
* These properties can be overridden using the component's tag as selector.
5+
*
6+
* @prop --calcite-panel-footer-padding: Specifies the padding of the component's footer.
7+
*/
8+
19
:host {
210
@extend %component-host;
311
@apply relative flex w-full h-full flex-auto overflow-hidden;
412

513
--calcite-min-header-height: calc(var(--calcite-icon-size) * 3);
14+
--calcite-panel-footer-padding: theme("spacing.2");
615
}
716

817
@include disabled();
@@ -108,7 +117,7 @@
108117
justify-evenly;
109118

110119
flex: 0 0 auto;
111-
padding: theme("spacing.2");
120+
padding: var(--calcite-panel-footer-padding);
112121
}
113122

114123
.fab-container {

‎src/components/panel/panel.stories.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,3 +191,11 @@ export const withActionBar_TestOnly = (): string => html`<div style="width: 300p
191191
<p>Slotted content!</p>
192192
</calcite-panel>
193193
</div>`;
194+
195+
export const footerPadding_TestOnly = (): string => html`<div style="width: 300px;">
196+
<calcite-panel height-scale="s" style="--calcite-panel-footer-padding: 20px;">
197+
<div slot="header-content">Header!</div>
198+
<p>Slotted content!</p>
199+
<div slot="footer">Footer!</div>
200+
</calcite-panel>
201+
</div>`;

‎src/components/panel/panel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import { PanelMessages } from "./assets/panel/t9n";
4242
* @slot header-content - A slot for adding custom content to the header.
4343
* @slot header-menu-actions - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
4444
* @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
45-
* @slot footer-actions - A slot for adding buttons to the footer.
45+
* @slot footer-actions - [Deprecated] A slot for adding buttons to the footer.
4646
* @slot footer - A slot for adding custom content to the footer.
4747
*/
4848
@Component({

‎src/components/shell/shell.stories.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -282,8 +282,8 @@ const advancedTrailingPanelHTMl = html(`
282282
</calcite-block-section>
283283
</calcite-block-content>
284284
</calcite-block>
285-
<calcite-button slot="footer-actions" width="half" appearance="outline">Cancel</calcite-button>
286-
<calcite-button slot="footer-actions" width="half">Save</calcite-button>
285+
<calcite-button slot="footer" width="half" appearance="outline">Cancel</calcite-button>
286+
<calcite-button slot="footer" width="half">Save</calcite-button>
287287
</calcite-flow-item>
288288
<calcite-flow-item heading="Deeper flow item">
289289
<calcite-block collapsible open heading="End Content" summary="Select goodness">
@@ -316,8 +316,8 @@ const advancedTrailingPanelHTMl = html(`
316316
</calcite-block-section>
317317
</calcite-block-content>
318318
</calcite-block>
319-
<calcite-button slot="footer-actions" width="half" appearance="outline">Cancel</calcite-button>
320-
<calcite-button slot="footer-actions" width="half">Save</calcite-button>
319+
<calcite-button slot="footer" width="half" appearance="outline">Cancel</calcite-button>
320+
<calcite-button slot="footer" width="half">Save</calcite-button>
321321
</calcite-flow-item>
322322
</calcite-flow>
323323
`);
@@ -465,7 +465,7 @@ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
465465
</calcite-block-content>
466466
</calcite-block>
467467
<calcite-button
468-
slot="footer-actions"
468+
slot="footer"
469469
width="half"
470470
appearance="outline"
471471
alignment="center"
@@ -475,7 +475,7 @@ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
475475
Cancel
476476
</calcite-button>
477477
<calcite-button
478-
slot="footer-actions"
478+
slot="footer"
479479
width="half"
480480
alignment="center"
481481
appearance="solid"
@@ -525,7 +525,7 @@ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
525525
</calcite-block-content>
526526
</calcite-block>
527527
<calcite-button
528-
slot="footer-actions"
528+
slot="footer"
529529
width="half"
530530
appearance="outline"
531531
alignment="center"
@@ -535,7 +535,7 @@ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
535535
Cancel
536536
</calcite-button>
537537
<calcite-button
538-
slot="footer-actions"
538+
slot="footer"
539539
width="half"
540540
alignment="center"
541541
appearance="solid"

‎src/demos/flow.html

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,22 +45,23 @@
4545
</calcite-flow-item>
4646
<calcite-flow-item heading="tell me that you love me more">
4747
<!-- image -->
48+
<div slot="footer">test</div>
4849
</calcite-flow-item>
4950
</calcite-flow>
5051
</div>
5152
</div>
5253

53-
<!-- menu-actions & footer-actions -->
54+
<!-- menu-actions & footer -->
5455
<div class="parent">
55-
<div class="child right-aligned-text">menu-actions & footer-actions</div>
56+
<div class="child right-aligned-text">menu-actions & footer</div>
5657

5758
<div class="child">
5859
<calcite-flow>
5960
<calcite-flow-item heading="What are the most popular commute alternatives?">
6061
<button slot="header-menu-actions">Reset</button>
6162
<button slot="header-menu-actions">Rename</button>
62-
<button slot="footer-actions">Save</button>
63-
<button slot="footer-actions">Cancel</button>
63+
<button slot="footer">Save</button>
64+
<button slot="footer">Cancel</button>
6465
</calcite-flow-item>
6566
</calcite-flow>
6667
</div>
@@ -78,8 +79,8 @@
7879
>
7980
<button slot="menu-actions">Reset</button>
8081
<button slot="menu-actions">Rename</button>
81-
<button slot="footer-actions" class="btn">Save</button>
82-
<button slot="footer-actions" class="btn btn-secondary">Cancel</button>
82+
<button slot="footer" class="btn">Save</button>
83+
<button slot="footer" class="btn btn-secondary">Cancel</button>
8384
<p><img src="https://placeimg.com/300/200/nature" alt="placeholder" /></p>
8485
<p><img src="https://placeimg.com/300/200/nature" alt="placeholder" /></p>
8586
</calcite-flow-item>
@@ -111,8 +112,8 @@
111112
<p><img src="https://placeimg.com/300/200/nature" alt="nature" /></p>
112113
<p><img src="https://placeimg.com/300/200/nature" alt="nature" /></p>
113114
<calcite-action label="pencil icon" slot="menu-actions" icon="pencil"></calcite-action>
114-
<button slot="footer-actions">Save</button>
115-
<button slot="footer-actions">Cancel</button>
115+
<button slot="footer">Save</button>
116+
<button slot="footer">Cancel</button>
116117
`;
117118
flowNode.appendChild(newNode);
118119
setTimeout(function () {

‎src/demos/shell/block-configurations.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -814,8 +814,8 @@
814814
<calcite-tooltip label="tooltip" reference-element="label-fab" pointer-disabled>
815815
Add label class
816816
</calcite-tooltip>
817-
<calcite-button slot="footer-actions" appearance="outline" width="half">Cancel</calcite-button>
818-
<calcite-button slot="footer-actions" width="half">Done</calcite-button>
817+
<calcite-button slot="footer" appearance="outline" width="half">Cancel</calcite-button>
818+
<calcite-button slot="footer" width="half">Done</calcite-button>
819819
</calcite-flow-item>
820820
</calcite-flow>
821821
<!-- </div> -->

‎src/demos/shell/demo-app-advanced-2-shell-header.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -231,8 +231,8 @@
231231
<calcite-tooltip label="tooltip" reference-element="label-fab" pointer-disabled>
232232
Add label class
233233
</calcite-tooltip>
234-
<calcite-button slot="footer-actions" appearance="outline" width="half">Cancel</calcite-button>
235-
<calcite-button slot="footer-actions" width="half">Done</calcite-button>
234+
<calcite-button slot="footer" appearance="outline" width="half">Cancel</calcite-button>
235+
<calcite-button slot="footer" width="half">Done</calcite-button>
236236
</calcite-panel>
237237
</something>
238238
</calcite-shell-panel>

‎src/demos/shell/demo-app-advanced-center-row-async.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,8 +139,8 @@
139139
</calcite-action-bar>
140140
<calcite-panel heading="Single panel" description="I'm in the contextual-panel" width-scale="m">
141141
Default slot of panel
142-
<calcite-button width="half" slot="footer-actions" appearance="outline">Cancel</calcite-button>
143-
<calcite-button width="half" slot="footer-actions">Done</calcite-button>
142+
<calcite-button width="half" slot="footer" appearance="outline">Cancel</calcite-button>
143+
<calcite-button width="half" slot="footer">Done</calcite-button>
144144
</calcite-panel>
145145
</calcite-shell-panel>
146146
<div class="gnav" slot="header">

‎src/demos/shell/demo-app-advanced-center-row.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,8 @@
118118
</calcite-action-bar>
119119
<calcite-panel heading="Single panel" summary="I'm in the contextual-panel" width-scale="m">
120120
Default slot of panel
121-
<calcite-button width="half" slot="footer-actions" appearance="outline">Cancel</calcite-button>
122-
<calcite-button width="half" slot="footer-actions">Done</calcite-button>
121+
<calcite-button width="half" slot="footer" appearance="outline">Cancel</calcite-button>
122+
<calcite-button width="half" slot="footer">Done</calcite-button>
123123
</calcite-panel>
124124
</calcite-shell-panel>
125125
<div class="gnav" slot="header">

‎src/demos/shell/demo-app-full-window-reversed.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -227,8 +227,8 @@
227227
</calcite-block-section>
228228
</calcite-block-content>
229229
</calcite-block>
230-
<calcite-button width="halft" appearance="outline" slot="footer-actions">Cancel</calcite-button>
231-
<calcite-button width="halft" slot="footer-actions">Save</calcite-button>
230+
<calcite-button width="halft" appearance="outline" slot="footer">Cancel</calcite-button>
231+
<calcite-button width="halft" slot="footer">Save</calcite-button>
232232
</calcite-flow-item>
233233
<calcite-flow-item heading="Deeper flow item" height-scale="l" width-scale="m">
234234
<calcite-value-list id="one" multiple filter-enabled>
@@ -347,8 +347,8 @@
347347
</calcite-block-section>
348348
</calcite-block-content>
349349
</calcite-block>
350-
<calcite-button slot="footer-actions" width="half">Save</calcite-button>
351-
<calcite-button slot="footer-actions" width="half" appearance="outline">Cancel</calcite-button>
350+
<calcite-button slot="footer" width="half">Save</calcite-button>
351+
<calcite-button slot="footer" width="half" appearance="outline">Cancel</calcite-button>
352352
</calcite-flow-item>
353353
</calcite-flow>
354354
</calcite-shell-panel>
@@ -433,8 +433,8 @@ <h3 class="heading" slot="header-content">WE CARE A LOT</h3>
433433
value="4"
434434
></calcite-pick-list-item>
435435
</calcite-pick-list>
436-
<calcite-button slot="footer-actions" width="half">Yeah!</calcite-button>
437-
<calcite-button slot="footer-actions" width="half" appearance="outline">Naw.</calcite-button>
436+
<calcite-button slot="footer" width="half">Yeah!</calcite-button>
437+
<calcite-button slot="footer" width="half" appearance="outline">Naw.</calcite-button>
438438
</calcite-panel>
439439
</calcite-popover>
440440
<script>

‎src/demos/shell/demo-app-full-window.html

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -101,10 +101,8 @@
101101
</div>
102102
</calcite-block-content>
103103
</calcite-block>
104-
<calcite-button width="half" scale="s" slot="footer-actions" appearance="outline"
105-
>Cancel</calcite-button
106-
>
107-
<calcite-button width="half" scale="s" slot="footer-actions">OK</calcite-button>
104+
<calcite-button width="half" scale="s" slot="footer" appearance="outline">Cancel</calcite-button>
105+
<calcite-button width="half" scale="s" slot="footer">OK</calcite-button>
108106
</calcite-panel>
109107
</calcite-shell-panel>
110108

@@ -190,10 +188,8 @@
190188
</calcite-block-section>
191189
</calcite-block-content>
192190
</calcite-block>
193-
<calcite-button width="half" scale="s" appearance="outline" slot="footer-actions"
194-
>Save</calcite-button
195-
>
196-
<calcite-button width="half" scale="s" slot="footer-actions">Cancel</calcite-button>
191+
<calcite-button width="half" scale="s" appearance="outline" slot="footer">Save</calcite-button>
192+
<calcite-button width="half" scale="s" slot="footer">Cancel</calcite-button>
197193
</calcite-flow-item>
198194
<calcite-flow-item
199195
heading="A capability"
@@ -327,10 +323,8 @@
327323
</calcite-block-section>
328324
</calcite-block-content>
329325
</calcite-block>
330-
<calcite-button slot="footer-actions" scale="s" width="half">Save</calcite-button>
331-
<calcite-button slot="footer-actions" scale="s" width="half" appearance="outline"
332-
>Cancel</calcite-button
333-
>
326+
<calcite-button slot="footer" scale="s" width="half">Save</calcite-button>
327+
<calcite-button slot="footer" scale="s" width="half" appearance="outline">Cancel</calcite-button>
334328
<calcite-fab slot="fab" label="Add Item" text="Add"></calcite-fab>
335329
</calcite-flow-item>
336330
</calcite-flow>

‎src/demos/shell/demo-app-rtl.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -157,8 +157,8 @@ <h2>Mode Theme</h2>
157157
</calcite-block-section>
158158
</calcite-block-content>
159159
</calcite-block>
160-
<button slot="footer-actions">Save</button>
161-
<button slot="footer-actions">Cancel</button>
160+
<button slot="footer">Save</button>
161+
<button slot="footer">Cancel</button>
162162
</calcite-flow-item>
163163
<calcite-flow-item heading="Deeper flow item">
164164
<calcite-block collapsible open heading="Contextual Content" summary="Select goodness">
@@ -191,8 +191,8 @@ <h2>Mode Theme</h2>
191191
</calcite-block-section>
192192
</calcite-block-content>
193193
</calcite-block>
194-
<button slot="footer-actions">Save</button>
195-
<button slot="footer-actions">Cancel</button>
194+
<button slot="footer">Save</button>
195+
<button slot="footer">Cancel</button>
196196
</calcite-flow-item>
197197
</calcite-flow>
198198
</calcite-shell-panel>
@@ -296,8 +296,8 @@ <h2>Dark Mode</h2>
296296
</calcite-block-section>
297297
</calcite-block-content>
298298
</calcite-block>
299-
<button slot="footer-actions">Save</button>
300-
<button slot="footer-actions">Cancel</button>
299+
<button slot="footer">Save</button>
300+
<button slot="footer">Cancel</button>
301301
</calcite-panel>
302302
<calcite-panel heading="Deeper flow item">
303303
<calcite-block collapsible open heading="Contextual Content" summary="Select goodness">
@@ -330,8 +330,8 @@ <h2>Dark Mode</h2>
330330
</calcite-block-section>
331331
</calcite-block-content>
332332
</calcite-block>
333-
<button slot="footer-actions">Save</button>
334-
<button slot="footer-actions">Cancel</button>
333+
<button slot="footer">Save</button>
334+
<button slot="footer">Cancel</button>
335335
</calcite-panel>
336336
</calcite-flow>
337337
</calcite-shell-panel>

0 commit comments

Comments
 (0)