diff --git a/.changeset/polite-pets-switch.md b/.changeset/polite-pets-switch.md new file mode 100644 index 00000000..e5a00225 --- /dev/null +++ b/.changeset/polite-pets-switch.md @@ -0,0 +1,5 @@ +--- +"mx-ui-components": patch +--- + +fix: light mode theming for tables diff --git a/addon/components/mox/list/header.hbs b/addon/components/mox/list/header.hbs index f9d29db8..6c702d5e 100644 --- a/addon/components/mox/list/header.hbs +++ b/addon/components/mox/list/header.hbs @@ -1,5 +1,7 @@ - + {{yield}} diff --git a/addon/components/mox/list/item.hbs b/addon/components/mox/list/item.hbs index 42efc013..0651898d 100644 --- a/addon/components/mox/list/item.hbs +++ b/addon/components/mox/list/item.hbs @@ -7,7 +7,11 @@ >
{{yield}} @@ -45,7 +49,7 @@
{{else}} - +
{{yield}}
diff --git a/addon/components/mox/list/row.hbs b/addon/components/mox/list/row.hbs index 88490339..bf029b06 100644 --- a/addon/components/mox/list/row.hbs +++ b/addon/components/mox/list/row.hbs @@ -1,3 +1,7 @@ - + {{yield}} diff --git a/tests/integration/components/mox/list-test.js b/tests/integration/components/mox/list-test.js index 39c4cb12..e51ce5cb 100644 --- a/tests/integration/components/mox/list-test.js +++ b/tests/integration/components/mox/list-test.js @@ -26,7 +26,7 @@ module('Integration | Component | mox/list', function (hooks) { test('it is accessible (dark background)', async function (assert) { await render(hbs` -
+
<:header> diff --git a/tests/integration/components/mox/list/header-test.js b/tests/integration/components/mox/list/header-test.js index a2533636..9f4be117 100644 --- a/tests/integration/components/mox/list/header-test.js +++ b/tests/integration/components/mox/list/header-test.js @@ -20,7 +20,7 @@ module('Integration | Component | mox/list/header', function (hooks) { test('it is accessible (dark background)', async function (assert) { await render(hbs` -
+
header item diff --git a/tests/integration/components/mox/list/item-test.js b/tests/integration/components/mox/list/item-test.js index d44e6de0..a4cd8dec 100644 --- a/tests/integration/components/mox/list/item-test.js +++ b/tests/integration/components/mox/list/item-test.js @@ -18,7 +18,12 @@ module('Integration | Component | mox/list/item', function (hooks) { .dom( '[data-test-mox-list-header-item] [data-test-mox-list-header-item-label]' ) - .hasClass('text-gray-300'); + .hasClass('text-gray-800'); + assert + .dom( + '[data-test-mox-list-header-item] [data-test-mox-list-header-item-label]' + ) + .hasClass('dark:text-gray-300'); assert.dom('[data-test-mox-list-header-sort-asc]').doesNotExist(); assert.dom('[data-test-mox-list-header-sort-desc]').doesNotExist(); }); diff --git a/tests/integration/components/mox/list/row-test.js b/tests/integration/components/mox/list/row-test.js index c842b8e5..3be36edc 100644 --- a/tests/integration/components/mox/list/row-test.js +++ b/tests/integration/components/mox/list/row-test.js @@ -20,7 +20,7 @@ module('Integration | Component | mox/list/row', function (hooks) { test('it is accessible (dark background)', async function (assert) { await render(hbs` -
+
list row diff --git a/tests/integration/components/mox/toggle-test.js b/tests/integration/components/mox/toggle-test.js index e4a74255..9b095893 100644 --- a/tests/integration/components/mox/toggle-test.js +++ b/tests/integration/components/mox/toggle-test.js @@ -69,6 +69,7 @@ module('Integration | Component | mox/toggle', function (hooks) { await render( hbs`
` ); + assert.dom('[data-test-mox-toggle]').hasClass('dark:bg-gray-400'); assert.dom('[data-test-mox-toggle]').hasStyle({ color: 'rgb(37, 99, 235)', @@ -82,19 +83,12 @@ module('Integration | Component | mox/toggle', function (hooks) { test('it renders correctly (on)', async function (assert) { await render( - hbs`
` - ); - - let toggle = find('[data-test-mox-toggle]'); - await click(toggle); - await waitUntil( - () => getComputedStyle(toggle).backgroundColor === 'rgb(6, 182, 212)' + hbs`
` ); - assert.dom(toggle).hasClass('dark:checked:bg-cyan-500'); - assert.dom(toggle).hasStyle({ + assert.dom('[data-test-mox-toggle]').hasClass('dark:checked:bg-cyan-500'); + assert.dom('[data-test-mox-toggle]').hasStyle({ color: 'rgb(6, 182, 212)', - borderColor: 'rgb(6, 182, 212)', backgroundColor: 'rgb(6, 182, 212)', }); assert.dom('[data-test-mox-toggle-label]').hasStyle({ @@ -155,20 +149,13 @@ module('Integration | Component | mox/toggle', function (hooks) { test('it renders correctly (on)', async function (assert) { await render( - hbs`
` + hbs`
` ); - let toggle = find('[data-test-mox-toggle]'); - await click(toggle); - await waitUntil( - () => getComputedStyle(toggle).backgroundColor === 'rgb(16, 185, 129)' - ); - - assert.dom(toggle).hasClass('dark:checked:bg-cyan-500'); - assert.dom(toggle).hasStyle({ - color: 'rgb(16, 185, 129)', - borderColor: 'rgba(209, 213, 219, 0)', - backgroundColor: 'rgb(16, 185, 129)', + assert.dom('[data-test-mox-toggle]').hasClass('dark:checked:bg-cyan-500'); + assert.dom('[data-test-mox-toggle]').hasStyle({ + backgroundColor: 'rgb(209, 213, 219)', + color: 'rgb(37, 99, 235)', }); assert.dom('[data-test-mox-toggle-label]').hasStyle({ color: 'rgb(55, 65, 81)',