Skip to content

Commit

Permalink
Merge branch 'main' into fix/date-picker-cwc
Browse files Browse the repository at this point in the history
  • Loading branch information
@ariellalgilmore
ariellalgilmore authored Feb 27, 2023
2 parents f4d8cfe + f484195 commit 19464ac
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 30 deletions.
25 changes: 22 additions & 3 deletions packages/styles/scss/components/leadspace/_leadspace.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,13 +103,17 @@ $btn-min-width: 26;
}
}

.#{$prefix}--buttongroup,
::slotted(#{$dds-prefix}-button-group),
.#{$prefix}--buttongroup {
::slotted(#{$dds-prefix}-leadspace-block-cta) {
padding-bottom: $spacing-07;

@include carbon--breakpoint(md) {
display: flex;

display: grid;
grid-template-columns: repeat(
var(--#{$dds-prefix}--button-group--item-count),
1fr
);
@media print {
display: block;
}
Expand Down Expand Up @@ -153,6 +157,21 @@ $btn-min-width: 26;
flex-flow: column nowrap;
}

.#{$prefix}--leadspace__action {
display: inline-block;

// Button requirements dictate buttons should be full width at 320px and
// down. The carbon--breakpoint-down(sm) mixin has logic that will use
// a value of 320px - 0.02, which is not quite what we want, so instead,
// we use carbon--breakpoint-down with a number argument, using the
// defined width for the sm breakpoint.
$breakpoint: map-get($carbon--grid-breakpoints, sm);
$width: map-get($breakpoint, width);
@include carbon--breakpoint-down($width) {
display: block;
}
}

.#{$prefix}--btn {
min-width: carbon--mini-units($btn-min-width);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/web-components/src/components/button-group/button-group.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ class DDSButtonGroup extends StableSelectorMixin(LitElement) {
}

/**
* The CSS custom property name for the live button group item cout.
* The CSS custom property name for the live button group item count.
*/
static get customPropertyItemCount() {
return `--${ddsPrefix}--button-group--item-count`;
Expand Down
6 changes: 4 additions & 2 deletions packages/web-components/src/components/leadspace/leadspace.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* @license
*
* Copyright IBM Corp. 2020, 2022
* Copyright IBM Corp. 2020, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
Expand Down Expand Up @@ -202,7 +202,9 @@ class DDSLeadSpace extends StableSelectorMixin(LitElement) {
? html`
<div class="${prefix}--leadspace__content">
${this._renderCopy()}
<slot name="action"></slot>
<div class="${prefix}--leadspace__action">
<slot name="action"></slot>
</div>
</div>
`
: ``}
Expand Down
72 changes: 48 additions & 24 deletions packages/web-components/tests/snapshots/dds-leadspace.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,10 @@
</slot>
</p>
</div>
<slot name="action">
</slot>
<div class="bx--leadspace__action">
<slot name="action">
</slot>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -66,8 +68,10 @@
</slot>
</p>
</div>
<slot name="action">
</slot>
<div class="bx--leadspace__action">
<slot name="action">
</slot>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -106,8 +110,10 @@
</slot>
</p>
</div>
<slot name="action">
</slot>
<div class="bx--leadspace__action">
<slot name="action">
</slot>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -144,8 +150,10 @@
</slot>
</p>
</div>
<slot name="action">
</slot>
<div class="bx--leadspace__action">
<slot name="action">
</slot>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -184,8 +192,10 @@
</slot>
</p>
</div>
<slot name="action">
</slot>
<div class="bx--leadspace__action">
<slot name="action">
</slot>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -222,8 +232,10 @@
</slot>
</p>
</div>
<slot name="action">
</slot>
<div class="bx--leadspace__action">
<slot name="action">
</slot>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -262,8 +274,10 @@
</slot>
</p>
</div>
<slot name="action">
</slot>
<div class="bx--leadspace__action">
<slot name="action">
</slot>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -300,8 +314,10 @@
</slot>
</p>
</div>
<slot name="action">
</slot>
<div class="bx--leadspace__action">
<slot name="action">
</slot>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -340,8 +356,10 @@
</slot>
</p>
</div>
<slot name="action">
</slot>
<div class="bx--leadspace__action">
<slot name="action">
</slot>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -378,8 +396,10 @@
</slot>
</p>
</div>
<slot name="action">
</slot>
<div class="bx--leadspace__action">
<slot name="action">
</slot>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -418,8 +438,10 @@
</slot>
</p>
</div>
<slot name="action">
</slot>
<div class="bx--leadspace__action">
<slot name="action">
</slot>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -456,8 +478,10 @@
</slot>
</p>
</div>
<slot name="action">
</slot>
<div class="bx--leadspace__action">
<slot name="action">
</slot>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 19464ac

Please sign in to comment.