fix: use carbon prefix directly from @carbon/styles package config #8904

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

makafsal wants to merge 70 commits into carbon-design-system:main from makafsal:cherry-pick-pr-7640

e2e/components/PageHeader/PageHeader-test.avt.e2e.js

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -45,17 +45,19 @@ test.describe('PageHeader @avt', () => {
  
        // The header collapses when the page is scrolled down.

        await page.locator(`.page-header-stories__dummy-content`).first().hover();

        await page.mouse.wheel(0, 600);

        await page.waitForTimeout(200);

        await expect(pageTitle).not.toBeInViewport();

        // The header remains collapsed even if scrolled slightly back up.

        await page.locator(`.page-header-stories__dummy-content`).first().hover();

        await page.mouse.wheel(0, -170);

        await page.waitForTimeout(100);

        await expect(pageTitle).not.toBeInViewport();

        // The header expands again when scrolled back to the top.

        await page.locator(`.page-header-stories__dummy-content`).first().hover();

        await page.mouse.wheel(0, -700);

        await page.waitForTimeout(100);

        await page.waitForTimeout(200);

        await expect(pageTitle).toBeInViewport();

      });

    @@ -78,6 +80,7 @@ test.describe('PageHeader @avt', () => {
  
        // The header expands when the page is scrolled to the top.

        await page.locator(`.page-header-stories__dummy-content`).first().hover();

        await page.mouse.wheel(0, -600);

        await page.waitForTimeout(200);

        await expect(pageTitle).toBeInViewport();

      });

    @@ -101,16 +104,14 @@ test.describe('PageHeader @avt', () => {
  
        const collapseButton = page.locator(

          `.${pkg.prefix}--page-header__collapse-expand-toggle .${carbon.prefix}--btn--icon-only`

        );

        await collapseButton.focus();

        await page.keyboard.press('Enter');

        await collapseButton.click();

        await page.waitForTimeout(300);

        await page.waitForTimeout(400);

        await expect(pageTitle).not.toBeInViewport();

        // The header expands when the cheveron button is toggled open.

        await expect(page.getByLabel('Expand the page header')).toBeFocused();

        await page.keyboard.press('Enter');

        await page.waitForTimeout(300);

        await page.getByLabel('Expand the page header').click();

        await page.waitForTimeout(400);

        await expect(pageTitle).toBeInViewport();

      });

packages/ibm-products-styles/src/components/APIKeyModal/_api-key-modal.scss

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,5 +1,5 @@
  
    //

    // Copyright IBM Corp. 2021, 2022

    // Copyright IBM Corp. 2021, 2025

    //

    // This source code is licensed under the Apache-2.0 license found in the

    // LICENSE file in the root directory of this source tree.

    @@ -10,19 +10,21 @@
  
    @use '@carbon/styles/scss/components/button/tokens' as *;

    @use '@carbon/styles/scss/spacing' as *;

    @use '@carbon/styles/scss/type';

    @use '@carbon/styles/scss/config' as carbon-config;

    @use '../../global/styles/project-settings' as c4p-settings;

    $block-class: #{c4p-settings.$pkg-prefix}--apikey-modal;

    .#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-close {

    .#{$block-class} .#{carbon-config.$prefix}--modal-close {

      display: none;

    }

    .#{$block-class} .#{c4p-settings.$carbon-prefix}--inline-loading {

    .#{$block-class} .#{carbon-config.$prefix}--inline-loading {

      min-block-size: 3rem; // increasing the height from 2 to 3 resolves an issue where the scroll bar bounces

    }

    .#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-content {

    .#{$block-class} .#{carbon-config.$prefix}--modal-content {

      padding-inline-end: $spacing-05;

    }

