• Change color to make helper darker.
• Redefine standard size from 12px to 14 px.
• Create documentation for helper text, label and hint.

According to the title, we expect the labels color to be changed from secondary-text to primary-text.

This is currently listed in the change log.

As requested by Jack on issue #78, tagging @MCatherine1994 and @jazzgrewal

Jack copypasta from Figma - July 8, 2023

Enhancement:
Increase text inputs’ label size and color contrast

Reason:
Users found the input’s labels difficult to read and distinguish

Discussed

• Users might find it better to ready and perceive the inputs’ labels if the color contrast and font size were enhanced
• We need to increase the labels’ legibility
  *Changing the font size and color could have an impact on text and color hierarchy, making it very similar to the input text and body text
  *Having a label text to the body text might not happens in some scenarios

Resolution

• We will change the label’s color style from “text-secondary” to “text-primary”
• We will text to see if this change will be enough to improve the legibility.
• If not, more changes might be needed and will be discussed further.

What changed
Labels color style

Text color will change

• was: text-secondary
• new: text-primary

Components:

• Checkbox
• Date picker
• Form
• Dropdown
• Number input
• Password input
• Radio button
• Select
• Slider
• Text input
• Text area
• Toggle

Themes:

• Light theme
• Dark theme

Participants:
Andrea Kolot
Jack Sam
Olga Liberchuk
Michelly Marsoleta
Marina Carvalho
Maria Fernanda Ferreira
Maria Eduarda Guimarães
Sabina Donnelly

change the error icon in the notification message to "x"

change the error icon globally in the design system form this:

to this:

• Discuss and define standard between toasts and banners for system notifications.
• Create documentation for best practices.

• Define standard about placeholder usage.
• Define placeholder color.
• Create documentation.

Currently we manually trigger the npm package publish pipeline whenever release-please created a new git tag version, and we want to make this trigger automatically.

Testing sprint and application

Wondering why there is a 1px height grey border between the blue header and the rest of the content. It doesn't appear in SPAR (who is currently not using this theme/repo) but it does appear in SILVA

Hi folks!

According to the title, we expect the labels color to be changed from secondary-text to primary-text.

This is currently listed in the change log.

This issue is also blocking a task for us at SPAR...

Thanks!

• Define standard for component.
• Documentate specification for read-only component.

Describe the task
Understand what issues users are running into using FREP and how they are resolved

Acceptance Criteria

• Summary of user issues by topic

Additional context
link to Jira service desk tickets: https://apps.nrs.gov.bc.ca/int/jira/browse/SD-15647?jql=text%20~%20%22frep%22

Review navegation tab inline, it needs more visual emphasis.

While using the type-family.scss file in our apps custom.scss it gives error that it cannot find the font files.

Proposal: Do we want to incorporate BC Sans 2.0's Light and Light Italic characters to our typography choices?

BC Sans 2.0 was released in July 2023. It now includes Light and Light Italic in addition to Regular and Bold from 1.0.

https://www2.gov.bc.ca/gov/content/governments/services-for-government/policies-procedures/bc-visual-identity/bc-sans

Carbon's website seems to be showing 5
https://v10.carbondesignsystem.com/guidelines/2x-grid/overview/#breakpoints

A lot of our Figma files show 6.

@DerekRoberts

Create custom stylesheet for the following components, and the custom style needs to match in the Figma Design System:

• Font
• Card
• Button
  • Primary button
  • Tertiary button
  • Ghost button
  • Danger button
  • Danger tertiary button
  • Danger ghost button
• Text input
• Checkbox
• Radio
• Tag
• Dropdown
  • Single select
  • Multi select
• Breadcrumb
• Data table
• Modal
• Notification

Also if Figma can use any version control, so we know our stylesheet is for which version of the design system

• Create walkthrough components.
• Add documentation in the design system project.

Reference link: https://www.figma.com/file/5BnF5T2ncoZVpSbCbj30Mr/FAM-mockups?type=design&node-id=3272%3A67804&mode=design&t=8jGCmq6NapuCu1Kl-1

test

• Verify and correct possible bugs from spacing between button label and icon.

The proposal is to ensure that the smallest text in FDS applications is 16px (12pt font) out of Figma and that the FDS stylesheets retain relative sizing capability where 16px is equal to 1em.

This proposal originated out of a conversation between Chantelle/Andrea (Aug 21, 2023) regarding CLIENT's external form having perhaps too many levels of hierarchy (too many different font sizes). This will be addressed in a TBD ticket.

In Team Alliance's collab session (Aug 22, 2023), Ziad brought up wanting to ensure that what comes out of Figma and gets implemented in code still retains the ability for someone's browser to go bigger or smaller based on browser preferences.

In the attached screenshot from CLIENT's external application, the small helper text is currently set at 12px font (which is 16px) with 16px vertical spacing.

Define standard for:

• Zebra style.
• Search field.
• Filter panel.
• Button positioning.

Proposal: Should landing pages be responsible responsive to device theme preferences or stay in light mode only?

Background: The designers agreed to the Theme Toggle not appearing on the landing page only appearing on the blue header (as to not have to design a toggle that would also have to show up on the white and black backgrounds of the landing pages)

For Team Silva, Jazz implemented code for all of SILVA (including the landing page) to detect device theme settings. So after the Theme Toggle decision to have landing pages be light mode only, SILVA's landing page still detects device theme settings. There is no Theme Toggle on the landing so users do not have to the option to switch the theme.

