Skip to content

Commit

Permalink
Merge branch 'feat/carbon-for-ibm-dotcom-v2' into feat/tag-link-group
Browse files Browse the repository at this point in the history
  • Loading branch information
@kennylam
kennylam authored Oct 17, 2023
2 parents 08d7434 + 098c67c commit 32d26d0
Show file tree
Hide file tree
Showing 30 changed files with 424 additions and 662 deletions.
13 changes: 12 additions & 1 deletion docs/dotcom-v2-migration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ For Carbon v11 migration guidance, see their
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| back-to-top | No API changes. |
| background-media | No API changes. |
| button | This component is deprecated in v2 in favor for Carbon's core Button |
| button | This component is deprecated in v2 in favor for `button-expressive` |
| button-group | No API changes. |
| callout-with-media | View changes [here](#callout-with-media) |
| callout-quote | View changes [here](#callout-quote) |
Expand Down Expand Up @@ -46,11 +46,13 @@ For Carbon v11 migration guidance, see their
| feature-card-block-large | This component is deprecated in v1 and has been removed in v2 in favor of the feature-card component. |
| feature-card-block-medium | This component is deprecated in v1 and has been removed in v2 in favor of the feature-card component. |
| feature-section | View changes [here](#feature-section) |
| filter-panel | View changes [here](#filter-panel) |
| footer | No API changes. |
| hr | View changes [here](#horizontal-rule) |
| image | View changes [here](#image) |
| image-with-caption | This component is deprecated in v1 and has been removed in v2 in favor of the image component |
| leadspace | View changes [here](#leadspace) |
| leadspace-block | View changes [here](#leadspace-block) |
| leadspace-with-search | View changes [here](#leadspace-with-search) |
| link-list-section | This component is deprecated in v2 in favor for content-section/block & link-list end of section variant components |
| link-with-icon | No API changes. |
Expand Down Expand Up @@ -109,6 +111,10 @@ information.
- `media-alignment` property has been removed
- `color-scheme` property now accepts `regular` (default), `inverse`, `cyan`, `purple`

### Filter panel

- `filter-group-item` property `title-text` has been updated to `title`

### Horizontal rule

- New options for `contrast` property: `SUBTLE = 'subtle' (default)`,
Expand All @@ -123,6 +129,11 @@ information.

- New `highlight` and `type-style` attributes for `leadspace-heading`

### Leadspace

- Deprecated `leadspace-block-heading` in favor for `leadspace-heading`
- Removed `leadspace-block-cta` in favor for `button`

### Leadspace with Search

- `<dds-leadspace-with-search-heading>` has been replaced with `<dds-leadspace-heading>`
Expand Down
110 changes: 81 additions & 29 deletions packages/styles/scss/components/filter-panel/_filter-panel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,14 @@
@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/utilities' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/components/accordion';
@use '@carbon/styles/scss/components/button/tokens' as *;
@use '@carbon/styles/scss/layout' as *;
@use '@carbon/styles/scss/components/button' as *;
@use '@carbon/styles/scss/components/checkbox';
@use '../../../../carbon-web-components/src/components/modal/modal';
@use '../../../../carbon-web-components/scss/components/accordion/accordion';
@use '../../globals/vars' as *;

@mixin filter-panel {
Expand All @@ -23,6 +26,7 @@
}

.#{$prefix}--filter-panel__section {
box-sizing: border-box;
background-color: $layer-01;
padding-bottom: rem(112px);
margin-top: $spacing-05;
Expand Down Expand Up @@ -76,6 +80,9 @@

.#{$prefix}--selected-option-dropdown {
display: grid;
padding: 0;
margin: 0;

&.#{$prefix}--selected-option-dropdown__hidden {
display: none;
}
Expand Down Expand Up @@ -113,11 +120,7 @@

.#{$prefix}--clear__container {
display: flex;
}

.#{$prefix}--filter__modal__button {
display: flex;
justify-content: space-between;
align-items: center;
}

:host(#{$c4d-prefix}-filter-panel) {
Expand Down Expand Up @@ -148,32 +151,19 @@
}

:host(#{$c4d-prefix}-filter-panel-composite) {
.#{$prefix}--filter-button {
@include type-style('body-compact-01');
@include emit-layout-tokens();

cursor: pointer;
border: 1px solid $button-tertiary;
color: $button-tertiary;
padding: $spacing-05;
margin-top: $spacing-05;
margin-left: $spacing-05;
background-color: transparent;
width: rem(128px);
#{$prefix}-button {
@include breakpoint(lg) {
display: none;
}

&:hover {
background-color: $button-tertiary-hover;
color: $icon-inverse;
}
}
}

:host(#{$c4d-prefix}-filter-panel-checkbox) {
padding-left: rem(14px);
padding-bottom: rem(6px);
@extend .#{$prefix}--checkbox;
@extend .#{$prefix}--checkbox-label;
@include type-style('body-compact-01');

color: $text-secondary;
Expand Down Expand Up @@ -213,7 +203,6 @@
@include type-style('body-compact-01');

background-color: $layer-01;
width: 100%;
cursor: pointer;
position: relative;
color: $text-secondary;
Expand Down Expand Up @@ -255,6 +244,10 @@
}
}

:host(#{$c4d-prefix}-filter-group) {
@extend :host(#{$prefix}-accordion);
}

:host(#{$c4d-prefix}-filter-group:first-of-type) {
::slotted(#{$prefix}-filter-group-item:first-of-type) {
@include breakpoint-down(md) {
Expand All @@ -264,7 +257,7 @@
}

:host(#{$c4d-prefix}-filter-group-item) {
@extend .#{$prefix}--accordion__item;
@extend :host(#{$prefix}-accordion-item);

display: block;
outline: none;
Expand All @@ -276,14 +269,26 @@
align-items: center;
}

.#{$prefix}--accordion__arrow {
align-self: flex-start;
}

.#{$prefix}--accordion__title {
@include type-style('heading-01');
}

.#{$c4d-prefix}-filter-group-item__view-all {
@include font-family('sans');

width: 100%;
padding: $spacing-03 $spacing-05;
text-align: left;
cursor: pointer;

&:focus-visible {
outline: none;
border-color: $focus;
box-shadow: inset 0 0 0 $button-outline-width $focus,
inset 0 0 0 $button-border-width $background;
}
}

&:last-of-type {
border-bottom: 1px solid $layer-accent-01;
}
Expand All @@ -299,6 +304,7 @@
}

:host(#{$c4d-prefix}-filter-modal-footer) {
display: flex;
z-index: 999;
position: absolute;
bottom: 0;
Expand All @@ -312,4 +318,50 @@
display: block;
padding-bottom: $spacing-03;
}

:host(#{$c4d-prefix}-filter-panel-modal) {
@extend :host(#{$prefix}-modal);

left: 0;

@include breakpoint(lg) {
display: none;
}

.#{$prefix}--filter-panel__section.#{$prefix}--modal-container {
transform: translate3d(0, 0, 0);
overflow: initial;
@include breakpoint(md) {
height: 80%;
width: 60%;
}
}
}

:host(#{$c4d-prefix}-filter-panel-modal[open]) {
@extend :host(#{$prefix}-modal[open]);
@include breakpoint(lg) {
display: none;
}
}

:host(#{$c4d-prefix}-filter-panel-modal[expressive-size='full-width']) {
.#{$prefix}--modal-container {
max-height: none;

@include breakpoint(lg) {
width: calc(100% - $spacing-07);
height: calc(100% - $spacing-07);
}

.#{$prefix}--modal-content {
margin: $spacing-09 $spacing-07;
padding: 0;
}
}
}

:host(#{$c4d-prefix}-filter-modal-footer-button) {
@extend :host(#{$prefix}-modal-footer-button);
}
}
Loading

0 comments on commit 32d26d0

Please sign in to comment.