Merge pull request #2287 from Akshat55/structured-list-next

feat: Add option to align content to margin

Author: Akshat55

src/structured-list/list-column.component.ts

@@ -20,6 +20,7 @@ import { Component, HostBinding, Input } from "@angular/core";
 export class ListColumn {
 	@Input() skeleton = false;
 
+	@HostBinding("attr.role") role = "cell";
 	@HostBinding("class.cds--structured-list-th") isHeaderColumn = true;
 	@HostBinding("class.cds--structured-list-td") isBodyColumn = true;
 	/**

src/structured-list/list-header.component.ts

@@ -23,14 +23,15 @@ import { ListColumn } from "./list-column.component";
 @Component({
 	selector: "ibm-list-header",
 	template: `
-		<div class="cds--structured-list-row cds--structured-list-row--header-row">
+		<div class="cds--structured-list-row cds--structured-list-row--header-row" role="row">
 			<ng-content></ng-content>
 			<div *ngIf="selection" class="cds--structured-list-th"></div>
 		</div>
 	`
 })
 export class ListHeader implements AfterContentInit {
 	@HostBinding("class.cds--structured-list-thead") wrapper = true;
+	@HostBinding("attr.role") role = "rowgroup";
 
 	@Input()
 	set skeleton(value: any) {

src/structured-list/structured-list.component.spec.ts

@@ -11,9 +11,8 @@ import { IconModule } from "../icon/index";
 @Component({
 	template: `
 		<ibm-structured-list
-			border="true"
+			flushed="true"
 			[condensed]="condensed"
-			nowrap="false"
 			selection="true"
 			[(ngModel)]="valueSelected"
 			(selected)="onSelected()">
@@ -64,11 +63,11 @@ describe("StructuredList", () => {
 		expect(fixture.componentInstance instanceof StructuredList).toBe(true);
 	});
 
-	it("should set cds--structured-list--border class", () => {
+	it("should set cds--structured-list--flushed class", () => {
 		fixture = TestBed.createComponent(StructuredListTest);
 		fixture.detectChanges();
 		element = fixture.debugElement.query(By.css("ibm-structured-list"));
-		expect(element.nativeElement.querySelector(".cds--structured-list--border")).toBeTruthy();
+		expect(element.nativeElement.querySelector(".cds--structured-list--flush")).toBeTruthy();
 	});
 
 	it("should change valueSelected to row1 on click and emit selected event", () => {
@@ -83,12 +82,12 @@ describe("StructuredList", () => {
 		expect(wrapper.onSelected).toHaveBeenCalled();
 	});
 
-	it("should set cds--structured-list-content--nowrap class", () => {
+	it("should set cds--structured-list--condensed class", () => {
 		fixture = TestBed.createComponent(StructuredListTest);
-		fixture.detectChanges();
 		wrapper = fixture.componentInstance;
 		wrapper.condensed = true;
+		fixture.detectChanges();
 		element = fixture.debugElement.query(By.css("ibm-structured-list"));
-		expect(element.nativeElement.querySelector(".cds--structured-list-content--nowrap")).toBeTruthy();
+		expect(element.nativeElement.querySelector(".cds--structured-list--condensed")).toBeTruthy();
 	});
 });

src/structured-list/structured-list.component.ts

@@ -54,20 +54,20 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
 @Component({
 	selector: "ibm-structured-list",
 	template: `
-		<section
+		<div
 			class="cds--structured-list"
+			role="table"
 			[ngClass]="{
-				'cds--structured-list--border': border,
+				'cds--structured-list--flush': flushed,
 				'cds--structured-list--selection': selection,
 				'cds--structured-list--condensed': condensed,
-				'cds--structured-list-content--nowrap': nowrap,
 				'cds--skeleton': skeleton
 			}">
 			<ng-content select="ibm-list-header"></ng-content>
-			<div class="cds--structured-list-tbody">
+			<div class="cds--structured-list-tbody" role="rowgroup">
 				<ng-content></ng-content>
 			</div>
-		</section>
+		</div>
 	`,
 	providers: [
 		{
@@ -87,17 +87,13 @@ export class StructuredList implements AfterContentInit, ControlValueAccessor {
 	 */
 	@Input() selection = false;
 	/**
-	 * Set to `true` to apply a border and white background.
+	 * Set to `true` to align content with margin
 	 */
-	@Input() border = false;
+	@Input() flushed = false;
 	/**
 	 * Set to `true` to apply a condensed style to the headers and rows.
 	 */
 	@Input() condensed = false;
-	/**
-	 * Set to `true` to apply `white-space: nowrap` on _all_ conent.
-	 */
-	@Input() nowrap = false;
 	/**
 	 * Used when `selection = true` as the row radio group `name`
 	 */
@@ -151,7 +147,7 @@ export class StructuredList implements AfterContentInit, ControlValueAccessor {
 		this.rows.forEach(row => {
 			setSelection(row);
 			row.name = this.name;
-			row.tabindex = this.selection ? "0" : "null";
+			row.tabindex = this.selection ? "0" : null;
 			row.change.subscribe(() => {
 				this.selected.emit({
 					value: row.value,