packages/ibm-products-styles/src/components/AboutModal/_about-modal.scss

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,5 +1,5 @@
  
    //

    // Copyright IBM Corp. 2020, 2022

    // Copyright IBM Corp. 2020, 2025

    //

    // This source code is licensed under the Apache-2.0 license found in the

    // LICENSE file in the root directory of this source tree.

    @@ -9,14 +9,15 @@
  
    @use '@carbon/styles/scss/spacing' as *;

    @use '@carbon/styles/scss/type';

    @use '@carbon/type/scss/font-family' as *;

    @use '@carbon/styles/scss/config' as carbon-config;

    // Standard imports.

    @use '../../global/styles/project-settings' as c4p-settings;

    // The block part of our conventional BEM class names (blockClass__E--M).

    $block-class: #{c4p-settings.$pkg-prefix}--about-modal;

    .#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-container {

    .#{$block-class} .#{carbon-config.$prefix}--modal-container {

      grid-template-rows: auto auto 1fr auto;

    }

    @@ -47,14 +48,13 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
  
      padding-block-start: 0;

      padding-inline: $spacing-05 20%;

      &:not(.#{c4p-settings.$carbon-prefix}--modal-scroll-content) {

      &:not(.#{carbon-config.$prefix}--modal-scroll-content) {

        margin-block-end: $spacing-06;

        padding-block-end: 0;

      }

    }

    .#{$block-class}

      .#{c4p-settings.$carbon-prefix}--modal-content--overflow-indicator {

    .#{$block-class} .#{carbon-config.$prefix}--modal-content--overflow-indicator {

      background-image: linear-gradient(to bottom, #00000000, $layer-01);

      inset-block-end: #{$spacing-06};

    }

packages/ibm-products-styles/src/components/ActionSet/_action-set.scss

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,5 +1,5 @@
  
    //

    // Copyright IBM Corp. 2021, 2023

    // Copyright IBM Corp. 2021, 2025

    //

    // This source code is licensed under the Apache-2.0 license found in the

    // LICENSE file in the root directory of this source tree.

    @@ -10,6 +10,7 @@
  
    @use '@carbon/styles/scss/theme' as *;

    @use '@carbon/styles/scss/type';

    @use '@carbon/styles/scss/spacing' as *;

    @use '@carbon/styles/scss/config' as carbon-config;

    @use '../../global/styles/project-settings' as c4p-settings;

    @@ -34,10 +35,10 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
  
      }

    }

    .#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set

      .#{$action-set-block-class}__action-button.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--expressive,

    .#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set

      .#{$action-set-block-class}__action-button.#{c4p-settings.$carbon-prefix}--btn {

    .#{$action-set-block-class}.#{carbon-config.$prefix}--btn-set

      .#{$action-set-block-class}__action-button.#{carbon-config.$prefix}--btn.#{carbon-config.$prefix}--btn--expressive,

    .#{$action-set-block-class}.#{carbon-config.$prefix}--btn-set

      .#{$action-set-block-class}__action-button.#{carbon-config.$prefix}--btn {

      max-inline-size: none;

    }

    @@ -90,19 +91,19 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
  
    // or any non-ghosts in extra large or 2xl,

    // or row-quadruple (non-ghost),

    // buttons are 25% width with a 2xl of 232px

    .#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--row-triple.#{$action-set-block-class}--lg

    .#{$action-set-block-class}.#{carbon-config.$prefix}--btn-set.#{$action-set-block-class}--row-triple.#{$action-set-block-class}--lg

      .#{$action-set-block-class}__action-button:not(

        .#{$action-set-block-class}__action-button--ghost

      ),

    .#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--xl

    .#{$action-set-block-class}.#{carbon-config.$prefix}--btn-set.#{$action-set-block-class}--xl

      .#{$action-set-block-class}__action-button:not(

        .#{$action-set-block-class}__action-button--ghost

      ),

    .#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--2xl

    .#{$action-set-block-class}.#{carbon-config.$prefix}--btn-set.#{$action-set-block-class}--2xl

      .#{$action-set-block-class}__action-button:not(

        .#{$action-set-block-class}__action-button--ghost

      ),

    .#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--row-quadruple

    .#{$action-set-block-class}.#{carbon-config.$prefix}--btn-set.#{$action-set-block-class}--row-quadruple

      .#{$action-set-block-class}__action-button:not(

        .#{$action-set-block-class}__action-button--ghost

      ) {

    @@ -111,14 +112,14 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
  
      max-inline-size: to-rem(232px);

    }

    .#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--row-quadruple

    .#{$action-set-block-class}.#{carbon-config.$prefix}--btn-set.#{$action-set-block-class}--row-quadruple

      .#{$action-set-block-class}__action-button--ghost {

      flex: 1 1 25%;

    }

    .#{$action-set-block-class}

      .#{$action-set-block-class}__action-button

      .#{c4p-settings.$carbon-prefix}--inline-loading {

      .#{carbon-config.$prefix}--inline-loading {

      position: absolute;

      inline-size: $spacing-07;

      inset-block-start: 0;

