Bug/WP-782: Resized View Full Path link in modals

[jmcmillenmusic]

Overview

The "View Full Path" links in modals is now too big compared to the rest of the text in the modal.

Related

• WP-782

Changes

I added a modalButton style to the "View Full Path" links and used CSS to reduce its size.

Testing

1. Log in to cep.test/workbench.
2. Select a file and click on either Move or Copy.
3. Note that "View Full Path" is now more appropriately-sized.

UI

As of a9c89af

WP-782	WP-50

As of 7778ead

Notes

@wesleyboar updated UI after a9c89af.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 75.17%. Comparing base (928dc75) to head (a9c89af).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1036      +/-   ##
==========================================
+ Coverage   72.50%   75.17%   +2.66%     
==========================================
  Files         534      323     -211     
  Lines       33771    27486    -6285     
  Branches     2993     2263     -730     
==========================================
- Hits        24487    20663    -3824     
+ Misses       9086     6785    -2301     
+ Partials      198       38     -160     

Flag	Coverage Δ
javascript	75.17% <ø> (ø)
unittests	?

Flags with carried forward coverage won't be shown. Click here to find out more.

see 211 files with indirect coverage changes

[chandra-tacc]

This did not just change in portals, but also changed in the data files page

[wesleyboar]

Now that I have context (your answer, this PR, WP-782, and WP-50), I can offer better guidance.

The Goal

Change the font size of some [type="link"]/.as-link buttons, but not all; while not changing the font size of all buttons in a modal (i.e. modalButton), cuz some buttons should have the standard size (e.g. the [Modal] and [Copy] buttons).

Proposal

Do not extend <Button>. Add style in appropriate component's stylesheet. New fix needed for WP-50.

Details & Video for WP-782

1. Do not add modalButton. Do not add styles in <Button>.¹
2. Move existing font-size style in DataFilesModals.scss from .dataFilesModal .breadcrumbs to .dataFilesModal .breadcrumbs-container.
   ^{Please use 1.2rem.}

WP-782.mov

Why?

1. The font size of as-link should inherit the font-size of it's parent, because it replicates a <a> which would normally inherit the font-size of it's parent.²
2. If the breadcrumbs and the breadcrumbs button should be the same font size³ then set the font size on an ancestor element.

Details & Video for WP-50 (#986)

1. Change .root.as-link { font-size: 1rem } to font-size: inherit.
2. Add new style to CombinedBreadcrumbs.module.scss as

   .combined-breadcrumbs .breadcrumb-container button {
       font-size: 1rem;
   }

WP-50.mov

Why?

1. The font size of as-link should, by default, inherit the font-size of it's parent, because it replicates a <a> which would normally inherit the font-size of it's parent.²
2. Based on context, the style needed is specific to the component, <CombinedBreadcrumbs>, because it can style <DataFilesBreadcrumbs> without affecting modal instances of it. <CombinedBreadcrumbs> is not designed to add a class to a child component, but CombinedBreadcrumbs.module.scss can target an element (button) within a native/global class (breadcrumb-container).

Footnotes

The footnotes are for content hidden in details sections, i.e. "▸ Details & Video for …" and the "▸ Why?" within each. Click the triangle to open.

Footnotes

1. I appreciate your effort to extend <Button>, but I don't yet believe this is a use case to do so. ↩

2. "Buttons as links should be same font-size as a regular link text would be in that same location. […] So, if a regular link would be 16px in a location, then a button as link in that location should be 16px." — me answering you in #design channel thread. ↩ ↩²

3. …and other children do not exist or other children would not need larger font size yet inherit from parent… ↩

[wesleyboar]

I added videos to #1036 (review).

[jmcmillenmusic]

This did not just change in portals, but also changed in the data files page

My most recent push (with Wes' help) has fixed this.

[jmcmillenmusic]

I added videos to #1036 (review).

Huge thank you for this! I would not have thought to look in the files you referenced. I greatly appreciate it.

[wesleyboar]

@jmcmillenmusic, You're welcome. I also would not have thought to work in those files.

I found them to be suitable only because I thought to search which React components include import the components that are adding the buttons in question, and which are not. For me, learning where in the codebase a component is used to be key to understanding where styles can be applied effectively.

[wesleyboar]

Code changes look as expected. I have not re-tested yet.

[wesleyboar]

Mistakes. Some mine. I'll fix and test. Hold on a sec.

[wesleyboar]

Works.

WP-782	WP-50