Standardize secondary buttons (text, outlined),

[usingtechnology]

Try for only one Primary per section/form.

For BC Gov our secondary buttons are supposed to be outlined and text. So if there are no objections, I'd like to put this in place. It is much easier to set on the VUE components themselves than to attempt via SASS overrides or CSS.

We may want to set a specific secondary color for our default theme. The default color is #424242 which may be too dark?
For our BC theme, we are setting secondary = primary. This shouldn't be a problem until we use secondary for another purpose.

Signed-off-by: Jason Sherman jsherman@parcsystems.ca

Default Look and Feel

BC Gov Look and Feel

[etschelp]

Generally I have no objections. Since the BPA has no styleguide this might even help us to tidy things up. But,

1. If we are using BCGov's styleguide we should make it available at the BPA somewhere and also adjust it so that developers have a idea what is going on
2. In the settings we have a color picker, if we introduce a secondary color those two might clash
3. I'm no UX expert, but my personal impression is that the outlined button is very close to a regular form element so one might miss it easily

[usingtechnology]

All the colors are in the theme, so that is fully configurable by the deployment team. I agree, having a user select multiple colours is asking not great. I also agree about the outlined button, previously, BC Gov used the secondary color for secondary buttons (in our case that is like a yellow gold that matches up with the logo color). I don't know when they changed it or why, but probably has to do with color blindness and not relying on color to show secondary functions.

The real tricky part is that it is not CSS to change the button styles but attributes on the VUE components, so changes are a lot of work.

[etschelp]

When I look at the screenshots we should probably also set secondary = primary color in the default theme. I think it looks cleaner. It's too bad that the outline is not css, because like this it can be easily missed when someone adds a secondary button and does not know about any style guides. On the other hand if secondary = primary then the secondary button looks like a primary and it becomes obvious that something is not right.

[usingtechnology]

we could try having our own "secondary" button class. Perhaps that is better? So instead of <v-btn color="secondary" text outlined ... /> we could just do <v-btn class="secondary" ../>. We miss some of the built-in Vuetify attributes, but could be more flexible way of adjusting button styles than using the Vuetify attributes text outlined etc. I will explore that and we could do the same for primary buttons.

[etschelp]

Would it make sense to write our own button component? Then we would only have to change that one and it could also plugin additional behavior like custom styles if set globally.

[usingtechnology]

Ha, the exact same thought I had this morning. Ok, I will take a look at that. I was thinking that would be something we had control over like checking the ux configuration properties. So BCGov could deploy with something like

ux:
  buttons:
    primary:
      solid: true
      outlined: false
      text: false
      color: "#003366"
  secondary:
    solid: false
    outlined: true
    text: true
    color: "#003366"

[usingtechnology]

I did add a new component that can read the runtime configuration. This allows bcgov to have a configuration that has outlined and text, while the default secondary button would just be text. I made the default primary button be solid.

The new component extends VBtn so it acts identically except that it looks for runtime configuration and will add set the text and outlined properties as needed. So we don't have to have those set in the Vue code.

This is the bcgov configuration:

  ux:
    buttons:
      primary:
        text: false
        outlined: false
      secondary:
        text: true
        outlined: true

To use the new component:

<v-bpa-button color="secondary" @click="cancel()">Cancel</v-bpa-button>
<v-bpa-button color="primary" @click="save()">Save</v-bpa-button>

[etschelp]

This is very cool. So now the default secondary style looks like before, the default from vuetify? I'm fine with either one as the default. Outlined with primary = secondary, or solid with the secondary color. I'm not sure if there is a secondary default color in the project. So maybe the bcgov look is the cleaner solution anyway and we should make it the default.

[domwoe]

Second that! Great work!

I'd be also fine with your look and feel as the default and I think setting primary = secondary is good idea for now.

The color picker was a quick fix to make instances distinguishable if you do demos with multiple instances. The color is currently only stored in localStorage.

[usingtechnology]

We can adjust the default theme (in Vuetify.js) to be whatever works best for you guys. BC Gov, the only reason I have secondary=primary is because of the design standard for the buttons. Previously secondary was a completely different color, and the design standard used solid colors for all buttons.