gsa/sam-styles

SAM Styles

SAM Styles

Fractal

We're using Fractal to generate an interactive component library for sam-styles. You can run it locally after npm install with:

npm start

sam-styles's Issues

Loading animation is broken

Found in the Entity MFE using @gsa-sam/sam-styles 0.0.151. The loading animations are not working. The boxes are displayed but there is no animation. Looking at the generated styles.css, the animation-name is not matching in case to the @keyframes name (placeHolderShimmer vs. placeholderShimmer). When I manually update the @keyframes name to placeHolderShimmer using Dev Tools in Chrome the animation starts working.

Example html: <div class="sds-load grid-row margin-top-2"><div class="grid-col-12 sds-load__content height-card-lg"></div></div>

Generated styles.css in Chrome browser:

Source file in node_modules:

Search fixed max width

Fixed max-width (45 rem) in search is causing unaligned content on larger tablets. For example, here is a screenshot of the Assistance Listings landing page in Sam Prototype:

Can the fixed width be removed? If not, setting it to a USWDS max-width variable would allow surrounding blocks (ie: advanced search) to remain aligned in MFEs if the max width size changes.

Create pill button style variant

See mockups for system accts / registration stepper flow.

Sam-Styles v3: step indicator color

(Angular 13) Applies to Formly From - Margin top for address fields are bigger than it used to be

1. We've updated to Angular 13 and @gsa-sam packages as below:

    "@gsa-sam/components": "13.0.0-beta.3",
    "@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/sam-formly": "13.0.0-beta.3",
    "@gsa-sam/sam-material-extensions": "13.0.0-beta.3",
    "@gsa-sam/sam-styles": "0.0.145",
    "@gsa-sam/shared": "13.0.0-beta.1",

2. Found that the spaces between address fields are bigger than they are used to be.

• Notes: The right side is COMP without the updates, and the left side is localhost with the updates in the screenshot.

a,

b,

3. It seems those changes are coming from updating CSS styles below.

• Notes: The right side is COMP with the updates, and the left side is MINC without the updates in the screenshot.

formly-field {
    display: block;
    margin-top: 1.5rem;
}

4. Here is a link of code for formly config (line 136 - line392)
   https://github.helix.gsa.gov/GSA-IAE-APPS/sam-frontend-entity/blob/integration-42.3/apps/entity-tier2/src/app/get-entity-id-V2/entity-form-V2/entity-form-V2.component.ts#L136-L392

(Angular 13) Radio Filters - Margin Issue

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 55 Comp before the update)

2a. Exclusions Type label's bottom margin is small.

2b. i. Expiration Date and ii. Address Update labels are close to the their first option.

3. Here are 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);
              }
            }
          }
        }
      ]
    },

3b. For #2b-i. Expiration Date above:

  public expirationDateConfig = {
    key: 'expirationDate',
    templateOptions: { label: 'Expiration Date', group: 'accordion' },
    fieldGroup: [
      {
        key: 'expirationDays',
        id: 'exp',
        type: 'radio',
        templateOptions: {
          label: 'Expiration Date',
          hideOptional: true,
          defaultValue: null,
          options: [
            { label: '30 Days', value: '30' },
            { label: '60 Days', value: '60' },
            { label: '90 Days', value: '90' },
            { label: 'All Registrations', value: null }
          ],
          change: (field) => {
            this.applyFilters(field);
          }
        },
        hooks: {
          onInit: (field: FormlyFieldConfig) => {
            if (this.queryParams.expirationDays != null) {
              field.formControl.setValue(this.queryParams.expirationDays);
            }
          }
        }
      }
    ],
  };

3c. For #2b-ii. Address Update above:

  fedHsFieldAddressUpdate = {
    key: 'addressUpdateFlag',
    templateOptions: { label: 'Address Update', group: 'accordion' },
    fieldGroup: [
      {
        key: 'addressUpdateFlag',
        id: 'addr',
        type: 'radio',
        templateOptions: {
          label: 'Address Update',
          hideOptional: true,
          defaultValue: null,
          options: [
            { label: 'Update Required', value: 'Y' },
            { label: 'Update Not Required', value: 'N' },
            { label: 'All Registrations', value: null }
          ],
          change: (field) => {
            this.applyFilters(field);
          }
        },
        hooks: {
          onInit: (field: FormlyFieldConfig) => {
            if (this.queryParams.addressUpdateFlag != null) {
              field.formControl.setValue(this.queryParams.addressUpdateFlag);
            }
          }
        }
      }
    ],
  };

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

