Skip to content

Commit a7888ac

Browse files
bsastregxbsastregx
authored
[mercury] update dialog footer (#384)
* Update dialog footer - include `control-footer` only. - update dialog showcase by adding new classes * update showcase files * roll back
1 parent 50ee280 commit a7888ac

File tree

5 files changed

+160
-24
lines changed

5 files changed

+160
-24
lines changed

‎packages/mercury/showcase/all.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/mercury/showcase/assets/scripts/bundles.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export const getThemeBundles = (basePath) => [
5757
getThemeModelItem(basePath, "utils/elevation"),
5858
getThemeModelItem(basePath, "utils/form--full"),
5959
getThemeModelItem(basePath, "utils/layout"),
60+
getThemeModelItem(basePath, "utils/spacing"),
6061
getThemeModelItem(basePath, "utils/typography"),
6162
getThemeModelItem(basePath, "chameleon/scrollbar")
6263
];

‎packages/mercury/showcase/dialog.html‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -89,13 +89,12 @@ <h1 class="section__title">dialog</h1>
8989
effort required for updates and enhancements.
9090
</p>
9191
</div>
92-
93-
<button slot="footer" type="button" class="button-tertiary">
94-
Cancel
95-
</button>
96-
<button slot="footer" type="button" class="button-primary">
97-
Save
98-
</button>
92+
<div slot="footer" class="buttons-spacer">
93+
<button type="button" class="button-secondary">
94+
Cancel
95+
</button>
96+
<button type="button" class="button-primary">Save</button>
97+
</div>
9998
</ch-dialog>
10099
<button class="button-secondary" id="btn-show-dialog-basic">
101100
Show Dialog
@@ -115,6 +114,10 @@ <h1 class="section__title">dialog</h1>
115114
<script>
116115
code = `<ch-dialog class="dialog" caption="About GeneXus" show-header>
117116
<div class="spacing-body"><!-- Your dialog content here --></div>
117+
<div slot="footer" class="buttons-spacer">
118+
<button type="button" class="button-secondary">Cancel</button>
119+
<button type="button" class="button-primary">Save</button>
120+
</div>
118121
</ch-dialog>
119122
`;
120123
</script>
@@ -198,8 +201,10 @@ <h1 class="section__title">.control-footer</h1>
198201
<ch-code language="tsx" class="code"> </ch-code>
199202
<script>
200203
code = `<div class="control-footer">
201-
<button class="button-tertiary">Cancel</button>
202-
<button class="button-primary">Save</button>
204+
<div class="buttons-spacer">
205+
<button class="button-secondary">Cancel</button>
206+
<button class="button-primary">Save</button>
207+
</div>
203208
</div>`;
204209
</script>
205210
</div>
@@ -240,8 +245,10 @@ <h1 class="section__title">.control-footer</h1>
240245
<ch-code language="tsx" class="code"> </ch-code>
241246
<script>
242247
code = `<div class="control-footer-with-border">
243-
<button class="button-tertiary">Cancel</button>
244-
<button class="button-primary">Save</button>
248+
<div class="buttons-spacer">
249+
<button class="button-secondary">Cancel</button>
250+
<button class="button-primary">Save</button>
251+
</div>
245252
</div>`;
246253
</script>
247254
</div>
@@ -284,8 +291,10 @@ <h1 class="section__title">.control-footer</h1>
284291
<script>
285292
code = `<div class="widget">
286293
<div class="control-footer-with-border spacing-body">
287-
<button class="button-tertiary">Cancel</button>
288-
<button class="button-primary">Save</button>
294+
<div class="buttons-spacer">
295+
<button class="button-secondary">Cancel</button>
296+
<button class="button-primary">Save</button>
297+
</div>
289298
</div>
290299
</div>
291300
`;

‎packages/mercury/showcase/scss/mercury.scss‎

Lines changed: 128 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8128,29 +8128,153 @@
81288128
}
81298129

