fix: adds support for icon-color attribute

Neovici · Oct 6, 2020 · 872bea2 · 872bea2
1 parent c0ba8a0
commit 872bea2
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/cosmoz-tab.js b/cosmoz-tab.js
@@ -60,6 +60,7 @@ customElements.define('cosmoz-tab', class extends component(CosmozTab, {
 		'badge',
 		'icon',
 		'icon-style',
+		'icon-color',
 		'selected-icon',
 		'is-selected'
 	]

diff --git a/test/cosmoz-tabs-basic.test.js b/test/cosmoz-tabs-basic.test.js
@@ -12,9 +12,9 @@ suite('cosmoz-tabs', () => {
 		tabs = await fixture(html`
 			<cosmoz-tabs>
 				<cosmoz-tab name="tab0" heading="Tab0">1</cosmoz-tab>
-				<cosmoz-tab name="tab1" heading="Tab1" badge="2" icon="radio-button-unchecked" selected-icon="radio-button-checked">2</cosmoz-tab>
+				<cosmoz-tab name="tab1" heading="Tab1" badge="2" icon="radio-button-unchecked" selected-icon="radio-button-checked" icon-color="red">2</cosmoz-tab>
 				<cosmoz-tab name="tab2" hidden>3</cosmoz-tab>
-				<cosmoz-tab name="tab3" heading="Tab3" disabled>3</cosmoz-tab>
+				<cosmoz-tab name="tab3" heading="Tab3" disabled icon="warning">3</cosmoz-tab>
 			</cosmoz-tabs>
 		`);
 	});
@@ -50,11 +50,13 @@ suite('cosmoz-tabs', () => {
 	});
 
 	test('sets icon inside tab', async () => {
-		const icon = tabs.shadowRoot.querySelectorAll('[role="tab"]')[1].querySelector('iron-icon');
+		let icon = tabs.shadowRoot.querySelectorAll('[role="tab"]')[1].querySelector('iron-icon');
 		assert.equal(icon.getAttribute('icon'), 'radio-button-unchecked');
 		tabs.selected = 'tab1';
 		await nextFrame();
-		assert.equal(tabs.shadowRoot.querySelectorAll('[role="tab"]')[1].querySelector('iron-icon').getAttribute('icon'), 'radio-button-checked');
+		icon = tabs.shadowRoot.querySelectorAll('[role="tab"]')[1].querySelector('iron-icon')
+		assert.equal(icon.getAttribute('icon'), 'radio-button-checked');
+		assert.equal(icon.style.color, 'red')
 	});
 
 	test('sets heading inside tab', () => {