build(angular): update build process for angular 13 #1304

theiliad · 2022-02-06T02:01:49Z

No description provided.

nstuyvesant · 2022-05-18T17:06:53Z

@theiliad - any update on official Angular 13 support? Are the blockers mainly the Storyboard?

theiliad · 2022-05-18T18:33:05Z

@theiliad - any update on official Angular 13 support? Are the blockers mainly the Storyboard?

Hi, I think for the most part yes. Lerna, storybook & angular 13 aren't playing together 😞

nstuyvesant · 2022-05-19T12:45:07Z

@theiliad - any update on official Angular 13 support? Are the blockers mainly the Storyboard?

Hi, I think for the most part yes. Lerna, storybook & angular 13 aren't playing together 😞

Does this repo help https://github.com/nstuyvesant/carbon-charts-angular-13 ?

I'm using Carbon Charts across several Angular 13 projects and it's working well aside from having to do an npm install --force because of the Carbon Charts Angular version limits.

nstuyvesant · 2022-05-27T12:40:34Z

@theiliad - are the Storybook issues for Angular 13 related to SCSS by chance? I kept getting errors trying out multiple combinations of loading the theme then styles.

I ended up bypassing SCSS altogether and imported the styles-g90.css directly...

@import '@carbon/charts/styles-g90.css';

The errors when using SCSS looked like this...

SassError: This module and the new module both define a variable named "$white".
  ╷
4 │ @use "@carbon/colors" as *;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/@carbon/charts/styles/tokens.scss 4:1   @import
  node_modules/@carbon/charts/styles/styles.scss 13:9  @import
  src/assets/scss/vendor/_carbon-charts.scss 6:10      @import
  src/assets/scss/app.scss 75:9                        root stylesheet

Interestingly, the Carbon Charts Svelte package does everything I need SCSS-wise without me having to do anything manual like I do with Angular and Carbon Charts.

There seem to be a lot of different sources on what to do to setup themes with Carbon Charts but they are each different and all except one don't seem to work with Angular 13.

theiliad · 2022-05-27T12:53:55Z

@theiliad - are the Storybook issues for Angular 13 related to SCSS by chance? I kept getting errors trying out multiple combinations of loading the theme then styles.

I ended up bypassing SCSS altogether and imported the styles-g90.css directly...
@import '@carbon/charts/styles-g90.css';
The errors when using SCSS looked like this...
SassError: This module and the new module both define a variable named "$white".

  ╷

4 │ @use "@carbon/colors" as *;

  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^

  ╵

  node_modules/@carbon/charts/styles/tokens.scss 4:1   @import

  node_modules/@carbon/charts/styles/styles.scss 13:9  @import

  src/assets/scss/vendor/_carbon-charts.scss 6:10      @import

  src/assets/scss/app.scss 75:9                        root stylesheet
Interestingly, the Carbon Charts Svelte package does everything I need SCSS-wise without me having to do anything manual like I do with Angular and Carbon Charts.

There seem to be a lot of different sources on what to do to setup themes with Carbon Charts but they are each different and all except one don't seem to work with Angular 13.

Yes there are lots of issues that we're having with angular.

Some are related to it playing nice in a monorepo, some to storybook and some to sass.

I've spent probably over a week trying to get angular 13 to fit inside this monorepo but have had no luck 😞

nstuyvesant · 2022-05-27T13:02:20Z

With the latest version of Carbon Charts and themes, what is the recommended approach to load theme g90 and Carbon Charts styles via SCSS? Perhaps I can try debugging this a bit this weekend.

theiliad · 2022-05-27T13:16:55Z

With the latest version of Carbon Charts and themes, what is the recommended approach to load theme g90 and Carbon Charts styles via SCSS? Perhaps I can try debugging this a bit this weekend.

We're still figuring out the best path for that. Keep in mind that 1.x is currently in beta as our storybook & npm docs mention

nstuyvesant · 2022-05-27T13:36:41Z

Sure. I'd be willing to experiment if you have any recommendations.