81308130
%sidebar {
8131+
// chameleon tokens (do not modify names)
81318132
--ch-sidebar-inline-size--collapsed: 42px;
81328133
--ch-sidebar__chevron-size: 24px;
8133-
--ch-sidebar__chevron-image-size: 16px;
8134+
--ch-sidebar__chevron-image-size: var(--mer-spacing--sm); // 12px
8135+
--ch-sidebar__chevron-background-image: var(
8136+
--icon__system_arrow-right_primary--enabled
8137+
);
8138+
8139+
// spacing body tokens
8140+
--spacing-body-block-start: var(--mer-spacing--sm);
8141+
--spacing-body-block-end: var(--mer-spacing--sm);
8142+
--spacing-body-inline-start: var(--mer-spacing--sm);
8143+
--spacing-body-inline-end: var(--mer-spacing--sm);
8144+
8145+
// sidebar tokens
8146+
--sidebar-button-border-width: var(--mer-border__width--sm);
8147+
--sidebar-button-margin: calc(
8148+
(
8149+
var(--ch-sidebar-inline-size--collapsed) -
8150+
(
8151+
var(--ch-sidebar__chevron-size) + var(--sidebar-button-border-width) *
8152+
2
8153+
)
8154+
) / 2
8155+
);
81348156

81358157
background-color: var(--mer-color__neutral-gray--800);
8136-
color: var(--mer-color__neutral-gray--300);
8158+
overflow: hidden;
8159+
8160+
// Collapsed Hidden
8161+
8162+
&-collapsed-hidden {
8163+
--ch-sidebar-inline-size--collapsed: 0;
8164+
}
8165+
8166+
// With Motion
8167+
8168+
&-with-motion {
8169+
&.ch-sidebar--collapsed {
8170+
// WA to win over user "inline-size" property. This allows the transition.
8171+
inline-size: var(--ch-sidebar-inline-size--collapsed) !important;
8172+
}
8173+
transition: var(--mer-timing--super-fast) ease inline-size;
8174+
8175+
&--button-before {
8176+
transition: var(--mer-timing--super-fast) ease transform;
8177+
}
8178+
}
8179+
8180+
// - - - - - - - -
8181+
// Button
8182+
// - - - - - - - -
81378183

81388184
&-expand-button {
8139-
padding: var(--mer-spacing--xs);
8185+
background-color: var(--mer-surface__elevation--02);
8186+
border: var(--sidebar-button-border-width) solid
8187+
var(--mer-border-color__on-elevation--01);
8188+
color: var(--mer-icon__neutral);
8189+
inline-size: calc(
8190+
var(--ch-sidebar__chevron-size) + var(--sidebar-button-border-width) * 2
8191+
);
8192+
margin: var(--sidebar-button-margin);
8193+
8194+
&--before {
8195+
transform: rotate(180deg);
8196+
}
8197+
8198+
&--hover {
8199+
background-color: var(--mer-surface__elevation--03);
8200+
border-color: var(--mer-border-color__on-elevation--02);
8201+
color: var(--mer-icon__highlighted);
8202+
}
8203+
8204+
&--active {
8205+
background-color: var(--mer-surface__elevation--01);
8206+
border-color: var(--mer-border-color__on-elevation--01);
8207+
}
8208+
8209+
&--focus-visible {
8210+
@include focus-outline();
8211+
}
8212+
8213+
&--collapsed {
8214+
&-before {
8215+
transform: rotate(0);
8216+
}
8217+
}
81408218
}
81418219
}
81428220

81438221
@mixin sidebar(
81448222
$sidebar-selector: ".sidebar",
8145-
$expand-button-selector: ".sidebar::part(expand-button)"
8223+
$sidebar-collapsed-hidden-selector: ".sidebar-collapsed-hidden",
8224+
$sidebar-with-motion-selector: ".sidebar-with-motion",
8225+
$sidebar-with-motion-button-selector:
8226+
".sidebar-with-motion::part(expand-button)",
8227+
$expand-button-selector: ".sidebar::part(expand-button)",
8228+
$expand-button-collapsed-selector: ".sidebar::part(expand-button collapsed)"
81468229
) {
81478230
#{$sidebar-selector} {
81488231
@extend %sidebar;
81498232
}
81508233

8234+
// Collapsed hidden
8235+
#{$sidebar-collapsed-hidden-selector} {
8236+
@extend %sidebar-collapsed-hidden;
8237+
}
8238+
8239+
// With motion
8240+
#{$sidebar-with-motion-selector} {
8241+
@extend %sidebar-with-motion;
8242+
}
8243+
#{$sidebar-with-motion-button-selector}::before {
8244+
@extend %sidebar-with-motion--button-before;
8245+
}
8246+
8247+
// - - - - - - - -
8248+
// Button
8249+
// - - - - - - - -
8250+
8251+
// enabled
81518252
#{$expand-button-selector} {
81528253
@extend %sidebar-expand-button;
81538254
}
8255+
#{$expand-button-selector}::before {
8256+
@extend %sidebar-expand-button--before;
8257+
}
8258+
// hover
8259+
#{$expand-button-selector}:hover {
8260+
@extend %sidebar-expand-button--hover;
8261+
}
8262+
// active
8263+
#{$expand-button-selector}:active {
8264+
@extend %sidebar-expand-button--active;
8265+
}
8266+
8267+
#{$expand-button-selector}:focus-visible {
8268+
@extend %sidebar-expand-button--focus-visible;
8269+
}
8270+
8271+
// collapsed
8272+
#{$expand-button-collapsed-selector} {
8273+
@extend %sidebar-expand-button--collapsed;
8274+
}
8275+
#{$expand-button-collapsed-selector}::before {
8276+
@extend %sidebar-expand-button--collapsed-before;
8277+
}
81548278
}
81558279

81568280
%slider__slider {

‎packages/mercury/src/components/dialog/_dialog-styles.scss‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
%dialog {
2-
--spacing-body-block-start: var(--mer-spacing--lg);
3-
--spacing-body-block-end: var(--mer-spacing--lg);
4-
--spacing-body-inline-start: var(--mer-spacing--md);
5-
--spacing-body-inline-end: var(--mer-spacing--md);
2+
--spacing-body-block-start: var(--mer-spacing--md);
3+
--spacing-body-block-end: var(--mer-spacing--md);
4+
--spacing-body-inline-start: var(--mer-spacing--sm);
5+
--spacing-body-inline-end: var(--mer-spacing--sm);
66
--ch-dialog-max-inline-size: 800px;
77
background-color: var(--mer-surface__elevation--01);
88
box-shadow: var(--mer-box-shadow--01);
@@ -43,8 +43,8 @@
4343
}
4444

4545
&__footer {
46-
@include control-footer-base();
47-
@include control-footer-border();
46+
padding-block: var(--mer-spacing--xs);
47+
padding-inline: var(--mer-spacing--sm);
4848
}
4949

5050
// ------------------------------
@@ -146,6 +146,8 @@
146146
#{$footer-selector} {
147147
@extend %dialog__footer;
148148
}
149+
// @include buttons-spacer($footer-selector);
150+
@include control-footer($with-border-selector: $footer-selector);
149151

150152
// ------------------------------
151153
// Edges (For dragging)

0 commit comments

Comments
 (0)