1. Currently we are on @gsa-sam packages versions as below:

    "@gsa-sam/components": "13.0.7",
    "@gsa-sam/layout": "13.0.4",
    "@gsa-sam/layouts": "13.0.0",
    "@gsa-sam/ngx-uswds": "13.0.0-beta.1",
    "@gsa-sam/ngx-uswds-icons": "13.0.0-beta.2",
    "@gsa-sam/sam-formly": "13.0.7",
    "@gsa-sam/sam-material-extensions": "13.0.7",
    "@gsa-sam/sam-styles": "0.0.151",
    "@gsa-sam/shared": "13.1.13",

2. Screenshot:

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

3. Formly config:

3a. Here is formly config 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);
              }
            }
          }
        }
      ]
    },  

4. Notes:

• Previously this issue is reported:
  • in FWG Google space on Fed 2, 2023
  • by Github issue: #590

top-margin issue on formly-field

Sam-styles v0.0.144 package includes an addition of top-margin to formly fields. This is causing our formly fields to display with large gaps in between each other. Screenshots attached from T2 workspace and Enter Entity Information page.

Sam-Styles v3: fix button-group

Uswds3.3: Button hover changes

Fix the uswds 3.3 primary light hover behaviour
3) Base button color is much darker
11) Font weight of a button text changes when hovering
12) For disabled:

• border line disappears when hovering
• differences on bg color, text color

13. Font weight is smaller. Differences on bg color

Footer logo Alignment issue

[UEI 2.0] Status color circle is distorted with long status names

For UEI 2.0 the status names on the Tier 2 workspace are being updated to longer names, e.g., "Submitted" to "Submitted Registration". This is causing the color circles for the status to be distorted.

Code sample:
<span class="sds-tag sds-tag--outline"> <em class="sds-status sds-status--sm sds-status--blue"></em> <span>Submitted Registration</span> </span>

These 3 are more of an oval shape instead of circle:

This is what the circle normally looks like:

New Styles Beta - Button Colors

Current packages:
@gsa-sam/[email protected]
@gsa-sam/[email protected]

Is your feature request related to a problem? Please describe.
The updated scss files drastically changed the colors for buttons, as well as changed the sizing.

What is on the uswds branch in sam-frontend-content (local only)

Describe the desired solution
The buttons should look like the below picture:

Additional context
This is the HTML for this section :

USWDS: sds-alert icon css

Remove the hardcoded values for the Icons under the sds-filter

v0.0.131 contains breaking css for external links

Sam-Styles v3: fix process-list

Style Issue for New Entity Review Process for accept and reject button's

Below is the selector and value that will need to be increased
.sds-list--icon>li
max-width: 88ex;

Project : Entity MFE
Component: generic-standalone

Update form labels to indicate required by adding a red asterisk (*), optional forms will still show (optional)

This is to align with latest USWDS version.
See: https://designsystem.digital.gov/templates/form-templates/

Sam-Styles v3 - image/icon path variable issues

Card Body Grid

Landing page example with card body grid is current misaligned (list items with icons) and isn't responsive:

RE: Angular 13 update - Warnings started to appear after updating

After updating to Angular 13 and @gsa-sam packages (as below), I see the following warnings started to appear when running localhost npm run start and console in developer's tool in browser.

a. @gsa-sam packages we've updated:

    "@gsa-sam/components": "13.0.0-beta.3",
    "@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/sam-formly": "13.0.0-beta.3",
    "@gsa-sam/sam-material-extensions": "13.0.0-beta.3",
    "@gsa-sam/sam-styles": "0.0.145",
    "@gsa-sam/shared": "13.0.0-beta.1",

b. Warnings in CMD and console in a browser:

