Replace Rose::Icon with HDS::Icon (#2762)

* refactor: 💡 rose icons with hds icons * fix: 🐛 remove child selector for h2 * fix: 🐛 removed unwanted changes * fix: 🐛 remove unncessary change * refactor: 💡 rose icon for rose components * fix: 🐛 default size for doc-link, updated tests, removed TODO * fix: 🐛 update doc-link test
2025-04-25 13:18:23 -07:00
1 parent 40ec4493ea
commit 93a57f26ee
@@ -98,7 +98,7 @@ To render doc links in your application, be sure to configure the links in your
 Ember config (see admin).  Then reference doc links by keys:

 ```html
-<DocLink @doc="account" @iconSize="large" />
+<DocLink @doc="account" @iconSize="24" />
 ```

 ## Loading Helper
@@ -10,5 +10,5 @@
  rel='noreferrer noopener'
  title={{t 'actions.get-topic-help'}}
 >
-  <Rose::Icon @name='flight-icons/svg/help-24' @size={{@iconSize}} />
+  <Hds::Icon @name='help' @size={{or @iconSize 24}} @isInline={{true}} />
 </a>
@@ -5,14 +5,14 @@

 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
+import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';

 module('Integration | Component | doc-link', function (hooks) {
  setupRenderingTest(hooks);

  test('it renders', async function (assert) {
-    await render(hbs`<DocLink @doc='account' @iconSize='large' />`);
-    assert.ok(find('.doc-link .rose-icon.large'));
+    await render(hbs`<DocLink @doc='account' />`);
+    assert.dom('.doc-link .hds-icon').isVisible();
  });
 });
@@ -15,7 +15,7 @@

  <span class='rose-button-wrapper'>
    {{#if @iconLeft}}
-      <Rose::Icon @name={{@iconLeft}} @size='medium' />
+      <Hds::Icon @name={{@iconLeft}} @isInline={{true}} />
    {{/if}}

    <span class='rose-button-body'>
@@ -23,11 +23,11 @@
    </span>

    {{#if @iconOnly}}
-      <Rose::Icon @name={{@iconOnly}} @size='medium' />
+      <Hds::Icon @name={{@iconOnly}} @isInline={{true}} />
    {{/if}}

    {{#if @iconRight}}
-      <Rose::Icon @name={{@iconRight}} @size='medium' />
+      <Hds::Icon @name={{@iconRight}} @isInline={{true}} />
    {{/if}}
  </span>
 </button>
@@ -27,7 +27,7 @@
      class='rose-code-editor-toolbar__copy-button'
      data-test-code-editor-toolbar-copy-button
    >
-      <Rose::Icon @name={{this.copyIconType}} @size='medium' />
+      <Hds::Icon @name={{this.copyIconType}} @isInline={{true}} />
      Copy code
    </CopyButton>
  </div>
@@ -8,8 +8,8 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { later } from '@ember/runloop';

-export const COPY_ICON_TYPE = 'flight-icons/svg/clipboard-copy-16';
-export const COPIED_ICON_TYPE = 'flight-icons/svg/clipboard-checked-16';
+export const COPY_ICON_TYPE = 'clipboard-copy';
+export const COPIED_ICON_TYPE = 'clipboard-checked';

 export default class RoseCodeEditorToolbarComponent extends Component {
  @tracked copyIconType = COPY_ICON_TYPE;
@@ -20,7 +20,7 @@
    <header class='rose-dialog-header' id={{concat 'dialog-header-' this.id}}>

      {{#if @icon}}
-        <Rose::Icon @name={{@icon}} @size='medium' />
+        <Hds::Icon @name={{@icon}} />
      {{/if}}

      <Hds::Text::Display
@@ -34,7 +34,7 @@
        title={{@dismissButtonText}}
        {{on 'click' (fn this.dismiss @dismiss)}}
      >
-        <Rose::Icon @name='flight-icons/svg/x-16' @size='small' />
+        <Hds::Icon @name='x' />
      </button>

    </header>
@@ -65,7 +65,7 @@
      <header class='rose-dialog-header'>

        {{#if @icon}}
-          <Rose::Icon @name={{@icon}} @size='medium' />
+          <Hds::Icon @name={{@icon}} />
        {{/if}}

        <Hds::Text::Display
@@ -79,7 +79,7 @@
          title={{@dismissButtonText}}
          {{on 'click' (fn this.dismiss @dismiss)}}
        >
-          <Rose::Icon @name='flight-icons/svg/x-16' @size='small' />
+          <Hds::Icon @name='x' />
        </button>

      </header>
@@ -17,7 +17,7 @@
    </Hds::Text::Body>

    {{#if @iconOnly}}
-      <Rose::Icon @name={{@iconOnly}} @size='medium' />
+      <Hds::Icon @name={{@iconOnly}} @isInline={{true}} />
    {{/if}}
  </span>
 </button>
@@ -19,7 +19,7 @@
  >

    {{#if @icon}}
-      <Rose::Icon @name={{@icon}} @size='medium' />
+      <Hds::Icon @name={{@icon}} @isInline={{true}} />
    {{/if}}

    <span class='rose-dropdown-trigger-text'>
@@ -14,7 +14,7 @@
      class='rose-dropdown-section-title'
    >
      {{#if @icon}}
-        <Rose::Icon @name={{@icon}} @size='medium' />
+        <Hds::Icon @name={{@icon}} @isInline={{true}} />
      {{/if}}
      {{@title}}
    </Hds::Text::Display>
@@ -4,6 +4,6 @@
 }}

 <p class='rose-form-error-message' ...attributes>
-  <Rose::Icon @name='flight-icons/svg/x-square-16' @size='medium' />
+  <Hds::Icon @name='x-square' @isInline={{true}} />
  {{yield}}
 </p>
@@ -46,7 +46,7 @@

    <div class='rose-input-wrapper'>
      {{#if @icon}}
-        <Rose::Icon @name={{@icon}} @size='medium' />
+        <Hds::Icon @name={{@icon}} @isInline={{true}} />
      {{/if}}
      <Rose::Form::Input::Input
        ...attributes
@@ -78,8 +78,8 @@
    height: sizing.rems(xl);
    white-space: nowrap;

-    &-icon {
-      margin-right: sizing.rems(xs);
+    .hds-icon {
+      vertical-align: top;
    }
  }
 }
@@ -38,6 +38,8 @@ $chevron-grey: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%236

    cursor: default;
    overflow: hidden;
+    display: flex;
+    align-items: center;

    $y-padding: sizing.rems(xxs) + sizing.rems(xxxs);

@@ -63,7 +65,7 @@ $chevron-grey: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%236
      background-color: var(--ui-gray-subtler-5);
    }

-    &:not(.has-icon-only) .rose-icon:first-child {
+    &:not(.has-icon-only) .hds-icon:first-child {
      margin-left: -(sizing.rems(xs));
      margin-right: sizing.rems(xxs);
    }
@@ -19,5 +19,9 @@

    line-height: $line-height;
    color: var(--ui-gray);
+
+    .hds-icon {
+      vertical-align: text-top;
+    }
  }
 }
@@ -22,6 +22,16 @@

  .rose-layout-page-header {
    grid-area: header;
+
+    h2 {
+      display: flex;
+      gap: sizing.rems(xxs);
+
+      .doc-link {
+        display: flex;
+        align-items: center;
+      }
+    }
  }

  .rose-layout-page-actions {
@@ -48,8 +48,9 @@
    padding: 0 sizing.rems(m);
    border-right: $three-px solid transparent;

-    .rose-icon {
+    .hds-icon {
      opacity: 0.65;
+      vertical-align: text-bottom;
    }

    &:hover {
@@ -23,12 +23,12 @@
    flex-direction: row;
  }

-  &.has-icon-left .rose-icon:first-child {
+  &.has-icon-left .hds-icon:first-child {
    margin-left: -(sizing.rems(xs));
    margin-right: sizing.rems(xxs);
  }

-  &.has-icon-right .rose-icon:last-child {
+  &.has-icon-right .hds-icon:last-child {
    margin-left: sizing.rems(xxs);
    margin-right: -(sizing.rems(xs));
  }
@@ -39,20 +39,14 @@ module('Integration | Component | rose/button', function (hooks) {
  });

  test('it supports left and right icons', async function (assert) {
-    await render(
-      hbs`<Rose::Button @iconLeft="flight-icons/svg/chevron-left-16" />`,
-    );
-    assert.ok(find('.has-icon-left .rose-icon'));
-    await render(
-      hbs`<Rose::Button @iconRight="flight-icons/svg/chevron-left-16" />`,
-    );
-    assert.ok(find('.has-icon-right .rose-icon'));
+    await render(hbs`<Rose::Button @iconLeft="chevron-left" />`);
+    assert.dom('.has-icon-left .hds-icon').isVisible();
+    await render(hbs`<Rose::Button @iconRight="chevron-left" />`);
+    assert.dom('.has-icon-right .hds-icon').isVisible();
  });

  test('it supports an icon-only type', async function (assert) {
-    await render(
-      hbs`<Rose::Button @iconOnly="flight-icons/svg/chevron-left-16" />`,
-    );
-    assert.ok(find('.has-icon-only .rose-icon'));
+    await render(hbs`<Rose::Button @iconOnly="chevron-left" />`);
+    assert.dom('.has-icon-only .hds-icon').isVisible();
  });
 });
@@ -37,10 +37,8 @@ module('Integration | Component | rose/dropdown', function (hooks) {
  });

  test('it supports an icon', async function (assert) {
-    await render(
-      hbs`<Rose::Dropdown @icon="flight-icons/svg/user-circle-16" />`,
-    );
-    assert.ok(find('svg'));
+    await render(hbs`<Rose::Dropdown @icon="user-circle" />`);
+    assert.dom('svg').isVisible();
  });

  test('it supports icon-only display', async function (assert) {
@@ -37,9 +37,7 @@ module('Integration | Component | rose/dropdown/button', function (hooks) {
  });

  test('it supports an icon-only type', async function (assert) {
-    await render(
-      hbs`<Rose::Dropdown::Button @iconOnly="flight-icons/svg/chevron-left-16" />`,
-    );
-    assert.ok(find('.has-icon-only .rose-icon'));
+    await render(hbs`<Rose::Dropdown::Button @iconOnly="chevron-left" />`);
+    assert.dom('.has-icon-only .hds-icon').isVisible();
  });
 });
@@ -67,8 +67,8 @@ module('Integration | Component | rose/form/input', function (hooks) {
  });

  test('it supports an icon using @icon', async function (assert) {
-    await render(hbs`<Rose::Form::Input @icon="flight-icons/svg/search-16" />`);
-    assert.ok(find('.rose-icon'));
+    await render(hbs`<Rose::Form::Input @icon="search" />`);
+    assert.dom('.hds-icon').isVisible();
  });

  test('it supports readonly attribute', async function (assert) {
@@ -5,7 +5,7 @@

 <Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
  {{t 'resources.account.title'}}
-  <DocLink @doc='account' @iconSize='large' />
+  <DocLink @doc='account' />
 </Hds::Text::Display>
 <p>{{t 'resources.account.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
@@ -10,7 +10,7 @@
    <Hds::Badge @text={{t 'states.primary'}} @color='success' />
    &nbsp;
  {{/if}}
-  <DocLink @doc='auth-method' @iconSize='large' />
+  <DocLink @doc='auth-method' />
 </Hds::Text::Display>
 <p>{{t 'resources.auth-method.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
@@ -5,7 +5,7 @@

 <Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
  {{t 'resources.managed-group.title'}}
-  <DocLink @doc='managed-groups' @iconSize='large' />
+  <DocLink @doc='managed-groups' />
 </Hds::Text::Display>
 <p>{{t 'resources.managed-group.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
@@ -5,7 +5,7 @@

 <Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
  {{t 'resources.credential-store.title'}}
-  <DocLink @doc='credential-store' @iconSize='large' />
+  <DocLink @doc='credential-store' />
 </Hds::Text::Display>
 <p>{{t 'resources.credential-store.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
@@ -6,7 +6,7 @@
 <div class='secret-editor'>
  {{#if this.isDisabled}}
    <Form::Field::JsonSecret::Skeleton>
-      <Rose::Icon @name='flight-icons/svg/eye-off-16' @size='medium' />
+      <Hds::Icon @name='eye-off' @isInline={{true}} />
      {{t 'form.secret-editor.details'}}
    </Form::Field::JsonSecret::Skeleton>
  {{else if this.isActionable}}
@@ -263,13 +263,14 @@
    {{#unless @model.isNew}}
      <div class='worker-success'>
        <div>
-          <Rose::Icon @name='flight-icons/svg/cpu-16' @size='medium' />
+          <Hds::Icon @name='cpu' @color='success' @isInline={{true}} />
          <p>{{this.generatedWorkerAuthToken}}</p>
        </div>
        <div>
-          <Rose::Icon
-            @name='flight-icons/svg/check-circle-fill-16'
-            @size='medium'
+          <Hds::Icon
+            @name='check-circle-fill'
+            @color='success'
+            @isInline={{true}}
          />
          <p>{{t 'resources.worker.form.steps.3.registered'}}</p>
        </div>
@@ -5,7 +5,7 @@

 <Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
  {{t 'resources.group.title'}}
-  <DocLink @doc='group' @iconSize='large' />
+  <DocLink @doc='group' />
 </Hds::Text::Display>
 <p>{{t 'resources.group.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
@@ -9,11 +9,7 @@
    (t 'titles.global')
    this.scope.org.displayName
  }}
-  @icon={{if
-    this.scope.org.isGlobal
-    'flight-icons/svg/globe-16'
-    'flight-icons/svg/org-16'
-  }}
+  @icon={{if this.scope.org.isGlobal 'globe' 'org'}}
  as |dropdown|
 >
  {{#if this.session.data.authenticated.isGlobal}}
@@ -32,7 +28,7 @@
 {{#if this.scope.project}}
  <Rose::Dropdown
    @text={{this.scope.project.displayName}}
-    @icon='flight-icons/svg/grid-16'
+    @icon='grid'
    as |dropdown|
  >
    {{#each this.scope.projectsList as |project|}}
@@ -5,7 +5,7 @@

 <Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
  {{t 'resources.host-catalog.title'}}
-  <DocLink @doc='host-catalog' @iconSize='large' />
+  <DocLink @doc='host-catalog' />
 </Hds::Text::Display>
 <p>{{t 'resources.host-catalog.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
@@ -5,6 +5,6 @@

 <Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
  {{t 'resources.host-set.host.messages.add.title'}}
-  <DocLink @doc='host-set.add-hosts' @iconSize='large' />
+  <DocLink @doc='host-set.add-hosts' />
 </Hds::Text::Display>
 <p>{{t 'resources.host-set.host.messages.add.description'}}</p>
@@ -5,5 +5,5 @@

 <Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
  {{t 'resources.host-set.actions.create-and-add-host'}}
-  <DocLink @doc='host.new' @iconSize='large' />
+  <DocLink @doc='host.new' />
 </Hds::Text::Display>
@@ -5,7 +5,7 @@

 <Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
  {{t 'resources.host-set.title'}}
-  <DocLink @doc='host-set' @iconSize='large' />
+  <DocLink @doc='host-set' />
 </Hds::Text::Display>
 <p>{{t 'resources.host-set.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
@@ -5,7 +5,7 @@

 <Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
  {{t 'resources.host.title'}}
-  <DocLink @doc='host' @iconSize='large' />
+  <DocLink @doc='host' />
 </Hds::Text::Display>
 <p>{{t 'resources.host.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
@@ -5,6 +5,6 @@

 <Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
  {{t 'resources.host-set.titles.new'}}
-  <DocLink @doc='host-set.new' @iconSize='large' />
+  <DocLink @doc='host-set.new' />
 </Hds::Text::Display>
 <p>{{t 'resources.host-set.description'}}</p>
@@ -5,7 +5,7 @@

 <Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
  {{t 'resources.host.title'}}
-  <DocLink @doc='host' @iconSize='large' />
+  <DocLink @doc='host' />
 </Hds::Text::Display>
 <p>{{t 'resources.host.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
@@ -5,6 +5,6 @@

 <Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
  {{t 'resources.host.titles.new'}}
-  <DocLink @doc='host.new' @iconSize='large' />
+  <DocLink @doc='host.new' />
 </Hds::Text::Display>
 <p>{{t 'resources.host.description'}}</p>
@@ -5,7 +5,7 @@

 <Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
  {{t 'resources.role.title'}}
-  <DocLink @doc='role' @iconSize='large' />
+  <DocLink @doc='role' />
 </Hds::Text::Display>
 <p>{{t 'resources.role.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
@@ -5,7 +5,7 @@

 <Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
  {{t 'resources.target.title'}}
-  <DocLink @doc='target' @iconSize='large' />
+  <DocLink @doc='target' />
 </Hds::Text::Display>
 <p>{{t 'resources.target.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
@@ -5,7 +5,7 @@

 <Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
  {{t 'resources.user.title'}}
-  <DocLink @doc='user' @iconSize='large' />
+  <DocLink @doc='user' />
 </Hds::Text::Display>
 <p>{{t 'resources.user.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
@@ -5,7 +5,7 @@

 <Hds::Text::Display @tag='h2' @size='400' @weight='bold' class='header-spacing'>
  {{t 'resources.worker.title'}}
-  <DocLink @doc='worker' @iconSize='large' />
+  <DocLink @doc='worker' />
 </Hds::Text::Display>
 <p>{{t 'resources.worker.description'}}</p>
 <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
@@ -38,7 +38,7 @@
    margin-top: 0;
  }

-  .rose-icon {
+  .hds-icon {
    margin-right: sizing.rems(xs);
  }
 }
@@ -296,10 +296,6 @@
        }
      }
    }
-
-    .rose-icon {
-      color: var(--success);
-    }
  }
 }

@@ -424,6 +420,9 @@
    left: 50%;
    position: absolute;
    top: 50%;
+    display: flex;
+    align-items: center;
+    gap: sizing.rems(xxxs);

    // centers message with editor body and gutter
    transform: translate(-50%, -50%);
@@ -431,7 +430,6 @@
  }

  .secret-editor-skeleton-button {
-    
    @media (prefers-color-scheme: light) {
      .ember-application:not(.rose-theme-dark) & {
        background: var(--token-color-palette-neutral-600);
@@ -439,7 +437,7 @@
        border-color: var(--token-color-palette-neutral-50);
      }
    }
-    
+
    .ember-application.rose-theme-light & {
      background: var(--token-color-palette-neutral-600);
      color: var(--token-color-palette-neutral-50);
@@ -1078,10 +1076,6 @@
 .header-spacing {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
-
-  .doc-link {
-    vertical-align: middle;
-  }
 }

 // scope picker
@@ -1094,4 +1088,4 @@
  li.indentation {
    margin-left: 1.5rem;
  }
-}
+}
@@ -22,7 +22,7 @@
      class='header-spacing'
    >
      {{t 'resources.policy.titles.new'}}
-      <DocLink @doc='storage-policy.new' @iconSize='large' />
+      <DocLink @doc='storage-policy.new' />
    </Hds::Text::Display>
    <p>{{t 'resources.policy.description'}}</p>
  </page.header>
@@ -21,7 +21,7 @@
      class='header-spacing'
    >
      {{t 'resources.policy.actions.add'}}
-      <DocLink @doc='storage-policy.new' @iconSize='large' />
+      <DocLink @doc='storage-policy.new' />
    </Hds::Text::Display>
  </page.header>

@@ -15,7 +15,7 @@
      class='header-spacing'
    >
      {{t 'resources.alias.title'}}
-      <DocLink @doc='alias' @iconSize='large' />
+      <DocLink @doc='alias' />
    </Hds::Text::Display>
    <p>{{t 'resources.alias.description'}}</p>
    <Hds::Copy::Snippet @color='secondary' @textToCopy={{@model.id}} />
@@ -16,7 +16,7 @@
      class='header-spacing'
    >
      {{t 'resources.alias.title_plural'}}
-      <DocLink @doc='alias' @iconSize='large' />
+      <DocLink @doc='alias' />
    </Hds::Text::Display>
    <p>{{t 'resources.alias.description'}}</p>
  </page.header>
@@ -22,7 +22,7 @@
      class='header-spacing'
    >
      {{t 'resources.alias.titles.new'}}
-      <DocLink @doc='alias' @iconSize='large' />
+      <DocLink @doc='alias' />
    </Hds::Text::Display>
    <p>{{t 'resources.alias.description'}}</p>

@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.account.titles.new'}}
-      <DocLink @doc='account.new' @iconSize='large' />
+      <DocLink @doc='account.new' />
    </Hds::Text::Display>
    <p>{{t 'resources.account.description'}}</p>
  </page.header>
@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.managed-group.titles.new'}}
-      <DocLink @doc='managed-groups' @iconSize='large' />
+      <DocLink @doc='managed-groups' />
    </Hds::Text::Display>
    <p>{{t 'resources.managed-group.description'}}</p>
  </page.header>
@@ -12,7 +12,7 @@
      class='header-spacing'
    >
      {{t 'resources.auth-method.title_plural'}}
-      <DocLink @doc='auth-method' @iconSize='large' />
+      <DocLink @doc='auth-method' />
    </Hds::Text::Display>
    <p>{{t 'resources.auth-method.description'}}</p>
  </page.header>
@@ -18,7 +18,7 @@
      class='header-spacing'
    >
      {{t 'resources.auth-method.titles.new'}}
-      <DocLink @doc='auth-method' @iconSize='large' />
+      <DocLink @doc='auth-method' />
    </Hds::Text::Display>
    <p>{{t 'resources.auth-method.description'}}</p>
  </page.header>
@@ -31,7 +31,7 @@

            <Rose::Dropdown
              @text={{t 'actions.choose-different-org'}}
-              @icon='flight-icons/svg/org-16'
+              @icon='org'
              as |dropdown|
            >
              <dropdown.link @route='scopes.scope.authenticate' @model='global'>
@@ -17,7 +17,7 @@
      class='header-spacing'
    >
      {{t 'resources.credential-library.title'}}
-      <DocLink @doc='credential-library' @iconSize='large' />
+      <DocLink @doc='credential-library' />
    </Hds::Text::Display>
    <p>{{t 'resources.credential-library.description'}}</p>
    <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.credential-library.titles.new'}}
-      <DocLink @doc='credential-library' @iconSize='large' />
+      <DocLink @doc='credential-library' />
    </Hds::Text::Display>
    <p>{{t 'resources.credential-library.description'}}</p>
  </page.header>
@@ -17,7 +17,7 @@
      class='header-spacing'
    >
      {{t 'resources.credential.title'}}
-      <DocLink @doc='credential' @iconSize='large' />
+      <DocLink @doc='credential' />
    </Hds::Text::Display>
    <p>{{t 'resources.credential.description'}}</p>
    <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.credential.titles.new'}}
-      <DocLink @doc='credential' @iconSize='large' />
+      <DocLink @doc='credential' />
    </Hds::Text::Display>
    <p>{{t 'resources.credential.description'}}</p>
  </page.header>
@@ -17,7 +17,7 @@
  <page.header>
    <Hds::Text::Display @tag='h2' @size='300' class='h2'>
      {{t 'actions.edit-worker-filter'}}
-      <DocLink @doc='worker-filters-format' @iconSize='large' />
+      <DocLink @doc='worker-filters-format' />
    </Hds::Text::Display>
    <Hds::Text::Body @tag='p' @size='300'>
      {{t 'resources.credential-store.worker-filter.messages.edit.description'}}
@@ -16,7 +16,7 @@
      class='header-spacing'
    >
      {{t 'resources.credential-store.title_plural'}}
-      <DocLink @doc='credential-store' @iconSize='large' />
+      <DocLink @doc='credential-store' />
    </Hds::Text::Display>
    {{#if @model.doCredentialStoresExist}}
      <p>{{t 'resources.credential-store.description'}}</p>
@@ -22,7 +22,7 @@
      class='header-spacing'
    >
      {{t 'resources.credential-store.titles.new'}}
-      <DocLink @doc='credential-store' @iconSize='large' />
+      <DocLink @doc='credential-store' />
    </Hds::Text::Display>
    <p>{{t 'resources.credential-store.description'}}</p>
  </page.header>
@@ -28,7 +28,7 @@
        class='header-spacing'
      >
        {{t 'resources.global.title'}}
-        <DocLink @doc='global' @iconSize='large' />
+        <DocLink @doc='global' />
      </Hds::Text::Display>
      <p>{{t 'resources.global.description'}}</p>
    {{/if}}
@@ -40,7 +40,7 @@
        class='header-spacing'
      >
        {{t 'resources.org.title'}}
-        <DocLink @doc='org' @iconSize='large' />
+        <DocLink @doc='org' />
      </Hds::Text::Display>
      <p>{{t 'resources.org.description'}}</p>
    {{/if}}
@@ -52,7 +52,7 @@
        class='header-spacing'
      >
        {{t 'resources.project.title'}}
-        <DocLink @doc='project' @iconSize='large' />
+        <DocLink @doc='project' />
      </Hds::Text::Display>
      <p>{{t 'resources.project.description'}}</p>
    {{/if}}
@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.group.messages.add-members.title'}}
-      <DocLink @doc='group.add-members' @iconSize='large' />
+      <DocLink @doc='group.add-members' />
    </Hds::Text::Display>
    <p>{{t 'resources.group.messages.add-members.description'}}</p>
  </page.header>
@@ -17,7 +17,7 @@
      class='header-spacing'
    >
      {{t 'resources.group.title_plural'}}
-      <DocLink @doc='group' @iconSize='large' />
+      <DocLink @doc='group' />
    </Hds::Text::Display>
    {{#if @model.doGroupsExist}}
      <p>{{t 'resources.group.description'}}</p>
@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.group.titles.new'}}
-      <DocLink @doc='group' @iconSize='large' />
+      <DocLink @doc='group' />
    </Hds::Text::Display>
    <p>{{t 'resources.group.description'}}</p>
  </page.header>
@@ -17,7 +17,7 @@
      class='header-spacing'
    >
      {{t 'resources.host-catalog.title_plural'}}
-      <DocLink @doc='host-catalog' @iconSize='large' />
+      <DocLink @doc='host-catalog' />
    </Hds::Text::Display>
    {{#if @model.doHostCatalogsExist}}
      <p>{{t 'resources.host-catalog.description'}}</p>
@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.host-catalog.titles.new'}}
-      <DocLink @doc='host-catalog.new' @iconSize='large' />
+      <DocLink @doc='host-catalog.new' />
    </Hds::Text::Display>
    <p>{{t 'resources.host-catalog.description'}}</p>
  </page.header>
@@ -15,7 +15,7 @@
      class='header-spacing'
    >
      {{t 'resources.policy.title_plural'}}
-      <DocLink @doc='storage-policy' @iconSize='large' />
+      <DocLink @doc='storage-policy' />
    </Hds::Text::Display>
    <p>{{t 'resources.policy.description'}}</p>
  </page.header>
@@ -22,7 +22,7 @@
      class='header-spacing'
    >
      {{t 'resources.policy.titles.new'}}
-      <DocLink @doc='storage-policy.new' @iconSize='large' />
+      <DocLink @doc='storage-policy.new' />
    </Hds::Text::Display>
    <p>{{t 'resources.policy.description'}}</p>
  </page.header>
@@ -16,7 +16,7 @@
      class='header-spacing'
    >
      {{t 'resources.policy.title'}}
-      <DocLink @doc='storage-policy' @iconSize='large' />
+      <DocLink @doc='storage-policy' />
    </Hds::Text::Display>
    <p>{{t 'resources.policy.description'}}</p>
    <Hds::Copy::Snippet @color='secondary' @textToCopy={{@model.id}} />
@@ -17,7 +17,7 @@
      class='header-spacing'
    >
      {{t 'resources.role.title_plural'}}
-      <DocLink @doc='role' @iconSize='large' />
+      <DocLink @doc='role' />
    </Hds::Text::Display>
    {{#if @model.doRolesExist}}
      <p>{{t 'resources.role.description'}}</p>
@@ -22,7 +22,7 @@
      class='header-spacing'
    >
      {{t 'resources.role.titles.new'}}
-      <DocLink @doc='role' @iconSize='large' />
+      <DocLink @doc='role' />
    </Hds::Text::Display>
    <p>{{t 'resources.role.description'}}</p>
  </page.header>
@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.role.principal.messages.add-principals.title'}}
-      <DocLink @doc='role.add-principals' @iconSize='large' />
+      <DocLink @doc='role.add-principals' />
    </Hds::Text::Display>
    <p>{{t 'resources.role.principal.messages.add-principals.description'}}</p>
  </page.header>
@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.role.title'}}
-      <DocLink @doc='role' @iconSize='large' />
+      <DocLink @doc='role' />
    </Hds::Text::Display>
    <p>{{t 'resources.role.grant.description'}}</p>
    <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
@@ -17,7 +17,7 @@
      class='header-spacing'
    >
      {{t 'resources.role.scope.messages.manage-scopes.title'}}
-      <DocLink @doc='role.add-grant-scopes' @iconSize='large' />
+      <DocLink @doc='role.add-grant-scopes' />
    </Hds::Text::Display>
    <p>{{t 'resources.role.scope.messages.manage-scopes.description'}}</p>
  </page.header>
@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.role.scope.messages.manage-custom-scopes.title'}}
-      <DocLink @doc='role.add-grant-scopes' @iconSize='large' />
+      <DocLink @doc='role.add-grant-scopes' />
    </Hds::Text::Display>
    <p>{{t
        'resources.role.scope.messages.manage-custom-scopes.description'
@@ -41,7 +41,7 @@
        'resources.role.scope.messages.manage-org-projects.title'
        orgDisplayName=@model.orgScope.displayName
      }}
-      <DocLink @doc='role.add-grant-scopes' @iconSize='large' />
+      <DocLink @doc='role.add-grant-scopes' />
    </Hds::Text::Display>
    <p>{{t 'resources.role.scope.messages.manage-org-projects.description'}}</p>
  </page.header>
@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.role.title'}}
-      <DocLink @doc='role' @iconSize='large' />
+      <DocLink @doc='role' />
    </Hds::Text::Display>
    <p>{{t 'resources.role.principal.description'}}</p>
    <Hds::Copy::Snippet @textToCopy={{@model.role.id}} @color='secondary' />
@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.role.title'}}
-      <DocLink @doc='role' @iconSize='large' />
+      <DocLink @doc='role' />
    </Hds::Text::Display>
    <p>
      {{#if @model.role.scope.isOrg}}
@@ -18,7 +18,7 @@
        class='header-spacing'
      >
        {{t 'resources.org.title_plural'}}
-        <DocLink @doc='org' @iconSize='large' />
+        <DocLink @doc='org' />
      </Hds::Text::Display>
      {{#if @model.doScopesExist}}
        <p>{{t 'resources.org.description'}}</p>
@@ -31,7 +31,7 @@
        class='header-spacing'
      >
        {{t 'resources.project.title_plural'}}
-        <DocLink @doc='project' @iconSize='large' />
+        <DocLink @doc='project' />
      </Hds::Text::Display>
      {{#if @model.doScopesExist}}
        <p>{{t 'resources.project.description'}}</p>
@@ -31,7 +31,7 @@
        class='header-spacing'
      >
        {{t 'resources.org.titles.new'}}
-        <DocLink @doc='org.new' @iconSize='large' />
+        <DocLink @doc='org.new' />
      </Hds::Text::Display>
      <p>{{t 'resources.org.description'}}</p>
    {{else if @model.isProject}}
@@ -42,7 +42,7 @@
        class='header-spacing'
      >
        {{t 'resources.project.titles.new'}}
-        <DocLink @doc='project.new' @iconSize='large' />
+        <DocLink @doc='project.new' />
      </Hds::Text::Display>
      <p>{{t 'resources.project.description'}}</p>
    {{/if}}
@@ -15,7 +15,7 @@
      @weight='bold'
      class='header-spacing'
    >{{t 'resources.session-recording.title_plural'}}
-      <DocLink @doc='session-recording' @iconSize='large' />
+      <DocLink @doc='session-recording' />
    </Hds::Text::Display>
    <p>{{t 'resources.session-recording.description'}}</p>
  </page.header>
@@ -17,7 +17,7 @@
      class='header-spacing'
    >
      {{t 'resources.session.title_plural'}}
-      <DocLink @doc='session' @iconSize='large' />
+      <DocLink @doc='session' />
    </Hds::Text::Display>
    <p>{{t 'resources.session.description'}}</p>
  </page.header>
@@ -16,7 +16,7 @@
      class='header-spacing'
    >
      {{t 'resources.storage-bucket.title_plural'}}
-      <DocLink @doc='storage-bucket' @iconSize='large' />
+      <DocLink @doc='storage-bucket' />
    </Hds::Text::Display>
    <p>{{t 'resources.storage-bucket.description'}}</p>
  </page.header>
@@ -22,7 +22,7 @@
      class='header-spacing'
    >
      {{t 'resources.storage-bucket.titles.new'}}
-      <DocLink @doc='storage-bucket.new' @iconSize='large' />
+      <DocLink @doc='storage-bucket.new' />
    </Hds::Text::Display>
  </page.header>

@@ -16,7 +16,7 @@
      class='header-spacing'
    >
      {{t 'resources.storage-bucket.title'}}
-      <DocLink @doc='storage-bucket' @iconSize='large' />
+      <DocLink @doc='storage-bucket' />
    </Hds::Text::Display>
    <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
  </page.header>
@@ -16,7 +16,7 @@
      class='header-spacing'
    >
      {{t 'resources.target.title_plural'}}
-      <DocLink @doc='target' @iconSize='large' />
+      <DocLink @doc='target' />
    </Hds::Text::Display>
    {{#if @model.doTargetsExist}}
      <p>{{t 'resources.target.description'}}</p>
@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.target.titles.new'}}
-      <DocLink @doc='target.new' @iconSize='large' />
+      <DocLink @doc='target.new' />
    </Hds::Text::Display>
    <p>{{t 'resources.target.description'}}</p>
  </page.header>
@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.target.host-source.messages.add.title'}}
-      <DocLink @doc='target.add-host-sources' @iconSize='large' />
+      <DocLink @doc='target.add-host-sources' />
    </Hds::Text::Display>
    <p>{{t 'resources.target.host-source.messages.add.description'}}</p>
  </page.header>
@@ -22,7 +22,7 @@
      class='header-spacing'
    >
      {{t 'resources.alias.titles.new'}}
-      <DocLink @doc='alias' @iconSize='large' />
+      <DocLink @doc='alias' />
    </Hds::Text::Display>
    <p>{{t 'resources.alias.description'}}</p>

@@ -22,7 +22,7 @@
      class='header-spacing'
    >
      {{t 'resources.target.workers.edit-egress-worker-filter.title'}}
-      <DocLink @doc='worker-filters-format' @iconSize='large' />
+      <DocLink @doc='worker-filters-format' />
    </Hds::Text::Display>
    <p>{{t
        'resources.target.workers.edit-egress-worker-filter.description'
@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.target.workers.edit-ingress-worker-filter.title'}}
-      <DocLink @doc='worker-filters-format' @iconSize='large' />
+      <DocLink @doc='worker-filters-format' />
    </Hds::Text::Display>
    <p>{{t
        'resources.target.workers.edit-ingress-worker-filter.description'
@@ -22,7 +22,7 @@
      class='header-spacing'
    >
      {{t 'resources.storage-bucket.titles.new'}}
-      <DocLink @doc='storage-bucket' @iconSize='large' />
+      <DocLink @doc='storage-bucket' />
    </Hds::Text::Display>
  </page.header>

@@ -15,7 +15,7 @@
      @weight='bold'
      class='header-spacing'
    >{{t 'resources.target.enable-session-recording.messages.add.title'}}
-      <DocLink @doc='target.enable-session-recording' @iconSize='large' />
+      <DocLink @doc='target.enable-session-recording' />
    </Hds::Text::Display>
  </page.header>

@@ -20,7 +20,7 @@
      class='header-spacing'
    >
      {{t 'resources.alias.title'}}
-      <DocLink @doc='alias' @iconSize='large' />
+      <DocLink @doc='alias' />
    </Hds::Text::Display>
    <p>{{t 'resources.alias.description'}}</p>
    <Hds::Copy::Snippet @color='secondary' @textToCopy={{@model.id}} />
@@ -17,7 +17,7 @@
      class='header-spacing'
    >
      {{t 'resources.user.title_plural'}}
-      <DocLink @doc='user' @iconSize='large' />
+      <DocLink @doc='user' />
    </Hds::Text::Display>
    {{#if @model.doUsersExist}}
      <p>{{t 'resources.user.description'}}</p>
@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.user.titles.new'}}
-      <DocLink @doc='user' @iconSize='large' />
+      <DocLink @doc='user' />
    </Hds::Text::Display>
    <p>{{t 'resources.user.description'}}</p>
  </page.header>
@@ -17,7 +17,7 @@
      class='header-spacing'
    >
      {{t 'titles.workers'}}
-      <DocLink @doc='worker' @iconSize='large' />
+      <DocLink @doc='worker' />
    </Hds::Text::Display>
  </page.header>

@@ -52,10 +52,7 @@
                    (group-by 'key' filter.allowedValues)
                    as |key tags|
                  }}
-                    <dropdown.section
-                      @title={{key}}
-                      @icon='flight-icons/svg/tag-16'
-                    />
+                    <dropdown.section @title={{key}} @icon='tag' />
                    <form.checkboxGroup
                      @name={{key}}
                      @items={{tags}}
@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.worker.titles.new'}}
-      <DocLink @doc='worker' @iconSize='large' />
+      <DocLink @doc='worker' />
    </Hds::Text::Display>
  </page.header>
  <page.body>
@@ -23,7 +23,7 @@
      class='header-spacing'
    >
      {{t 'resources.worker.tags.create.title'}}
-      <DocLink @doc='worker.create-tags' @iconSize='large' />
+      <DocLink @doc='worker.create-tags' />
    </Hds::Text::Display>
    {{t 'resources.worker.tags.create.description'}}
    <Hds::Link::Inline @color='secondary' @href={{doc-url 'worker'}}>
@@ -49,8 +49,7 @@ export const FIELD_NEW_GRANT = 'form:nth-child(1) [name="grant"]';
 export const FIELD_NEW_GRANT_ADD_BTN = 'form:nth-child(1) [type="submit"]';
 export const FIELD_GRANT = 'form:nth-child(2) [name="grant"]';
 export const FIELD_GRANT_VALUE = 'ids=123,action=delete';
-export const FIELD_GRANT_REMOVE_BTN =
-  'form:nth-child(2) button[type="button"]';
+export const FIELD_GRANT_REMOVE_BTN = 'form:nth-child(2) button[type="button"]';
 export const GRANTS_FORM = 'form:nth-child(2)';
 // We need to use a different selector for the grants form because the
 // grants form has multiple submit buttons