[dashboard] add button.gp-link CSS class #9641

trumbitta · 2022-04-29T08:13:07Z

Description

Adds a .gp-link Tailwind class to make buttons mimic links and avoid using <a href="javascript:void(0)" ...>

To be used for anchor tags that should've been buttons because they don't really bring the user to any new location like an anchor tag usually does.

Just like #9269, this is about #3841 and its purpose is to simplify to the max #8995.

Related Issue(s)

Re #3841

How to test

launch the dashboard app
the two updated links which are now buttons should look and work just like before

Release Notes

- [dashboard]: Added a `.gp-link` Tailwind class to make buttons mimic anchor tags

laushinka · 2022-04-29T08:14:15Z

Thanks, @trumbitta! Let me loop in @gtsiolis here for this one :)

gtsiolis · 2022-04-29T10:44:40Z

Looking at this now! 👀

/werft run

👍 started the job as gitpod-build-link-button-fork.0
(with .werft/ from main)

gtsiolis · 2022-04-29T12:29:30Z

/werft run

👍 started the job as gitpod-build-link-button-fork.1
(with .werft/ from main)

gtsiolis · 2022-05-03T13:43:57Z

@trumbitta could you rebase this to main branch to fix the failing build?

gtsiolis · 2022-05-03T20:39:55Z

/werft run

👍 started the job as gitpod-build-link-button-fork.2
(with .werft/ from main)

trumbitta · 2022-05-06T08:50:20Z

components/dashboard/src/index.css