Warning: 35 rules skipped due to selector errors:
  .usa-paragraph + * -> Cannot read property 'type' of undefined
  .usa-display + * -> Cannot read property 'type' of undefined
  .usa-display + * -> Cannot read property 'type' of undefined
  .usa-display + * -> Cannot read property 'type' of undefined
  .usa-prose > p + * -> Cannot read property 'type' of undefined
  .usa-prose > .p + * -> Cannot read property 'type' of undefined
  p + * -> Cannot read property 'type' of undefined
  .p + * -> Cannot read property 'type' of undefined
  .usa-prose > h1 + * -> Cannot read property 'type' of undefined
  .usa-prose > h2 + * -> Cannot read property 'type' of undefined
  .usa-prose > h3 + * -> Cannot read property 'type' of undefined
  .usa-prose > h4 + * -> Cannot read property 'type' of undefined
  .usa-prose > h5 + * -> Cannot read property 'type' of undefined
  .usa-prose > h6 + * -> Cannot read property 'type' of undefined
  h1 + * -> Cannot read property 'type' of undefined
  h2 + * -> Cannot read property 'type' of undefined
  h3 + * -> Cannot read property 'type' of undefined
  h4 + * -> Cannot read property 'type' of undefined
  h5 + * -> Cannot read property 'type' of undefined
  h6 + * -> Cannot read property 'type' of undefined
  .usa-graphic-list__heading + * -> Cannot read property 'type' of undefined
  .usa-hero__heading + * -> Cannot read property 'type' of undefined
  .usa-icon-list__title + * -> Cannot read property 'type' of undefined
  .usa-nav__submenu .usa-nav__submenu-item + * -> Cannot read property 'type' of undefined
  .usa-nav__close + * -> Cannot read property 'type' of undefined
  .usa-process-list__heading + * -> Cannot read property 'type' of undefined
  section h1 + * -> Cannot read property 'type' of undefined
  section h2 + * -> Cannot read property 'type' of undefined
  section h3 + * -> Cannot read property 'type' of undefined
  section h4 + * -> Cannot read property 'type' of undefined
  section h5 + * -> Cannot read property 'type' of undefined
  section h6 + * -> Cannot read property 'type' of undefined
  .sds-card__header .sds-card__title + * -> Cannot read property 'type' of undefined
  .sds-toolbar + * -> Cannot read property 'type' of undefined
  .sds-toolbar + * -> Cannot read property 'type' of undefined

Also attaching a screenshot:

Sam-Styles- Create new Default for Alert

(Angular 13) Applies to Formly Filters - A space between a border and a first list item is smaller than it used to be.

1. We've updated to Angular 13 and @gsa-sam packages as below:

    "@gsa-sam/components": "13.0.0-beta.3",
    "@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/sam-formly": "13.0.0-beta.3",
    "@gsa-sam/sam-material-extensions": "13.0.0-beta.3",
    "@gsa-sam/sam-styles": "0.0.145",
    "@gsa-sam/shared": "13.0.0-beta.1",

2. And I found that a space between a border and a first list item is smaller than it used to be which are in following places in the screenshot:

• Notes: The right side is COMP without the updates, and the left side is localhost with the updates in the screenshot.

a.

b.

c.

3. It seems those changes are coming from updating CSS styles below. Those changes are applied to other places as well, however it seems except for list-items with checkboxes, they look okay IMO.

• Notes: The right side is COMP with the updates, and the left side is MINC without the updates in the screenshot.
  

formly-form .usa-form-group {
    margin-top: 0!important;
}

and

.margin-y-0 {
    margin-top: 0!important;
    margin-bottom: 0!important;
}

4. Here is code snippet for formly config:

fedHsFields: FormlyFieldConfig[] = [
    this.fedHsFieldKeyword,
    this.searchEntityConfig,
    {
      key: 'status',
      templateOptions: { label: 'Entity Status', group: 'accordion' },
      fieldGroup: [
        {
          key: 'statusId',
          id: 'status',
          type: 'multicheckbox',
          templateOptions: {
            label: 'Entity Status',
            labelClass: 'usa-sr-only',
            hideOptional: true,
            options: [
              {
                key: '1,2',
                value: 'Work in Progress Registration'
              },
              {
                key: '3',
                value: 'Submitted Registration'
              },
              {
                key: '4',
                value: 'Active Registration'
              },
              {
                key: '7',
                value: 'Inactive Registration'
              },
              {
                key: '12',
                value: 'ID Assigned'
              }
            ]
          },
          hooks: {
            onInit: (field: FormlyFieldConfig) => {
              if (this.queryParams.statusId != null) {
                const stats = this.queryParams.statusId.split(',');
                const val = {};
                for (const stat of stats) {
                  if (stat === '1' || stat === '2') {
                    val['1,2'] = true;
                  } else {
                    val[stat] = true;
                  }
                }
                field.formControl.setValue(val);
              }
            }
          }
        }
      ],
    },
    this.expirationDateConfig,
    this.fedHsFieldAddressUpdate
  ];

Sam-Styles v3: fix typesetting

Integrate sam-styles USWDS3.3 for ngx uswds

update sam-styles with uswds3.3 with ngx-uswds library

