Skip to content

Move to standalone components #3155

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

Open
wants to merge 2 commits into
base: next
Choose a base branch
from
Open

Move to standalone components #3155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3106622
fix: fix template for header with template story
tom-wegener Jul 1, 2025
4d43533
feat: move all components to standalone components
tom-wegener Jul 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
12 changes: 11 additions & 1 deletion src/accordion/accordion-item.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import {
EventEmitter,
ChangeDetectionStrategy
} from "@angular/core";
import { NgTemplateOutlet, NgClass } from "@angular/common";
import { IconDirective, IconService, ICON_SERVICE_PROVIDER } from "carbon-components-angular/icon";
import ChevronDown16 from "@carbon/icons/es/chevron--down/16";

@Component({
selector: "cds-accordion-item, ibm-accordion-item",
Expand Down Expand Up @@ -48,7 +51,10 @@ import {
display: list-item;
}
`],
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
providers: [ICON_SERVICE_PROVIDER],
imports: [IconDirective, NgTemplateOutlet, NgClass]
})
export class AccordionItem {
static accordionItemCount = 0;
Expand All @@ -63,6 +69,10 @@ export class AccordionItem {
@HostBinding("class.cds--accordion__item--disabled") @Input() disabled = false;
@HostBinding("attr.role") role = "listitem";

constructor(private iconService: IconService) {
this.iconService.registerAll([ChevronDown16]);
}

public toggleExpanded() {
if (!this.skeleton) {
this.expanded = !this.expanded;
Expand Down
17 changes: 8 additions & 9 deletions src/accordion/accordion.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { TestBed } from "@angular/core/testing";
import { FormsModule } from "@angular/forms";
import { By } from "@angular/platform-browser";
import { Component } from "@angular/core";
import { IconModule } from "../icon/index";
import { IconDirective } from "../icon/index";
import { AccordionItem } from "./accordion-item.component";
import { Accordion } from "./accordion.component";

Expand All @@ -15,7 +15,12 @@ import { Accordion } from "./accordion.component";
[skeleton]="skeleton">
test-content
</cds-accordion-item>
<cds-accordion>`
<cds-accordion>`,
standalone: true,
imports: [
Accordion,
AccordionItem
]
})
class AccordionTest {
disabled = false;
Expand All @@ -28,14 +33,8 @@ describe("Accordion", () => {
let fixture, wrapper, debugElement;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
Accordion,
AccordionItem,
AccordionTest
],
imports: [
FormsModule,
IconModule
AccordionTest
]
});
});
Expand Down
7 changes: 5 additions & 2 deletions src/accordion/accordion.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@ import {
ChangeDetectionStrategy
} from "@angular/core";
import { AccordionItem } from "./accordion-item.component";
import { NgClass } from "@angular/common";

/**
* Get started with importing the module:
*
* ```typescript
* import { AccordionModule } from 'carbon-components-angular';
* import { Accordion, AccordionItem } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-accordion--basic)
Expand All @@ -35,7 +36,9 @@ import { AccordionItem } from "./accordion-item.component";
<ng-content />
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [NgClass]
})
export class Accordion implements AfterContentInit {
/**
Expand Down
8 changes: 3 additions & 5 deletions src/accordion/accordion.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,15 @@ import { AccordionItem } from "./accordion-item.component";
import { IconModule } from "carbon-components-angular/icon";

@NgModule({
declarations: [
Accordion,
AccordionItem
],
exports: [
Accordion,
AccordionItem
],
imports: [
CommonModule,
IconModule
IconModule,
Copy link
Contributor

Choose a reason for hiding this comment

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

This is amazing work, thank you for this!

Do we still need modules? I thought we wouldn't need to keep the Modules once we go standalone or is this for backwards compatibility?

Copy link
Author

Choose a reason for hiding this comment

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

Yes, I wanted to keep the modules for backwards compatibility since angular 18 still allows the functionality and I didn’t want to break my own apps by upgrading.

in the end we don’t need them anymore and I/we/soneone could look into the angular migrations to ease the transition from modules to standalone.

Accordion,
AccordionItem
]
})
export class AccordionModule { }
6 changes: 3 additions & 3 deletions src/accordion/accordion.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { moduleMetadata, Meta } from "@storybook/angular";
import { DocumentationModule } from "../documentation-component/documentation.module";
import { AccordionModule, Accordion } from "./";
import { Documentation } from "../documentation-component/documentation.component";
import { Accordion, AccordionItem } from "./";

export default {
title: "Components/Accordion",
decorators: [
moduleMetadata({
imports: [AccordionModule, DocumentationModule]
imports: [Accordion, Documentation, AccordionItem]
})
],
component: Accordion
Expand Down
9 changes: 7 additions & 2 deletions src/breadcrumb/breadcrumb-item.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,14 @@ import {
} from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { Router } from "@angular/router";
import { PlaceholderService } from "carbon-components-angular/placeholder";
import { NgTemplateOutlet } from "@angular/common";

@Component({
selector: "cds-breadcrumb-item, ibm-breadcrumb-item",
template: `
<ng-template #content>
<ng-content />
<ng-content />
</ng-template>

@if (useTemplate()) {
Expand All @@ -29,7 +31,10 @@ import { Router } from "@angular/router";
<ng-container *ngTemplateOutlet="content" />
}
`,
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [NgTemplateOutlet],
providers: [PlaceholderService]
})
export class BreadcrumbItemComponent {
@Input() set href(v: string) {
Expand Down
28 changes: 14 additions & 14 deletions src/breadcrumb/breadcrumb.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
import { Component } from "@angular/core";
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
import { FormsModule } from "@angular/forms";
import { I18nModule } from "../i18n/index";
import { By } from "@angular/platform-browser";
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing";

import { Breadcrumb } from "./breadcrumb.component";
import { BreadcrumbItemComponent } from "./breadcrumb-item.component";
import { BreadcrumbItem } from "./breadcrumb-item.interface";
import { OverflowMenu } from "carbon-components-angular/dialog";
import { OverflowMenu } from "../dialog";

@Component({
selector: "test-breadcrumb",
Expand All @@ -30,7 +27,12 @@ import { OverflowMenu } from "carbon-components-angular/dialog";
<cds-breadcrumb-item href="#">
Breadcrumb 5
</cds-breadcrumb-item>
</cds-breadcrumb>`
</cds-breadcrumb>`,
standalone: true,
imports: [
Breadcrumb,
BreadcrumbItemComponent
]
})
class TestBreadcrumb {
noTrailingSlash = true;
Expand All @@ -43,7 +45,11 @@ class TestBreadcrumb {
[noTrailingSlash]="noTrailingSlash"
[threshold]="threshold"
[items]="items">
</cds-breadcrumb>`
</cds-breadcrumb>`,
standalone: true,
imports: [
Breadcrumb
]
})
class TestBreadcrumbModel {
noTrailingSlash = true;
Expand All @@ -63,16 +69,10 @@ describe("Breadcrumb", () => {

TestBed.configureTestingModule({
imports: [
FormsModule,
I18nModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [
Breadcrumb,
BreadcrumbItemComponent,
TestBreadcrumb,
TestBreadcrumbModel
]
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}).compileComponents();
}));

Expand Down
13 changes: 10 additions & 3 deletions src/breadcrumb/breadcrumb.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,19 @@ import {
import { BreadcrumbItem } from "./breadcrumb-item.interface";
import { BreadcrumbItemComponent } from "./breadcrumb-item.component";
import { Router } from "@angular/router";
import { I18n } from "carbon-components-angular/i18n";
import { I18N_SERVICE_PROVIDER, I18n } from "carbon-components-angular/i18n";
import { NgClass, NgTemplateOutlet } from "@angular/common";
import { IconDirective } from "carbon-components-angular/icon";
import { OverflowMenu } from "carbon-components-angular/dialog";
import { DOCUMENT_SERVICE_PROVIDER, EventService } from "carbon-components-angular/utils";

const MINIMUM_OVERFLOW_THRESHOLD = 4;

/**
* Get started with importing the module:
*
* ```typescript
* import { BreadcrumbModule } from 'carbon-components-angular';
* import { Breadcrumb } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-breadcrumb--basic)
Expand Down Expand Up @@ -123,7 +127,10 @@ const MINIMUM_OVERFLOW_THRESHOLD = 4;
}
</nav>
`,
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
providers: [I18N_SERVICE_PROVIDER, EventService, DOCUMENT_SERVICE_PROVIDER],
imports: [NgClass, BreadcrumbItemComponent, NgTemplateOutlet, IconDirective, OverflowMenu]
})
export class Breadcrumb implements AfterContentInit {
@ContentChildren(BreadcrumbItemComponent) children: QueryList<BreadcrumbItemComponent>;
Expand Down
6 changes: 2 additions & 4 deletions src/breadcrumb/breadcrumb.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,13 @@ import { ButtonModule } from "carbon-components-angular/button";
import { IconModule } from "carbon-components-angular/icon";

@NgModule({
declarations: [
Breadcrumb,
BreadcrumbItemComponent
],
exports: [
Breadcrumb,
BreadcrumbItemComponent
],
imports: [
Breadcrumb,
BreadcrumbItemComponent,
CommonModule,
ButtonModule,
DialogModule,
Expand Down
12 changes: 7 additions & 5 deletions src/breadcrumb/breadcrumb.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { moduleMetadata, Meta } from "@storybook/angular";
import {
BreadcrumbModule,
Breadcrumb,
BreadcrumbItemComponent,
BreadcrumbItem
} from "./";
import { I18N_SERVICE_PROVIDER } from "../i18n";

let breadcrumbItems;

Expand All @@ -25,7 +25,11 @@ export default {
title: "Components/Breadcrumb",
decorators: [
moduleMetadata({
imports: [BreadcrumbModule]
imports: [
Breadcrumb,
BreadcrumbItemComponent
],
providers: [I18N_SERVICE_PROVIDER]
})
],
args: {
Expand All @@ -41,8 +45,7 @@ export default {
control: false
}
},
component: Breadcrumb,
subcomponents: { BreadcrumbItemComponent }
component: Breadcrumb
} as Meta;

const Template = (args) => ({
Expand Down Expand Up @@ -149,4 +152,3 @@ Skeleton.parameters = {
disable: true
}
};

3 changes: 2 additions & 1 deletion src/button/base-icon-button.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
*/
@Component({
template: "",
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true
})
export class BaseIconButton {
/**
Expand Down
5 changes: 3 additions & 2 deletions src/button/button-set.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,16 @@ import { ChangeDetectionStrategy, Component, HostBinding } from "@angular/core";
* Get started with importing the module:
*
* ```typescript
* import { ButtonModule } from 'carbon-components-angular';
* import { Button } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-button-button-set--basic)
*/
@Component({
selector: "cds-button-set, ibm-button-set",
template: "<ng-content />",
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true
})
export class ButtonSet {
@HostBinding("class.cds--btn-set") buttonSetClass = true;
Expand Down
8 changes: 4 additions & 4 deletions src/button/button-set.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { moduleMetadata, Meta } from "@storybook/angular";
import { IconModule } from "../icon";
import { ButtonModule, ButtonSet } from "./";
import { IconDirective } from "../icon";
import { Button, ButtonSet } from "./";

export default {
title: "Components/Button/Button Set",
decorators: [
moduleMetadata({
imports: [
ButtonModule,
IconModule
Button,
IconDirective
]
})
],
Expand Down
5 changes: 3 additions & 2 deletions src/button/button.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { ButtonSize, ButtonType } from "./button.types";
* A convenience directive for applying styling to a button. Get started with importing the module:
*
* ```typescript
* import { ButtonModule } from 'carbon-components-angular';
* import { Button } from 'carbon-components-angular';
* ```
*
* Example:
Expand All @@ -24,7 +24,8 @@ import { ButtonSize, ButtonType } from "./button.types";
* [See demo](../../?path=/story/components-button--basic)
*/
@Directive({
selector: "[cdsButton], [ibmButton]"
selector: "[cdsButton], [ibmButton]",
standalone: true
})
export class Button {
/**
Expand Down
Loading
Loading