4.x button updates

[GaryRidgway]

Resolves #706
Resolves #710

To test

• check to see that the transparent option is present, and that the transparent borderless option has link underlining.
• test that going to font awesome and copying an icon (An example icon is here, copy everything in the <i> tag)
• Test that the full width option is available and working properly
• check that the borderless option works for both the card and button
• Test background color combinations, if possible 4.x button updates #716 (comment)

[pyrello]

@GaryRidgway It seems like the last thing you need to do here is write up testing instructions.

[quamsta]

I'll likely do a test run on adding this to the Brand Icon Browser today, not sure if that counts as a full review, but I'll put anything of note in here.

[quamsta]

@pyrello , @GaryRidgway does the building/compiling of the uids module's dist/ folder happen during a GitHub action? I attempted to import the components in the Brand Icon Browser, but I quickly realized that the statement I was using:

import { UidsBrandBar, UidsButton } from "uids";

...was still importing the old version of the UidsButton component. Does the dist/ folder need to be built in the 4.x-button-updates branch or will it happen automatically when it's merged into 4.x?

[pyrello]

@quamsta This process is not automated yet :|

Here is the relevant issue: #100. Running yarn build should take care of it. Sorry we forgot to do this the other day.

[quamsta]

@pyrello All good! I attempted to run yarn install and yarn build within Icon Browser's node_modules/uids folder, which did succeed, but upon trying to use the components, I received this error:

app.js:1201 Uncaught TypeError: Cannot read properties of null (reading 'isCE')
    at renderSlot (runtime-core.esm-bundler.js?9feb:2947:1)
    at Proxy._sfc_render (uids.es.js?175d:1:1)
    at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:895:1)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5059:1)
    at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
    at setupRenderEffect (runtime-core.esm-bundler.js?d2dd:5185:1)
    at mountComponent (runtime-core.esm-bundler.js?d2dd:4968:1)
    at processComponent (runtime-core.esm-bundler.js?d2dd:4926:1)
    at patch (runtime-core.esm-bundler.js?d2dd:4518:1)
    at mountChildren (runtime-core.esm-bundler.js?d2dd:4714:1)

Which I Googled around for and found this post from: vuejs/core#4344

That's because you have two distinct copies of the Vue package being used, one in each package.

Vue uses a global singleton to track the current rendering instance - having more than one copy included will inevitably lead to such issues.

So I assumed I somehow duplicated or otherwise blew up my local UIDS components/package by attempting to run yarn build inside of node_modules, but I'm not sure.

[bspeare]

Changes that need to be documented

• The major change in this that we need capture in our changelog is that buttons using bttn bttn--outline bttn--tertiary like on https://tippie.uiowa.edu/kira-price-story-undergraduate will render with a white background instead of being transparent. The button classes would need to be changed to bttn bttn--transparent like on https://tippie.uiowa.edu/iowa-mba/curriculum/dual-degrees where the sections alternate between background colors.
• Additionally, we will need to change the default card button classes to bttn bttn--transparent bttn--sans-serif.
• bttn__apply has been removed.
• bttn__link has been removed bttn borderless bttn--transparent bttn--sans-serif should be used as a replacement.

[bspeare]

Can we figure out a way to test these buttons with multiple background classes in this pr? I've been working with https://uids.brand.uiowa.edu/branches/feature_button_tertiary_fixes/components/preview/kitchen-sink.html to test, but it is not ideal.

[bspeare]

Should we add #714 to _border.scss here?

[bspeare]

Did we also want to remove the BEM nesting on https://github.com/uiowa/uids/blob/2a8460641aaf054fb23cdbe04e1d231de74f422c/src/components/button/button.scss?

[pyrello]

bttn--apply has been removed. It is only used in viewbooks and perhaps we should move it to https://github.com/uiowa/vuejs-site-template?

What is bttn--apply doing?

[bspeare]

I thought it was used in the viewbooks but I guess not. I would guess I added it for a uiowa.edu header button that is no longer in use.

[GaryRidgway]

it is used on viewbooks to add the proper icon to an apply button
this is live on the admissions viewbook

[GaryRidgway]

it serves the same functionality as bttn--visit, bttn--ask, and bttn--connect

[bspeare]

@GaryRidgway I updated the class name in #716 (comment). It is a different class than the viewbook example.

[bspeare]

I removed the BEM nesting and also removed the bttn--link modifier and added a entry for it in #716 (comment).

[GaryRidgway]

Future work:

• remove medium option
• add the option to align the icon left.
• remove serif option

[bspeare]

Should we remove this serif option?

[quamsta]

Hey all, these buttons are looking pretty fresh. I was able to use the latest commit from this branch in the Icon Browser and tested several variations and they're all looking pretty nice, landed on tertiary, small:

I'm going to approve this since it looks great on my end, but anyone should feel free to add their own review/approval here before this gets merged. Thanks everyone!

[pyrello]

Should we remove this serif option?

I thought we specifically decided to add that. Do you want to not have it anymore?

[bspeare]

@pyrello I don't see us using the serif font any time soon. Maybe we could shelve it for now?

[quamsta]

Approving this because apparently my old review got stale!