fixup! docs(cdk-experimental/listbox): add docs & examples

mmalerba · mmalerba · commit bf8834361a6f · 2022-07-25T19:08:58.000Z
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.css
@@ -21,11 +21,16 @@
 }
 
 .example-option[aria-selected]::before {
-  content: '✓';
+  content: '';
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>'); /* stylelint-disable-line */
+  background-size: cover;
   position: absolute;
-  left: 5px;
+  left: 2px;
 }
 
-.example-option.cdk-option-active {
+.example-listbox:focus .cdk-option-active {
   background: rgba(0, 0, 0, 0.2);
 }
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.css
@@ -21,11 +21,16 @@
 }
 
 .example-option[aria-selected]::before {
-  content: '✓';
+  content: '';
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>'); /* stylelint-disable-line */
+  background-size: cover;
   position: absolute;
-  left: 5px;
+  left: 2px;
 }
 
-.example-option.cdk-option-active {
+.example-option:focus {
   background: rgba(0, 0, 0, 0.2);
 }
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-custom-navigation/cdk-listbox-custom-navigation-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-custom-navigation/cdk-listbox-custom-navigation-example.css
@@ -21,15 +21,20 @@
 }
 
 .example-option[aria-selected]::before {
-  content: '✓';
+  content: '';
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>'); /* stylelint-disable-line */
+  background-size: cover;
   position: absolute;
-  left: 5px;
+  left: 2px;
 }
 
 .example-option[aria-disabled] {
   opacity: 0.5;
 }
 
-.example-option.cdk-option-active {
+.example-option:not([aria-disabled]):focus {
   background: rgba(0, 0, 0, 0.2);
 }
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-custom-typeahead/cdk-listbox-custom-typeahead-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-custom-typeahead/cdk-listbox-custom-typeahead-example.css
@@ -21,11 +21,16 @@
 }
 
 .example-option[aria-selected]::before {
-  content: '✓';
+  content: '';
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>'); /* stylelint-disable-line */
+  background-size: cover;
   position: absolute;
-  left: 5px;
+  left: 2px;
 }
 
-.example-option.cdk-option-active {
+.example-option:focus {
   background: rgba(0, 0, 0, 0.2);
 }
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.css
@@ -29,16 +29,21 @@
 }
 
 .example-option[aria-selected]::before {
-  content: '✓';
+  content: '';
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>'); /* stylelint-disable-line */
+  background-size: cover;
   position: absolute;
-  left: 5px;
+  left: 2px;
 }
 
 .example-option[aria-disabled] {
   opacity: 0.5;
 }
 
-.example-option.cdk-option-active {
+.example-option:not([aria-disabled]):focus {
   background: rgba(0, 0, 0, 0.2);
 }
 
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.css
@@ -31,12 +31,17 @@
 }
 
 .example-option[aria-selected]::before {
-  content: '✓';
+  content: '';
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>'); /* stylelint-disable-line */
+  background-size: cover;
   position: absolute;
-  left: 5px;
+  left: 2px;
 }
 
-.example-option.cdk-option-active {
+.example-option:focus {
   background: rgba(0, 0, 0, 0.2);
 }
 
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.css
@@ -30,6 +30,6 @@
   right: 3px;
 }
 
-.example-option.cdk-option-active {
+.example-option:focus {
   background: rgba(0, 0, 0, 0.2);
 }
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-multiple/cdk-listbox-multiple-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-multiple/cdk-listbox-multiple-example.css
@@ -21,11 +21,16 @@
 }
 
 .example-option[aria-selected]::before {
-  content: '✓';
+  content: '';
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>'); /* stylelint-disable-line */
+  background-size: cover;
   position: absolute;
-  left: 5px;
+  left: 2px;
 }
 
-.example-option.cdk-option-active {
+.example-option:focus {
   background: rgba(0, 0, 0, 0.2);
 }
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-overview/cdk-listbox-overview-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-overview/cdk-listbox-overview-example.css
@@ -21,11 +21,16 @@
 }
 
 .example-option[aria-selected]::before {
-  content: '✓';
+  content: '';
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>'); /* stylelint-disable-line */
+  background-size: cover;
   position: absolute;
-  left: 5px;
+  left: 2px;
 }
 
-.example-option.cdk-option-active {
+.example-option:focus {
   background: rgba(0, 0, 0, 0.2);
 }
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.css
@@ -21,11 +21,16 @@
 }
 
 .example-option[aria-selected]::before {
-  content: '✓';
+  content: '';
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>'); /* stylelint-disable-line */
+  background-size: cover;
   position: absolute;
-  left: 5px;
+  left: 2px;
 }
 
