-
Notifications
You must be signed in to change notification settings - Fork 1
v2.0.0
The 2.0.0 update is pretty significant and may contain breaking changes, so this page was set up to document primary steps to be taken by the PCP dev team to implement changes and new features.
- Short Answer: https://github.com/USDA-FSA/pcp/milestone/1?closed=1.
- Detailed answer: below, grouped as New features or Updated items.
I would tackle the updates/changes first to avoid conflicts - most are very simple - before diving into the new features.
- Sharepoint UX Prototype directory
- or PCP repo's Releases
Follow the steps listed on the Wiki page fsa-style dependency
Do NOT do the below until you've successfully updated fsa-style. The below "Updated" items below are pretty simple, often just search-and-replace.
The general rule of <a> vs <button>: if it goes somewhere, it's an <a>; if it invokes an action, it's a <button>. However, SPA by design can break those semantics significantly. So for those instances where it should look like a link, but act like a button, then go ahead and make it a button. For PCP, I suppose you can also define that as "if the <a> doesn't have a valid href value but needs to look like a link, do the below."
The best example is the Name column in Settings. There may be others in the app, so consider doing the below where necessary.
Replace...
<a href="link.html">text</a>...with...
<button type="button" class="fsa-btn fsa-btn--flat">text</button>Similar in nature to #1 above, but specific to these two components. Each item in Content Tabs and Stepped Tabs can be either an <a> or <button>.
Content Tabs: instead of...
<a class="fsa-content-tabs__label" href="#HRW" title="Hard Red Winter Wheat">
<span class="fsa-content-tabs__label-text">HRW</span>
</a>...it would now be...
<button class="fsa-content-tabs__label" type="button" title="Hard Red Winter Wheat">
<span class="fsa-content-tabs__label-text">HRW</span>
</button>Stepped Tabs: instead of...
<a class="pcp-stepped-tabs__label pcp-stepped-tabs__label--active" href="workflow_mapping.html">
<span class="pcp-stepped-tabs__status pcp-stepped-tabs__status--current"></span>
Adjustments
</a>...it would now be...
<button class="pcp-stepped-tabs__label pcp-stepped-tabs__label--active" type="button">
<span class="pcp-stepped-tabs__status pcp-stepped-tabs__status--current"></span>
Adjustments
</button>I goofed, failing to make each Rift Marker an actionable <button>.
NOTE: the below does NOT apply to the large variation contained within .pcp-rift-detail.
Change...
<div class="pcp-marker pcp-marker--[variation]">
<div class="pcp-marker__value">#.##</div>
<div class="pcp-marker__pinpoint"></div>
</div>...to...
<button class="pcp-marker pcp-marker--[variation]" type="button">
<span class="pcp-marker__value">#.##</span>
<span class="pcp-marker__pinpoint"></span>
</button>Add fsa-btn--large to pcp-title-action-bar__action, resulting in...
<button disabled="" class="fsa-btn fsa-btn--primary fsa-btn--large pcp-title-action-bar__action" type="button">Complete Discovery</button>From...
<span class="fsa-badge fsa-badge--[variation]" title="foo">#</span>...to...
<button type="button" class="fsa-badge fsa-badge--[variation]" title="foo">#</span>Nearly every data table in the experience will benefit from a sticky header row. Search throughout the 2.0.0 ZIP's templates for pcp-table__th--sticky to figure where to place them. There's probably 1 or 2 tables purposely without it.
The best examples are those in the new Review phase tables, view its short screencast.
Generally...
<th class="pcp-table__th pcp-table__th--sticky" scope="col">text</th>NOTE: they are almost always paired with pcp-table__th. If that's missing, and is in the UX Prototype's HTML, then add it.
Newly-delivered design features.
Add labels
- https://github.com/USDA-FSA/pcp/issues/9 and https://github.com/USDA-FSA/pcp/issues/38
- Screencast
- UX Prototype:
Add Empty Adjustments Panel