diff --git a/src/list/list.directive.ts b/src/list/list.directive.ts index 616a2ca57c..d43a22feb4 100644 --- a/src/list/list.directive.ts +++ b/src/list/list.directive.ts @@ -1,4 +1,9 @@ -import { Directive, ElementRef, HostBinding } from "@angular/core"; +import { + Directive, + ElementRef, + HostBinding, + Input +} from "@angular/core"; /** * Applies either ordered or unordered styling to the list container it is applied to. @@ -33,5 +38,10 @@ export class List { return !!(this.elementRef.nativeElement.parentElement && this.elementRef.nativeElement.parentElement.tagName === "LI"); } + /** + * Set to `true` to make list expressive + */ + @Input() @HostBinding("class.cds--list--expressive") isExpressive = false; + constructor(protected elementRef: ElementRef) {} } diff --git a/src/list/list.stories.ts b/src/list/list.stories.ts index d6cff11aba..85bff69ddb 100644 --- a/src/list/list.stories.ts +++ b/src/list/list.stories.ts @@ -13,6 +13,9 @@ export default { parameters: { layout: "centered" }, + args: { + isExpressive: false + }, component: List } as Meta; @@ -20,13 +23,13 @@ const Template = (args) => ({ props: args, template: `
Ordered List
-Unordered List
-Ordered List
-Unordered List
-