-    a.gp-link {
-        @apply text-blue-500 hover:text-blue-600  dark:text-blue-400 dark:hover:text-blue-500;
+    button.gp-link {
+        @apply bg-transparent hover: bg-transparent p-0 rounded-none;


wait a minute... where does this extra white-space between hover: and bg-transparent come from 🤔

fixing it now (also in the next selector)

@gtsiolis should be fixed now. Sorry for the hiccup, I don't really know how it happened 😮

To be used for anchor tags that should've been buttons because they don't really bring the user to any new location.

gtsiolis · 2022-05-06T09:00:49Z

/werft run

👍 started the job as gitpod-build-link-button-fork.3
(with .werft/ from main)

gtsiolis · 2022-05-06T12:10:30Z

/werft run

👍 started the job as gitpod-build-link-button-fork.4
(with .werft/ from main)

gtsiolis · 2022-05-06T12:40:42Z

/werft run 🎲

👍 started the job as gitpod-build-link-button-fork.5
(with .werft/ from main)

gtsiolis · 2022-05-06T13:35:53Z

/werft run 🎲🎲

👍 started the job as gitpod-build-link-button-fork.6
(with .werft/ from main)

trumbitta · 2022-05-06T13:41:10Z

Is werft having a bad day?

gtsiolis

Thanks for opening this PR, your patience, and caring about accessibility with replacing these links with buttons, @trumbitta! 💯

To add some background context here, the introduction of the gp-link class in #5112 initially aimed to abstract the style used for help links. 🔗

However, the long-term goal is to have a button component variant styled as a link for actions like the ones changed in this PR, instead of maintaining CSS styles in the index.css. 💡

Ideally, we'd like to introduce a button component for what we need here but I don't want to block or close this pull request since we're going to update and replace the pages affected here soon. 🚀

UX LGTM!

@laushinka could you take another look and merge this or pass this to someone on the team since this requires also an approval from the WebApp team?

gtsiolis · 2022-05-06T14:22:13Z

components/dashboard/src/projects/NewProject.tsx

@@ -493,13 +493,12 @@ export default function NewProject() {
                    <div>
                        <div className="text-gray-500 text-center w-96 mx-8">
                            Repository not found?{" "}
-                            <a
-                                href="javascript:void(0)"


praise: Nice!

gtsiolis · 2022-05-06T14:23:43Z

components/dashboard/src/projects/NewProject.tsx

@@ -493,13 +493,12 @@ export default function NewProject() {
                    <div>
                        <div className="text-gray-500 text-center w-96 mx-8">
                            Repository not found?{" "}
-                            <a
-                                href="javascript:void(0)"


suggestion(non-blocking): We have a few more actions in /plans masked as links that could benefit from this. However, I wouldn't block this from merging it as we're going to update and replace plans entirly soon.

gitpod/components/dashboard/src/settings/Plans.tsx

Lines 390 to 396 in 0895496

<a

className="text-blue-light leading-6"

href="javascript:void(0)"

onClick={() => confirmCancelDowngrade()}

>

Cancel

</a>

gitpod/components/dashboard/src/settings/Plans.tsx

Lines 452 to 458 in 0895496

<a

className="text-blue-light leading-6"

href="javascript:void(0)"

onClick={() => confirmCancelDowngrade()}

>

Cancel

</a>

...

gtsiolis · 2022-05-06T14:30:19Z

components/dashboard/src/projects/NewProject.tsx

@@ -368,9 +368,9 @@ export default function NewProject() {
                <p className="text-gray-500 text-center text-base mt-12">
                    {loaded && noReposAvailable ? "Select account on " : "Select a Git repository on "}
                    <b>{selectedProviderHost}</b> (
-                    <a className="gp-link cursor-pointer" onClick={() => setShowGitProviders(true)}>
+                    <button className="gp-link cursor-pointer" onClick={() => setShowGitProviders(true)}>
                        change


issue(non-blocking): This will slightly affect how the link style is rendered but that's minor for now.

BEFORE AFTER

Good catch 🏅 !

I guess it stems from text-sm in the Tailwind styles applied to the button element while a seems to just inherit as usual.

The upcoming button component should take it into account. If you need a volunteer for working on the component, you know where to find me 😊

laushinka · 2022-05-11T15:25:55Z

@trumbitta I need to stop apologizing to you and just review faster! This fell through the cracks of my reviewing cycle 🙇🏻‍♀️

LGTM

trumbitta · 2022-05-11T15:31:38Z

@trumbitta I need to stop apologizing to you and just review faster! This fell through the cracks of my reviewing cycle 🙇🏻‍♀️

LGTM

🙏 @laushinka I'm yet to find anything you should apologize for. If anything, I owe you because sometimes I just find bits of your code in the dashboard codebase that are so good I want to scream.

laushinka · 2022-05-11T16:41:21Z

@trumbitta Omg whattt you just made my day. If I ever feel down I will look at this comment 🧡

trumbitta requested a review from a team April 29, 2022 08:13

roboquat added release-note size/S labels Apr 29, 2022

laushinka requested a review from gtsiolis April 29, 2022 08:14

trumbitta mentioned this pull request Apr 29, 2022

[dashboard] lint warnings: NewProject.tsx #8995

Closed

gtsiolis force-pushed the link-button branch from 8146786 to 2ff90df Compare April 29, 2022 12:16

trumbitta force-pushed the link-button branch from 2ff90df to 632ade6 Compare May 3, 2022 14:19

trumbitta commented May 6, 2022

View reviewed changes

[dashboard] add button.gp-link CSS class

7b0acb6

To be used for anchor tags that should've been buttons because they don't really bring the user to any new location.

trumbitta force-pushed the link-button branch from 632ade6 to 7b0acb6 Compare May 6, 2022 08:56

roboquat added size/M and removed size/S labels May 6, 2022

gtsiolis approved these changes May 6, 2022

View reviewed changes

gtsiolis requested review from laushinka and removed request for laushinka May 6, 2022 14:47

laushinka approved these changes May 11, 2022

View reviewed changes

roboquat merged commit 2f988c9 into gitpod-io:main May 11, 2022

gtsiolis mentioned this pull request Feb 16, 2023

Extract button component #16441

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[dashboard] add button.gp-link CSS class #9641

[dashboard] add button.gp-link CSS class #9641

trumbitta commented Apr 29, 2022

laushinka commented Apr 29, 2022

gtsiolis commented Apr 29, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Apr 29, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented May 3, 2022

gtsiolis commented May 3, 2022 •

edited by werft-gitpod-dev-com bot

Loading

trumbitta May 6, 2022

trumbitta May 6, 2022

gtsiolis commented May 6, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented May 6, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented May 6, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented May 6, 2022 •

edited by werft-gitpod-dev-com bot

Loading

trumbitta commented May 6, 2022

gtsiolis left a comment •

edited

Loading

gtsiolis May 6, 2022

gtsiolis May 6, 2022

gtsiolis May 6, 2022

trumbitta May 6, 2022

laushinka commented May 11, 2022 •

edited

Loading

trumbitta commented May 11, 2022 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented May 11, 2022 •

edited by werft-gitpod-dev-com bot

Loading

	<a
	className="text-blue-light leading-6"
	href="javascript:void(0)"
	onClick={() => confirmCancelDowngrade()}
	>
	Cancel
	</a>

[dashboard] add button.gp-link CSS class #9641

[dashboard] add button.gp-link CSS class #9641

Conversation

trumbitta commented Apr 29, 2022

Description

Related Issue(s)

How to test

Release Notes

laushinka commented Apr 29, 2022

gtsiolis commented Apr 29, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented Apr 29, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented May 3, 2022

gtsiolis commented May 3, 2022 • edited by werft-gitpod-dev-com bot Loading

trumbitta May 6, 2022

Choose a reason for hiding this comment

trumbitta May 6, 2022

Choose a reason for hiding this comment

gtsiolis commented May 6, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented May 6, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented May 6, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented May 6, 2022 • edited by werft-gitpod-dev-com bot Loading

trumbitta commented May 6, 2022

gtsiolis left a comment • edited Loading

Choose a reason for hiding this comment

gtsiolis May 6, 2022

Choose a reason for hiding this comment

gtsiolis May 6, 2022

Choose a reason for hiding this comment

gtsiolis May 6, 2022

Choose a reason for hiding this comment

trumbitta May 6, 2022

Choose a reason for hiding this comment

laushinka commented May 11, 2022 • edited Loading

trumbitta commented May 11, 2022 • edited by werft-gitpod-dev-com bot Loading

laushinka commented May 11, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented Apr 29, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Apr 29, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented May 3, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented May 6, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented May 6, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented May 6, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented May 6, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment •

edited

Loading

laushinka commented May 11, 2022 •

edited

Loading

trumbitta commented May 11, 2022 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented May 11, 2022 •

edited by werft-gitpod-dev-com bot

Loading