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
Home Page: https://gsa.github.io/sam-styles/
License: Other
We're using Fractal to generate an interactive component library for sam-styles. You can run it locally after npm install
with:
npm start
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>
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.
See mockups for system accts / registration stepper flow.
"@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",
formly-field {
display: block;
margin-top: 1.5rem;
}
RE: IAEMOD-6641
"@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",
"@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",
(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.
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);
}
}
}
}
],
};
"@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",
2a. Under Exclusions Type, the tooltip icons for Agency Exclusions and My Exclusions looks misaligned:
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);
}
}
}
}
]
},
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:
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:
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:
Remove the hardcoded values for the Icons under the sds-filter
This is to align with latest USWDS version.
See: https://designsystem.digital.gov/templates/form-templates/
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
"@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",
formly-form .usa-form-group {
margin-top: 0!important;
}
and
.margin-y-0 {
margin-top: 0!important;
margin-bottom: 0!important;
}
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
];
update sam-styles with uswds3.3 with ngx-uswds library
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.
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:
In selection panel, between options there is a double border. This appears because there is a top and bottom border on all items.
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:
RE: IAEMOD-6641
"@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",
"@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",
(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:
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);
}
}
}
}
]
},
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
.h6 and side nave font was bold.
Changed it so semi bold
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;
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.