We asked Chantelle if this was a problem (Sep 7 2023). Chantelle recognized this as a feature, as opposed to a problem. Chantelle wanted Team Silva to survey other teams if they want to adopt this approach for their landing pages.

TL;DR

Topics greatly improve the discoverability of repos; please add the short code from the table below to the topics of your repo so that ministries can use GitHub's search to find out what repos belong to them and other visitors can find useful content (and reuse it!).

Why Topic

In short order we'll add our 800th repo. This large number clearly demonstrates the success of using GitHub and our Open Source initiative. This huge success means it's critical that we work to make our content as discoverable as possible. Through discoverability, we promote code reuse across a large decentralized organization like the Government of British Columbia as well as allow ministries to find the repos they own.

What to do

Below is a table of abbreviation a.k.a short codes for each ministry; they're the ones used in all @gov.bc.ca email addresses. Please add the short codes of the ministry or organization that "owns" this repo as a topic.

That's it, you're done!!!

How to use

Once topics are added, you can use them in GitHub's search. For example, enter something like org:bcgov topic:citz to find all the repos that belong to Citizens' Services. You can refine this search by adding key words specific to a subject you're interested in. To learn more about searching through repos check out GitHub's doc on searching.

Pro Tip 🤓

• If your org is not in the list below, or the table contains errors, please create an issue here.

• While you're doing this, add additional topics that would help someone searching for "something". These can be the language used javascript or R; something like opendata or data for data only repos; or any other key words that are useful.

• Add a meaningful description to your repo. This is hugely valuable to people looking through our repositories.

• If your application is live, add the production URL.

Ministry Short Codes

NOTE See an error or omission? Please create an issue here to get it remedied.

We need to enhance how typography is presented in the design system.

• Change header hierarchy.
• Review typography styles.
• Reorder from bigger to smaller sizes.
• Reduce sizes and white areas from tables.
• Review styles with developers.

Find a better solution for the release process. Fine with release-please now, but would like to know any other options. This is low priority.

• Define the behavior of search field inside a table.
• Update design system components, if necessary.
• Create documentation with defined behavior and rules.

Wait for #122 to decide if Helper Text size needs to be increased.

Getting this "Not found" error for the font family, looks like it's trying to get the assets folder from the project directory, not from our fsa theme package

Keep colour as text-primary.

The new label color is not being correctly applied, the identifier is not specific enough. This task aims to fix that.

• Remove gray border from header.

• Create a component for birth date selector.
• Create documentation.

test

No Project Lifecycle Badge found in your readme!

Hello! I scanned your readme and could not find a project lifecycle badge. A project lifecycle badge will provide contributors to your project as well as other stakeholders (platform services, executive) insight into the lifecycle of your repository.

What is a Project Lifecycle Badge?

It is a simple image that neatly describes your project's stage in its lifecycle. More information can be found in the project lifecycle badges documentation.

What do I need to do?

I suggest you make a PR into your README.md and add a project lifecycle badge near the top where it is easy for your users to pick it up :). Once it is merged feel free to close this issue. I will not open up a new one :)

TL;DR 🏎️

Teams are encouraged to favour modern inclusive phrasing both in their communication as well as in any source checked into their repositories. You'll find a table at the end of this text with preferred phrasing to socialize with your team.

Words Matter

We're aligning our development community to favour inclusive phrasing for common technical expressions. There is a table below that outlines the phrases that are being retired along with the preferred alternatives.

During your team scrum, technical meetings, documentation, the code you write, etc. use the inclusive phrasing from the table below. That's it - it really is that easy.

For the curious mind, the Public Service Agency (PSA) has published a guide describing how Words Matter in our daily communication. Its an insightful read and a good reminder to be curious and open minded.

What about the master branch?

The word "master" is not inherently bad or non-inclusive. For example people get a masters degree; become a master of their craft; or master a skill. It's generally when the word "master" is used along side the word "slave" that it becomes non-inclusive.

Some teams choose to use the word main for the default branch of a repo as opposed to the more commonly used master branch. While it's not required or recommended, your team is empowered to do what works for them. If you do rename the master branch consider using main so that we have consistency among the repos within our organization.

Preferred Phrasing

Pro Tip 🤓

This list is not comprehensive. If you're aware of other outdated nomenclature please create an issue (PR preferred) with your suggestion.

Tasks

• How to sync the repo code with the figma design system
• How to apply this design theme code to each application
  • React, Typescript -> Use Carbon React Library
  • Vue3, Typescript, what options will be?
    • carbon web component
    • other libraries?
  • In this case the application uses another library just for a specific feature, how to apply the design on top of that
• How we apply future changes to each application

SPAR lead the way on designing the style/components for displaying read-only text that is important to display to users. CLIENT subsequently followed the same style.

A good time to review and commit to or re-do the standards for read-only content.

Can we change the url/repo name to nr-fds-theme? Or is that crazy at this point?
@DerekRoberts

• Define standard for "Next", "Confirm" and "Submit" buttons if disabled or enabled with error messages.
• Define standard placement for "Submit" button.

Check if the pull request title matches the requirement for release please

This proposal originated out of a conversation between Chantelle/Andrea (Aug 21, 2023) regarding CLIENT's external form having perhaps too many levels of hierarchy (too many different font sizes with potentially hard-to-read light shades of grey).

This will require a review by all FDS teams.

For example - labels vs help text look about the same size but different and chaotic

• Create documentation for order and placement for buttons.
• Add combo-button to design system.
• Create documentation for combo-button.