Feature: Create intro/guidance for alerts

For the alerts section, add an introduction and guidance section to define when to use an alert, which type to select, and how it would show up in different layouts.

Icon Lists

Icon lists are misaligned (icons should be at the start of list items)

sds-button

When combining the sds-button--circle the inner icon is not centered within the circle but slightly above center. This is also exaggerated when usa-button--base and usa-button--small classes is added to the class, but that may be coloring only.

sds-button--circle with no other classes:

sds-button--circle + usa-button--base:

sds-button--circle +usa-button--base + sds-button--small

Sam-Styles v3: fix pagination

Sam-Styles v3: fix list icons

Selection Panel Double Border

In selection panel, between options there is a double border. This appears because there is a top and bottom border on all items.

Deprecate existing default and block alert pages and move to bottom

New Styles Beta - Spacing

Current packages:
@gsa-sam/[email protected]
@gsa-sam/[email protected]

What is on the uswds branch in sam-frontend-content (local only):
It appears that icons are not aligned centrally, and there is slightly more space between lines of links in the new uswds branch.

Describe the desired solution
The spacing should look like what is currently in comp (/content/contract-data is where I grabbed the examples)

Additional context
The html for the first link generated with the new libs:

The html for the first link generated in comp:

Sam-Styles v3: fix button-row

Contrast error 508 testing

I was using WAVE tool to do 508 testing and saw this contrast error for Select a Role drop down field.

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

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);
              }
            }
          }
        }
      ]
    },

Sam-Styles v3: stacked icon

Refactor alerts to make expanded the default (usa-alert)

video player issue

• Video player component does not display the mute, closed caption, and toggle full screen display (they can still be clicked and tabbed through but not visible to the user)
• Attached the attached screenshot
  

usa-checkbox class in formly adds a white background

With USWDS 2.0 update in sam-styles, formly checkbox now has a white background being added to it as part of usa-checkbox class.
While the background may not be easy to spot in SDS Library website, it is very prominent in Content MFE due to being on top of banner image.

Sam-Styles v3: fix Govt Banner

Sam-Styles-Fix Inconsistencies in styles across all demos

Sam-Styles v3: fix range-slider

Sam-Styles v3: search input width

IE Accordion

Accordion icon displays with vertical bar in certain situations when opening and closing accordion with IE.

Sam-Styles v3- Move recent changes to the new version

Filters Dialog CSS Update

There are a few issues with toolbar dialog that needs to be resolved:
The dialog does not cover fill height of the screen
The cancel and apply buttons should be sticky on dialog header / footer while just the body scrolls. Currently, the entire modal scrolls. Added screenshot below of current look for the filters dialog

Sam-Styles v3: Add JS to demos

Sam-Styles v3: fix side-nav font weight

.h6 and side nave font was bold.
Changed it so semi bold

[UEI 2.0] Add style classes for new statistics (widget bubble) colors

We have new status colors defined in Confluence for UEI 2.0 for the Tier 1 Entity Management widget bubbles. Can the following statistics styles please be added? I used specific names like 'active-reg' for our use case but these can be made more generalized if desired. Thank you.

.sam.statistics .active-reg.statistic > .value > .circular {
    background: #E3F5E1;
    border: 1px solid #00A91C;
}
.sam.statistics .active-reg.statistic:hover > .value > .circular {
    color: white;
    background: #00A91C;
}

.sam.statistics .submitted-reg.statistic > .value > .circular {
    background: #E7F6F8;
    border: 1px solid #1A4480;
}
.sam.statistics .submitted-reg.statistic:hover > .value > .circular {
    color: white;
    background: #1A4480;
}

.sam.statistics .wip-reg.statistic > .value > .circular {
    background: #E7F6F8;
    border: 1px solid #009EC1;
}
.sam.statistics .wip-reg.statistic:hover > .value > .circular {
    color: white;
    background: #009EC1;
}

.sam.statistics .idassigned-reg.statistic > .value > .circular {
    background: #FBDCFF;
    border: 1px solid #B69FFF;
}
.sam.statistics .idassigned-reg.statistic:hover > .value > .circular {
    color: white;
    background: #B69FFF;
}

.sam.statistics .pendingidassigned-reg.statistic > .value > .circular {
    background: #FEF0C8;
    border: 1px solid #FBC036;
}
.sam.statistics .pendingidassigned-reg.statistic:hover > .value > .circular {
    color: white;
    background: #FBC036;
}