With the latest version of Carbon Charts and themes, what is the recommended approach to load theme g90 and Carbon Charts styles via SCSS? Perhaps I can try debugging this a bit this weekend.

We're still figuring out the best path for that. Keep in mind that 1.x is currently in beta as our storybook & npm docs mention

OK - let me know if you have any recommendations re: SCSS, themes, and the latest beta and I'll experiment a bit and provide feedback.

theiliad · 2022-05-27T18:49:28Z

Sure. I'd be willing to experiment if you have any recommendations.

With the latest version of Carbon Charts and themes, what is the recommended approach to load theme g90 and Carbon Charts styles via SCSS? Perhaps I can try debugging this a bit this weekend.

We're still figuring out the best path for that. Keep in mind that 1.x is currently in beta as our storybook & npm docs mention

OK - let me know if you have any recommendations re: SCSS, themes, and the latest beta and I'll experiment a bit and provide feedback.

I'll be adding those pieces soon, also to the strybook tutorials section

nstuyvesant · 2022-06-05T19:50:54Z

Angular 14 was just released... https://blog.angular.io/angular-v14-is-now-available-391a6db736af

nstuyvesant · 2022-06-10T12:24:26Z

Was playing with Angular 14.0.1 and @carbon/charts@1.1.0. Had to do a few things to make it work...

Had to include "@carbon/import-once": "^10.7.0" in my dev dependencies.
In my project, needed to import SCSS styles for Carbon Charts with @use "@carbon/charts/styles/styles";

I also tried loading the theme first...

@use '@carbon/styles/scss/themes';
@use '@carbon/styles/scss/theme' with (
  $theme: themes.$g90,
);
@use "@carbon/charts/styles/styles";

but the G90 theme was not applied to Carbon Charts. It continued to use the default theme.

Have to load the full themes that apply to more than just Carbon Charts generates a lot of unwanted CSS increasing my bundle size. I'm going to revert @carbon/charts to 0.58.1 and grab its @carbon/charts/styles-g90.css and add that to my project after chopping it down to only classes needed by my charts.

It would be great to have an option to set some SCSS variables for fonts, colors, etc. then import a chart type-specific SCSS that uses a bunch of !default options that will honor the variables I set - the way Bootstrap works.

Carbon Charts has attractive charts and an API that's easy to work with. It's a shame it suffers from the heaviness of the styling for the Carbon Design System.

theiliad · 2022-06-10T13:21:52Z

Was playing with Angular 14.0.1 and @carbon/charts@1.1.0. Had to do a few things to make it work...

Had to include "@carbon/import-once": "^10.7.0" in my dev dependencies.

In my project, needed to import SCSS styles for Carbon Charts with @use "@carbon/charts/styles/styles";

I also tried loading the theme first...
@use '@carbon/styles/scss/themes';

@use '@carbon/styles/scss/theme' with (

  $theme: themes.$g90,

);

@use "@carbon/charts/styles/styles";
but the G90 theme was not applied to Carbon Charts. It continued to use the default theme.

Have to load the full themes that apply to more than just Carbon Charts generates a lot of unwanted CSS increasing my bundle size. I'm going to revert @carbon/charts to 0.58.1 and grab its @carbon/charts/styles-g90.css and add that to my project after chopping it down to only classes needed by my charts.

It would be great to have an option to set some SCSS variables for fonts, colors, etc. then import a chart type-specific SCSS that uses a bunch of !default options that will honor the variables I set - the way Bootstrap works.

Carbon Charts has attractive charts and an API that's easy to work with. It's a shame it suffers from the heaviness of the styling for the Carbon Design System.

Hi @nstuyvesant, for theming in 1.x pls read this https://charts.carbondesignsystem.com/?path=/story/docs-tutorials--themes

nstuyvesant · 2022-06-10T13:37:55Z

@theiliad - Thank you! The new theming approach is very straightforward. Wish I had that link a month ago!

nstuyvesant · 2022-06-10T13:51:56Z