packages/ibm-products-styles/src/components/AddSelect/_add-select.scss

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,5 +1,5 @@
  
    //

    // Copyright IBM Corp. 2022, 2022

    // Copyright IBM Corp. 2022, 2025

    //

    // This source code is licensed under the Apache-2.0 license found in the

    // LICENSE file in the root directory of this source tree.

    @@ -10,6 +10,7 @@
  
    @use '@carbon/styles/scss/spacing' as *;

    @use '@carbon/styles/scss/type';

    @use '@carbon/type/scss/font-family' as *;

    @use '@carbon/styles/scss/config' as carbon-config;

    // Standard imports.

    @use '../../global/styles/project-settings' as *;

    @@ -60,7 +61,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
  
        justify-content: center;

      }

      &-dropdown .cds--dropdown {

      &-dropdown .#{carbon-config.$prefix}--dropdown {

        background: transparent;

      }

    @@ -120,8 +121,8 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
  
        color: $interactive;

      }

      button.#{$block-class}__selections-view-children.#{$carbon-prefix}--btn--ghost.#{$carbon-prefix}--btn--icon-only

        .#{$carbon-prefix}--btn__icon

      button.#{$block-class}__selections-view-children.#{carbon-config.$prefix}--btn--ghost.#{carbon-config.$prefix}--btn--icon-only

        .#{carbon-config.$prefix}--btn__icon

        path {

        fill: currentColor;

      }

    @@ -199,6 +200,11 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
  
      display: flex;

      flex-direction: row;

      flex-grow: 1;

      overflow-x: auto;

      @supports (overflow-inline: auto) {

        overflow-inline: auto;

      }

      .#{$block-class}__selections-form-control-label-wrapper {

        margin-inline-start: $spacing-03;

    @@ -237,6 +243,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
  
    }

    .#{$block-class}__column {

      overflow: auto;

      flex: 0 0 20rem;

      padding: $spacing-05;

      border-block-start: 1px solid $border-subtle-01;

    @@ -245,26 +252,16 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
  
      &-search-bar {

        display: flex;

        .#{$carbon-prefix}--btn {

          border-block-end: 1px solid $border-strong-01;

        label {

          display: none;

        }

      }

      .#{$carbon-prefix}--popover--tab-tip.#{$carbon-prefix}--popover--open

        .#{$carbon-prefix}--btn {

        background: $layer;

      }

      &-filter-popover.#{$carbon-prefix}--popover-content {

        padding: $spacing-05;

        min-inline-size: $spacing-13;

      }

      &-sort-filter {

        display: flex;

      }

      .#{$carbon-prefix}--overflow-menu {

      .#{carbon-config.$prefix}--overflow-menu {

        border-block-end: 1px solid $border-strong-01;

      }

    }

    @@ -363,11 +360,11 @@ button.#{$block-class}__global-filter-toggle {
  
    // overrides

    .#{$block-class}__selections .#{$carbon-prefix}--list-box__menu {

    .#{$block-class}__selections .#{carbon-config.$prefix}--list-box__menu {

      inset-inline-start: auto;

    }

    .#{$block-class}__tags .#{$carbon-prefix}--tag {

    .#{$block-class}__tags .#{carbon-config.$prefix}--tag {

      margin: 0;

    }

    @@ -379,7 +376,7 @@ button.#{$block-class}__global-filter-toggle {
  
    .#{$block-class}.#{$tearsheet-class}.#{$tearsheet-class}--wide

      .#{$tearsheet-class}__content

      .cds--dropdown {

      .#{carbon-config.$prefix}--dropdown {

      background-color: transparent;

    }

    @@ -393,7 +390,7 @@ button.#{$block-class}__global-filter-toggle {
  
    }

    .#{$block-class}.#{$block-class}__multi

      .#{$pkg-prefix}--action-set.#{$carbon-prefix}--btn-set.#{$pkg-prefix}--action-set--max

      .#{$pkg-prefix}--action-set.#{carbon-config.$prefix}--btn-set.#{$pkg-prefix}--action-set--max

      .#{$pkg-prefix}--action-set__action-button {

      max-inline-size: 11.25rem;

    }

    @@ -403,27 +400,29 @@ button.#{$block-class}__global-filter-toggle {
  
    }

    .#{$block-class}

      .#{$carbon-prefix}--modal-container--sm

      .#{$carbon-prefix}--modal-content

      .#{carbon-config.$prefix}--modal-container--sm

      .#{carbon-config.$prefix}--modal-content

      p {

      padding-inline-end: 0;

    }

    .#{$block-class} .#{$carbon-prefix}--radio-button__appearance {

    .#{$block-class} .#{carbon-config.$prefix}--radio-button__appearance {

      margin: 0 $spacing-05 0 0;

    }

    .#{$block-class}

      .#{$carbon-prefix}--radio-button-wrapper

      .#{$carbon-prefix}--radio-button__label {

      .#{carbon-config.$prefix}--radio-button-wrapper

      .#{carbon-config.$prefix}--radio-button__label {

      justify-content: left;

    }

    .#{$block-class} .#{$carbon-prefix}--breadcrumb .#{$carbon-prefix}--link {

    .#{$block-class}

      .#{carbon-config.$prefix}--breadcrumb

      .#{carbon-config.$prefix}--link {

      cursor: pointer;

    }

    .#{$block-class} .#{$carbon-prefix}--accordion__item {

    .#{$block-class} .#{carbon-config.$prefix}--accordion__item {

      &:hover .#{$block-class}__sidebar-accordion-title button {

        opacity: 1;

      }

    @@ -438,31 +437,36 @@ button.#{$block-class}__global-filter-toggle {
  
      max-inline-size: 16rem;

    }

    .#{$block-class} .#{$carbon-prefix}--accordion__arrow {

    .#{$block-class} .#{carbon-config.$prefix}--accordion__arrow {

      transform: rotate(0deg);

    }

    .#{$block-class}

      .#{$carbon-prefix}--accordion__item--active

      .#{$carbon-prefix}--accordion__arrow {

      .#{carbon-config.$prefix}--accordion__item--active

      .#{carbon-config.$prefix}--accordion__arrow {

      transform: rotate(90deg);

    }

    .#{$block-class}

      .#{$carbon-prefix}--accordion--start

      .#{$carbon-prefix}--accordion__arrow {

      .#{carbon-config.$prefix}--accordion--start

      .#{carbon-config.$prefix}--accordion__arrow {

      margin: 0 0 0 $spacing-05;

    }

    .#{$block-class}

      .#{$carbon-prefix}--accordion--start

      .#{$carbon-prefix}--accordion__title {

      .#{carbon-config.$prefix}--accordion--start

      .#{carbon-config.$prefix}--accordion__title {

      margin: 0 $spacing-05 0 $spacing-03;

    }

    .#{$block-class}

      .#{$carbon-prefix}--accordion__item--active

      .#{$carbon-prefix}--accordion__content {

      .#{carbon-config.$prefix}--accordion__item--active

      .#{carbon-config.$prefix}--accordion__content {

      margin-block-start: $spacing-03;

      padding-block: 0;

    }

    .#{$block-class} + div .#{carbon-config.$prefix}--tooltip,

    .#{$block-class} + div .#{carbon-config.$prefix}--overflow-menu-options {

      z-index: 9000;

    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: use carbon prefix directly from @carbon/styles package config #8904

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

fix: use carbon prefix directly from @carbon/styles package config #8904

Are you sure you want to change the base?

Uh oh!

fix: use carbon prefix directly from @carbon/styles package config #8904

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!