Skip to content
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.

Sign up for GitHub

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

Jump to bottom

chore(themed): add token CSS variable test helper #9860

Merged
merged 6 commits into from
Jul 29, 2024
Merged

chore(themed): add token CSS variable test helper #9860

merged 6 commits into from
Jul 29, 2024

Conversation

alisonailea
Copy link
Contributor

Related Issue: #7180

Summary

Includes helpers which assist developers in testing and theming component tokens as CSS variables.

EXAMPLE USAGE:

Demo page

<demo-theme tokens="--calcite-button-background-color, --calcite-button-border-color, --calcite-button-text-color"
    ><calcite-button kind="inverse" scale="l"> Button </calcite-button
></demo-theme>

Storybook / Chromatic

export const theming_TestOnly = (): string =>
  html` <style>
      .container {
        ${setCSSVariables([
        "--calcite-button-background-color",
        "--calcite-button-border-color",
        "--calcite-button-text-color",
      ])}
      }
    </style>
    <div class="container">
        <calcite-button kind="inverse" scale="l"> Button </calcite-button>
   </div>
`;

E2E

describe("theme", () => {
  themed(`<calcite-button kind="inverse" scale="l"> Button </calcite-button>`,  {
    "--calcite-button-background-color": {
      shadowSelector: ".button",
      targetProp: "backgroundColor",
    },
    "--calcite-button-text-color": {
      shadowSelector: ".button",
      targetProp: "color",
    }
    "--calcite-accordion-border-color": {
      shadowSelector: ".button",
      targetProp: "borderColor",
    },
  });
});

@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Jul 26, 2024
@alisonailea alisonailea mentioned this pull request Jul 26, 2024
Merged
@alisonailea alisonailea changed the title fix(themed): token CSS variable test helper chore(themed): token CSS variable test helper Jul 26, 2024
@alisonailea alisonailea added testing Issues related to automated or manual testing. p2 - want for current milestone User set priority status of p2 - want for current milestone skip visual snapshots Pull requests that do not need visual regression testing. p - high Issue should be addressed in the current milestone, impacts component or core functionality and removed bug Bug reports for broken functionality. Issues should include a reproduction of the bug. labels Jul 26, 2024
@alisonailea alisonailea added this to the 2024-07-30 - Jul Release milestone Jul 26, 2024
jcfranco
jcfranco approved these changes Jul 26, 2024
View reviewed changes
Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾
👾🪙🪙🪙🪙👾🪙👾👾👾👾👾🪙👾🪙🪙🪙🪙👾👾🪙🪙🪙👾👾🪙🪙👾👾🪙👾👾👾🪙👾🪙🪙🪙🪙👾🪙👾
👾🪙👾👾🪙👾🪙👾👾👾👾👾🪙👾🪙👾👾👾👾🪙👾👾👾👾🪙👾👾🪙👾🪙🪙👾🪙🪙👾🪙👾👾👾👾🪙👾
👾🪙🪙🪙🪙👾🪙👾👾🪙👾👾🪙👾🪙🪙🪙👾👾👾🪙🪙👾👾🪙👾👾🪙👾🪙👾🪙👾🪙👾🪙🪙🪙👾👾🪙👾
👾🪙👾👾🪙👾🪙👾🪙👾🪙👾🪙👾🪙👾👾👾👾👾👾👾🪙👾🪙👾👾🪙👾🪙👾👾👾🪙👾🪙👾👾👾👾👾👾
👾🪙👾👾🪙👾👾🪙👾👾👾🪙👾👾🪙🪙🪙🪙👾🪙🪙🪙👾👾👾🪙🪙👾👾🪙👾👾👾🪙👾🪙🪙🪙🪙👾🪙👾
👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾

This should be good to merge once comments are addressed.

packages/calcite-components/src/utils/variableValue.ts Outdated Show resolved Hide resolved
packages/calcite-components/src/utils/variableValue.ts Outdated Show resolved Hide resolved
packages/calcite-components/src/utils/variableValue.ts Outdated Show resolved Hide resolved
packages/calcite-components/src/demos/_assets/demo-theme.ts Outdated Show resolved Hide resolved
packages/calcite-components/src/utils/variableValue.ts Outdated Show resolved Hide resolved
packages/calcite-components/src/utils/variableValue.ts Outdated Show resolved Hide resolved
@jcfranco
Copy link
Member