Here's all of my style setup for my donut, gauge, and vertical bar chart...

@use "@carbon/charts/styles/styles";

// All Carbon Charts

.bx--cc--tooltip {
  border-radius: 0.25rem;
  background-color: $primary;
  font-family: var(--#{$variable-prefix}font-sans-serif);
}

// Donut alterations

.bx--cc--chart-wrapper {
  font-family: var(--#{$variable-prefix}font-sans-serif);
}

// Vertical stacked bar chart

.bx--cc--axes g.axis g.tick text, .bx--cc--axes g.axis .axis-title {
  font-family: var(--#{$variable-prefix}font-sans-serif);
}

.cds--chart-holder[data-carbon-theme=g90] {
  .chart-grid-backdrop {
    fill: none;
  }
}

My only dependencies in package.json are:

    "@carbon/charts-angular": "^1.1.0",
    "@carbon/import-once": "^10.7.0"

The latter was required to get this to work with Angular 14.0.1 (but it is working). Perhaps that can help with the Storybook issues?

nstuyvesant · 2023-05-07T16:57:50Z

@theiliad - probably close this old PR given where we are.

carbon-bot · 2023-06-03T02:42:45Z

DCO Assistant Lite bot: Thanks for your submission! We ask that you all sign our Developer Certificate of Origin before we can accept your contribution. You can sign the DCO by adding a comment below using this text:

I have read the DCO document and I hereby sign the DCO.

1 out of 2 committers have signed the DCO.
✅ @theiliad
❌ @mod
MOD seems not to be a GitHub user. You need a GitHub account to be able to sign the DCO. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You can retrigger this bot by commenting recheck in this Pull Request}

build(angular): update build process for angular 13

907b205

theiliad requested review from Akshat55 and a team as code owners February 6, 2022 02:01

theiliad requested review from zvonimirfras and Donisius and removed request for a team February 6, 2022 02:01

theiliad mentioned this pull request Feb 6, 2022

[Bug]: Sample for @carbon/charts-angular TreeMap does not work with latest Angular #1298

Closed

theiliad marked this pull request as draft February 6, 2022 02:04

theiliad and others added 6 commits February 8, 2022 16:45

update storybook to 6.x

66e7126

update yarn mirror & lock

03c1fe0

update configs

7b65424

update yarn mirro

dc2018b

package update for angular

bda314a

updates

93d18fc

theiliad closed this Jun 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

build(angular): update build process for angular 13 #1304

build(angular): update build process for angular 13 #1304

theiliad commented Feb 6, 2022

nstuyvesant commented May 18, 2022

theiliad commented May 18, 2022

nstuyvesant commented May 19, 2022

nstuyvesant commented May 27, 2022

theiliad commented May 27, 2022

nstuyvesant commented May 27, 2022

theiliad commented May 27, 2022

nstuyvesant commented May 27, 2022

theiliad commented May 27, 2022

nstuyvesant commented Jun 5, 2022

nstuyvesant commented Jun 10, 2022

theiliad commented Jun 10, 2022

nstuyvesant commented Jun 10, 2022

nstuyvesant commented Jun 10, 2022

nstuyvesant commented May 7, 2023

carbon-bot commented Jun 3, 2023

build(angular): update build process for angular 13 #1304

build(angular): update build process for angular 13 #1304

Conversation

theiliad commented Feb 6, 2022

nstuyvesant commented May 18, 2022

theiliad commented May 18, 2022

nstuyvesant commented May 19, 2022

nstuyvesant commented May 27, 2022

theiliad commented May 27, 2022

nstuyvesant commented May 27, 2022

theiliad commented May 27, 2022

nstuyvesant commented May 27, 2022

theiliad commented May 27, 2022

nstuyvesant commented Jun 5, 2022

nstuyvesant commented Jun 10, 2022

theiliad commented Jun 10, 2022

nstuyvesant commented Jun 10, 2022

nstuyvesant commented Jun 10, 2022

nstuyvesant commented May 7, 2023

carbon-bot commented Jun 3, 2023