From a9dfe77e066b6f682fa3638bd3801c0af4db420c Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Tue, 12 Mar 2024 10:18:58 +0100
Subject: [PATCH 1/2] Create a private class-names helper
This can be used to easily add the needed whitespace between provided css classes.
---
addon/private/helpers/class-names.ts | 6 +++
.../private/helpers/class-names-test.gts | 39 +++++++++++++++++++
2 files changed, 45 insertions(+)
create mode 100644 addon/private/helpers/class-names.ts
create mode 100644 tests/integration/private/helpers/class-names-test.gts
diff --git a/addon/private/helpers/class-names.ts b/addon/private/helpers/class-names.ts
new file mode 100644
index 000000000..2582fa01c
--- /dev/null
+++ b/addon/private/helpers/class-names.ts
@@ -0,0 +1,6 @@
+/**
+ * A very basic alternative to https://github.com/JedWatson/classnames
+ */
+export function cn(...classNames: Array<string | undefined>) {
+ return classNames.filter(Boolean).join(' ');
+}
diff --git a/tests/integration/private/helpers/class-names-test.gts b/tests/integration/private/helpers/class-names-test.gts
new file mode 100644
index 000000000..a74ad79e0
--- /dev/null
+++ b/tests/integration/private/helpers/class-names-test.gts
@@ -0,0 +1,39 @@
+import { settled, render } from '@ember/test-helpers';
+import { tracked } from '@glimmer/tracking';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+import { cn } from '@appuniversum/ember-appuniversum/private/helpers/class-names';
+
+module('Integration | Private Helper | class-names', function (hooks) {
+ setupRenderingTest(hooks);
+
+ test('it accepts a list of classes and adds the needed whitespace', async function (assert) {
+ await render(
+ <template>
+ <div data-test class={{cn "foo" "bar" "baz"}}></div>
+ </template>,
+ );
+
+ assert.dom('[data-test]').hasClass('foo').hasClass('bar').hasClass('baz');
+ });
+
+ test('it removes falsy values', async function (assert) {
+ class TestState {
+ @tracked someFlag: boolean = false;
+ }
+
+ const state = new TestState();
+ await render(
+ <template>
+ <div data-test class={{cn "foo" (if state.someFlag "bar") "baz"}}></div>
+ </template>,
+ );
+
+ assert.dom('[data-test]').hasClass('foo').hasNoClass('bar').hasClass('baz');
+
+ state.someFlag = true;
+ await settled();
+
+ assert.dom('[data-test]').hasClass('foo').hasClass('bar').hasClass('baz');
+ });
+});
From 9ac673cbe0c5e20fc455bc558bac9c6abc5e70d0 Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Tue, 12 Mar 2024 10:23:23 +0100
Subject: [PATCH 2/2] Fix incompatibilities between `AuModal` arguments
The way the CSS classes where added caused issues due to missing whitespace between the classes. We now use the `{{cn}}` helper which handles that for us.
---
addon/components/au-modal.gjs | 9 +++++----
1 file changed, 5 insertions(+), 4 deletions(-)
diff --git a/addon/components/au-modal.gjs b/addon/components/au-modal.gjs
index ad867b1d4..18238bab1 100644
--- a/addon/components/au-modal.gjs
+++ b/addon/components/au-modal.gjs
@@ -5,6 +5,7 @@ import { on } from '@ember/modifier';
import { action } from '@ember/object';
import Component from '@glimmer/component';
import { focusTrap } from 'ember-focus-trap';
+import { cn } from '../private/helpers/class-names';
// TODO: replace these with the named imports from ember-truth-helpers v4 once our dependencies support that version
import not from 'ember-truth-helpers/helpers/not';
@@ -33,7 +34,7 @@ export default class AuModal extends Component {
}
get padding() {
- if (this.args.padding === 'none') return ' au-c-modal--flush';
+ if (this.args.padding === 'none') return 'au-c-modal--flush';
else return '';
}
@@ -89,12 +90,12 @@ export default class AuModal extends Component {
<div class="au-c-modal-backdrop {{if @modalOpen 'is-visible'}}"></div>
<div
id="{{@id}}"
- class={{concat
- "au-c-modal "
+ class={{cn
+ "au-c-modal"
this.size
this.padding
this.overflow
- (if @modalOpen " is-visible")
+ (if @modalOpen "is-visible")
}}
role="dialog"
aria-describedby={{concat "au-c-modal-title-" @id}}