test: 💍 fix classnames

addons/rose/addon/components/rose/toolbar/index.hbs

@@ -1,6 +1,6 @@
 <div ...attributes class="rose-toolbar">
   {{yield (hash
-    search=(component "rose/anonymous")
-    filter=(component "rose/anonymous" class="rose-toolbar-search")
+    search=(component "rose/anonymous" class="rose-toolbar-search")
+    filter=(component "rose/anonymous" class="rose-toolbar-filter")
   )}}
 </div>

addons/rose/addon/styles/rose/components/toolbar/_index.scss

@@ -1,10 +1 @@
-.rose-toolbar {
-  background-color: #fbfbfc;
-  display: flex;
-  .rose-form {
-    display: flex;
-  }
-  .rose-dropdown {
-    margin-left: auto;
-  }
-}
+@import 'toolbar';

addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss

@@ -0,0 +1,10 @@
+.rose-toolbar {
+  background-color: var(--ui-gray-subtler-6);
+  display: flex;
+  .rose-form {
+    display: flex;
+  }
+  .rose-dropdown {
+    margin-left: auto;
+  }
+}

addons/rose/tests/integration/components/rose/toolbar-test.js

@@ -12,10 +12,22 @@ module('Integration | Component | rose/toolbar', function (hooks) {
     assert.ok(find('.rose-toolbar'));
   });
 
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Toolbar id="toolbar"/>`);
+    assert.ok(find('#toolbar'));
+  });
+
   test('it renders with filter', async function (assert) {
     await render(hbs`<Rose::Toolbar as |toolbar| >
       <toolbar.filter />
     </Rose::Toolbar>`);
+    assert.ok(find('.rose-toolbar-filter'));
+  });
+
+  test('it renders with search', async function (assert) {
+    await render(hbs`<Rose::Toolbar as |toolbar| >
+      <toolbar.search />
+    </Rose::Toolbar>`);
     assert.ok(find('.rose-toolbar-search'));
   });
 });