Before merging, can you update the PR title to "...: add token CSS ...", so it follows conventions?

@github-actions github-actions bot added the chore Issues with changes that don't modify src or test files. label Jul 26, 2024
@alisonailea alisonailea changed the title chore(themed): token CSS variable test helper chore(themed): add token CSS variable test helper Jul 27, 2024
@alisonailea
Copy link
Contributor Author

I've had to duplicate the theme code because I can't find a folder that the demos and storybook servers share.

@alisonailea alisonailea merged commit feab834 into dev Jul 29, 2024
9 checks passed
@alisonailea alisonailea deleted the astump/themed-helpers branch July 29, 2024 17:35
benelan added a commit that referenced this pull request Jul 29, 2024
@benelan
Merge remote-tracking branch 'origin/dev' into benelan/9255-add-icons…
a058fcd 
…-to-monorepo

* origin/dev:
  ci: fix env var case in workflows (#9877)
  docs(action): deprecates the compact property (#9847)
  fix(tab-title): Adjust hover styling for `bordered` Tab Title (#9867)
  chore(themed): add token CSS variable test helper (#9860)
  chore: avoid deleting untracked, non-generated files on npm run clean (#9866)
  chore(pick-list, pick-list-item, value-list-item): fix runtime deprecation messages (#9870)
  refactor: create a common resource to store debounce consts (#9829)
  test(tree): stabilize tests (#9853)
  chore(value-list-item): add runtime deprecation warning (#9863)
  chore: release next
  build(deps): update dependency composed-offset-position to v0.0.6 (#9834)
  feat(dialog): adds new dialog component and deprecates the modal component (#9751)
  chore: release next
  fix(panel, flow-item): prevent footer slots from conflicting with each other (#9856)
calcite-admin pushed a commit that referenced this pull request Jul 30, 2024
@alisonailea @github-actions
chore(themed): add token CSS variable test helper (#9860)
bcedcf7 
**Related Issue:** #7180 

## Summary

Includes helpers which assist developers in testing and theming
component tokens as CSS variables.

### EXAMPLE USAGE:
 
#### Demo page

```html
<demo-theme tokens="--calcite-button-background-color, --calcite-button-border-color, --calcite-button-text-color"
    ><calcite-button kind="inverse" scale="l"> Button </calcite-button
></demo-theme>
```

#### Storybook / Chromatic

```ts
export const theming_TestOnly = (): string =>
  html` <style>
      .container {
        ${setCSSVariables([
        "--calcite-button-background-color",
        "--calcite-button-border-color",
        "--calcite-button-text-color",
      ])}
      }
    </style>
    <div class="container">
        <calcite-button kind="inverse" scale="l"> Button </calcite-button>
   </div>
`;
```

#### E2E

```ts
describe("theme", () => {
  themed(`<calcite-button kind="inverse" scale="l"> Button </calcite-button>`,  {
    "--calcite-button-background-color": {
      shadowSelector: ".button",
      targetProp: "backgroundColor",
    },
    "--calcite-button-text-color": {
      shadowSelector: ".button",
      targetProp: "color",
    }
    "--calcite-accordion-border-color": {
      shadowSelector: ".button",
      targetProp: "borderColor",
    },
  });
});
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jcfranco jcfranco jcfranco approved these changes

@driskull driskull Awaiting requested review from driskull

@benelan benelan Awaiting requested review from benelan

Assignees

@alisonailea alisonailea

Labels
chore Issues with changes that don't modify src or test files. p - high Issue should be addressed in the current milestone, impacts component or core functionality p2 - want for current milestone User set priority status of p2 - want for current milestone skip visual snapshots Pull requests that do not need visual regression testing. testing Issues related to automated or manual testing.
Projects
None yet
Milestone
2024-07-31 - Jul Release
Development

Successfully merging this pull request may close these issues.
2 participants
@alisonailea @jcfranco