(Angular 13) Tooltip Text Icon - Misaligned with the labels

[wonko-gsa]

RE: IAEMOD-6641

1. We've updated @gsa-sam packages as below:

    "@gsa-sam/components": "13.0.1",
    "@gsa-sam/sam-formly": "13.0.1",
    "@gsa-sam/sam-material-extensions": "13.0.1",
    "@gsa-sam/sam-styles": "0.0.147",

• Other @gsa-sam packages info, FYI:

    "@gsa-sam/layout": "13.0.0-beta.1",
    "@gsa-sam/layouts": "13.0.0-beta.0",
    "@gsa-sam/ngx-uswds": "13.0.0-beta.1",
    "@gsa-sam/ngx-uswds-icons": "13.0.0-beta.2",
    "@gsa-sam/shared": "12.0.38",

2. Screenshots:

(In the screenshots, the left side is localhost which is after the packages updated, and the right side is Comp before the update)

2a. Under Exclusions Type, the tooltip icons for Agency Exclusions and My Exclusions looks misaligned:

3. Here is formly config:

3a. For #2a above:

    {
      key: 'requestTypesOptions',
      templateOptions: { group: 'panel' },
      fieldGroup: [
        {
          key: 'requestType',
          id: 'requestType',
          type: 'radio',
          defaultValue: 'myexclusions',
          templateOptions: {
            label: 'Exclusions Type',
            hideOptional: true,
            options: [
              // tslint:disable-next-line: max-line-length
              { label: 'Agency Exclusions', value: 'myagencyexclusions', tooltipText: 'Search results will contain all Agency Exclusions.' },
              { label: 'My Exclusions', value: 'myexclusions', tooltipText: "Search results will contain all your Exclusions." }
            ],
            change: (field, $event) => {
              this.applyFilters(field);
            }
          },
          hooks: {
            onInit: (field: FormlyFieldConfig) => {
              if (this.queryParams.requestType != null) {
                field.formControl.setValue(this.queryParams.requestType);
              }
            }
          }
        }
      ]
    },

[cwolf10]

Resolved with #594