Unstable_Treeview SASS Refactor

[andreancardona]

This issue is for updating the Notification to Sass Modules in the @carbon/styles package. In this refactor, we will:

• Copy over styles for for the component to packages/styles/scss/components/floating-menu/_pagination-nav/scss
  • Any additional files will live in the folder packages/styles/scss/components/pagination-nav/
• Create an _index.scss at packages/styles/scss/components/pagination-nav/_index.scss
• Create a test file at packages/styles/scss/components/__tests__/pagination-nav/-test.js

The _index.scss should:

• @forward the mixin and any variables from _pagination-nav/.scss
• Include the styles from _pagination-nav/.scss by calling the mixin

The pagination-nav/-test.js file should test the following:

• The Public API of the pagination-nav/_index.scss file
• Any configuration options that are present for the file

The _pagination-nav/.scss will then need to be refactored to use the new import paths and conventions. You can find common recipes here: #8899 (comment)

If your component includes component tokens, follow the instructions below 👇

Component tokens

• Copy over the _tokens.scss file for the component to scss/components/<component>/_tokens.scss
• Change any tokens to their new paths, common changes that need to happen will be if the token map uses IDL colors or token colors. These now come from scss/_colors.scss and scss/_theme.scss specifically.
• Bring in scss/utilities/_component-tokens.scss file
• Use this utility to generate four exports in _tokens.scss: $white, $g10, $g90, and $g100
• Each export should look like the following: $white: component-tokens.get-tokens($-tokens, themes.$white);
• Add the tokens to the component exports in scss/components/<component>/_index.scss by using @forward 'tokens'
• If using storybook, update packages/carbon-react/.storybook/styles.scss to include the new component tokens for each theme. This will look like:

@use '../scss/components/notification';

:root {
  @include styles.theme(themes.$white, notification.$white);
}

.g10 {
  // ...
}

You may also need to add the entrypoint in the @carbon/react package itself at packages/carbon-react/scss/components/<component>/_index.scss