-.example-option.cdk-option-active {
+.example-option:focus {
   background: rgba(0, 0, 0, 0.2);
 }
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.css
@@ -21,11 +21,16 @@
 }
 
 .example-option[aria-selected]::before {
-  content: '✓';
+  content: '';
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>'); /* stylelint-disable-line */
+  background-size: cover;
   position: absolute;
-  left: 5px;
+  left: 2px;
 }
 
-.example-option.cdk-option-active {
+.example-option:focus {
   background: rgba(0, 0, 0, 0.2);
 }
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.css
@@ -21,11 +21,16 @@
 }
 
 .example-option[aria-selected]::before {
-  content: '✓';
+  content: '';
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>'); /* stylelint-disable-line */
+  background-size: cover;
   position: absolute;
-  left: 5px;
+  left: 2px;
 }
 
-.example-option.cdk-option-active {
+.example-option:focus {
   background: rgba(0, 0, 0, 0.2);
 }

Original file line number	Diff line number	Diff line change
`@@ -21,11 +21,16 @@`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`.example-option[aria-selected]::before {`
`24`		`- content: '✓';`
	`24`	`+ content: '';`
	`25`	`+ display: block;`
	`26`	`+ width: 20px;`
	`27`	`+ height: 20px;`
	`28`	`+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>'); /* stylelint-disable-line */`
	`29`	`+ background-size: cover;`
`25`	`30`	`position: absolute;`
`26`		`- left: 5px;`
	`31`	`+ left: 2px;`
`27`	`32`	`}`
`28`	`33`
`29`		`-.example-option.cdk-option-active {`
	`34`	`+.example-listbox:focus .cdk-option-active {`
`30`	`35`	`background: rgba(0, 0, 0, 0.2);`
`31`	`36`	`}`
Original file line number	Diff line number	Diff line change
`@@ -21,15 +21,20 @@`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`.example-option[aria-selected]::before {`
`24`		`- content: '✓';`
	`24`	`+ content: '';`
	`25`	`+ display: block;`
	`26`	`+ width: 20px;`
	`27`	`+ height: 20px;`
	`28`	`+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>'); /* stylelint-disable-line */`
	`29`	`+ background-size: cover;`
`25`	`30`	`position: absolute;`
`26`		`- left: 5px;`
	`31`	`+ left: 2px;`
`27`	`32`	`}`
`28`	`33`
`29`	`34`	`.example-option[aria-disabled] {`
`30`	`35`	`opacity: 0.5;`
`31`	`36`	`}`
`32`	`37`
`33`		`-.example-option.cdk-option-active {`
	`38`	`+.example-option:not([aria-disabled]):focus {`
`34`	`39`	`background: rgba(0, 0, 0, 0.2);`
`35`	`40`	`}`
Original file line number	Diff line number	Diff line change
`@@ -29,16 +29,21 @@`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`.example-option[aria-selected]::before {`
`32`		`- content: '✓';`
	`32`	`+ content: '';`
	`33`	`+ display: block;`
	`34`	`+ width: 20px;`
	`35`	`+ height: 20px;`
	`36`	`+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>'); /* stylelint-disable-line */`
	`37`	`+ background-size: cover;`
`33`	`38`	`position: absolute;`
`34`		`- left: 5px;`
	`39`	`+ left: 2px;`
`35`	`40`	`}`
`36`	`41`
`37`	`42`	`.example-option[aria-disabled] {`
`38`	`43`	`opacity: 0.5;`
`39`	`44`	`}`
`40`	`45`
`41`		`-.example-option.cdk-option-active {`
	`46`	`+.example-option:not([aria-disabled]):focus {`
`42`	`47`	`background: rgba(0, 0, 0, 0.2);`
`43`	`48`	`}`
`44`	`49`
Original file line number	Diff line number	Diff line change
`@@ -31,12 +31,17 @@`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`.example-option[aria-selected]::before {`
`34`		`- content: '✓';`
	`34`	`+ content: '';`
	`35`	`+ display: block;`
	`36`	`+ width: 20px;`
	`37`	`+ height: 20px;`
	`38`	`+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>'); /* stylelint-disable-line */`
	`39`	`+ background-size: cover;`
`35`	`40`	`position: absolute;`
`36`		`- left: 5px;`
	`41`	`+ left: 2px;`
`37`	`42`	`}`
`38`	`43`
`39`		`-.example-option.cdk-option-active {`
	`44`	`+.example-option:focus {`
`40`	`45`	`background: rgba(0, 0, 0, 0.2);`
`41`	`46`	`}`
`42`	`47`
Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,6 @@`
`30`	`30`	`right: 3px;`
`31`	`31`	`}`
`32`	`32`
`33`		`-.example-option.cdk-option-active {`
	`33`	`+.example-option:focus {`
`34`	`34`	`background: rgba(0, 0, 0, 0.2);`
`35`	`35`	`}`