Fix UI issues after introducing new button design system #43663

bl-nero · 2024-06-28T18:43:49Z

This PR:

fixes minor UI issues, mostly margins and capitalizations
changes button height on the login form, but doesn't yet address the full scope of design changes for the SSO buttons (awaiting final opinion from the UX team)
replaces resource enrollment buttons with something that doesn't look like a CTA if the resource lists are not empty
adds intent indications to the file transfer requests UI

Caveat: since we are abandoning button capitalization, existing SSO buttons may look weird for those who have all-lowercase names of their SSO connectors. We may need to issue an announcement to our users about using the displayName connector property to fix this.

Before	After

Closes #43175

github-actions · 2024-07-03T15:11:38Z

The PR changelog entry failed validation: Changelog entry not found in the PR body. Please add a "no-changelog" label to the PR, or changelog lines starting with changelog: followed by the changelog entries for the PR.

ravicious

I'll continue the review tomorrow.

ravicious · 2024-07-04T12:29:01Z

web/packages/design/src/ButtonLink/ButtonLink.jsx

@@ -46,6 +46,7 @@ const StyledButtonLink = styled.a`
  &:hover,
  &:focus {
    color: ${({ theme }) => theme.colors.buttons.link.hover};
+    box-shadow: none;


I think it shouldn't have a background on hover either. The way I think about it is that ButtonLink is supposed to behave just like Link.

You're probably right. I'll change it.

I'm not going to change it right now, because it breaks a bit in places where link buttons are placed on a red background (the text turns illegible). As this coincides with your another comment, I'll fix it properly after I deal with the alert banners.

Also increase gap to increase visibility of individual groups

ravicious · 2024-07-05T13:56:42Z

web/packages/shared/components/MenuAction/MenuActionButton.tsx

        <ButtonBorder
-          height="24px"
          size="small"
          setRef={e => (this.anchorEl = e)}
          onClick={this.onOpen}
          {...buttonProps}
        >
-          {this.props.buttonText || 'OPTIONS'}
-          <ChevronDown ml={2} mr={-2} size="small" color="text.slightlyMuted" />
+          {this.props.buttonText || 'Options'}


Just my opinion, but it's quite distracting for me how <Button fill="border"> loses its border on hover. 😅 But I suspect it was hard to represent the difference between all five states without this.

ravicious · 2024-07-05T14:07:10Z

web/packages/teleport/src/TrustedClusters/TrustedClusters.tsx

@@ -63,14 +71,16 @@ export default function TrustedClusters() {
      <FeatureHeader alignItems="center">
        <FeatureHeaderTitle>Trusted Clusters</FeatureHeaderTitle>
        {hasClusters && (
-          <ButtonPrimary


There's another place where ButtonPrimary is used in this file. Should it be removed as well?

No, because this is an empty state with an actual CTA (the user has no trusted clusters, therefore this is the action that we recommend).

ravicious · 2024-07-05T14:11:47Z

web/packages/teleport/src/components/LabelsInput/LabelsInput.tsx

Off topic, but I think disabled in the context of this component has been used as "A value that you cannot change because it's supposed to be hardcoded and always sent to the server", which should semantically be represented as readonly. disabled inputs are not sent to the server by the browser.

web/packages/design/src/Button/buttons.story.tsx

ravicious · 2024-07-05T14:31:13Z

web/packages/shared/components/UnifiedResources/UnifiedResources.tsx

-                  <ButtonLink onClick={onRetryClicked}>Retry</ButtonLink>
+                  <Button type="button" onClick={onRetryClicked}>
+                    Retry
+                  </Button>


This button didn't look quite right. I changed it a little bit, but it still doesn't look the best. idk what to do here, as we can't use fill any other than filled, because otherwise it blends with the red background. Also I wish the language server would suggest me "custom-defined" props first, because now if I place my cursor inside Button and ask my editor what props are available, it suggests me a bunch of aria props. ;f

@gzdunek Do you remember if there was a reason ButtonLink was used here instead of Button? This link doesn't have a href and we add onClick on it, which makes Button more suitable for it.

Before After

@gzdunek Do you remember if there was a reason ButtonLink was used here instead of Button? This link doesn't have a href and we add onClick on it, which makes Button more suitable for it.

Hmm it wasn't me who added that button 😅 but I agree, Buttons fits better here.

Sorry, I just did a quick git blame and didn't dig further. 😏

I'm going to leave it as is, since it's exactly how it looks now, and one of the next steps on my roadmap is to deal with the error banners, which will include modernizing their action buttons: https://www.figma.com/design/Gpjs9vjhzUKF1GDbeG9JGE/Application-Design-System?node-id=8890-5504&m=dev

avatus · 2024-07-09T18:17:19Z

web/packages/teleport/src/Console/DocumentSsh/useFileTransfer.ts

@@ -33,6 +33,7 @@ export type FileTransferRequest = {
  sid: string;
  requestID: string;
  requester: string;
+  /** A list of accounts that approved this request. */


bl-nero added 2 commits June 28, 2024 20:13

A new Button component

41cd936

Update snapshots

1c9ab9d

bl-nero mentioned this pull request Jun 28, 2024

Implement new buttons design #43662

Merged

bl-nero force-pushed the bl-nero/buttons-2 branch from 7cc43e9 to 270e199 Compare July 3, 2024 08:32

bl-nero added 2 commits July 3, 2024 16:49

UI corrections after updating the Button component

c4834fd

Update snapshots

b7ef80e

bl-nero force-pushed the bl-nero/buttons-2 branch from 270e199 to b7ef80e Compare July 3, 2024 14:49

bl-nero marked this pull request as ready for review July 3, 2024 15:11

github-actions bot requested review from ravicious and rudream July 3, 2024 15:11

github-actions bot added size/sm ui labels Jul 3, 2024

Merge branch 'master' into bl-nero/buttons

e9c95c2

bl-nero added the no-changelog Indicates that a PR does not require a changelog entry label Jul 4, 2024

Base automatically changed from bl-nero/buttons to master July 4, 2024 11:06

bl-nero added 2 commits July 4, 2024 14:03

Merge branch 'master' into bl-nero/buttons

533b16c

Merge branch 'bl-nero/buttons' into bl-nero/buttons-2

fe80e7a

ravicious reviewed Jul 4, 2024

View reviewed changes

ravicious self-requested a review July 4, 2024 12:29

ravicious added 4 commits July 5, 2024 15:47

buttons.story.tsx: Group related buttons together

78aa18e

Also increase gap to increase visibility of individual groups

Fix Cancel button in ClusterAdd in teleterm

2858d89

Correct display names of auth providers in ClusterLogin story

9f8af87

Update Retry button in Unified Resources

22bcef5

ravicious approved these changes Jul 5, 2024

View reviewed changes

avatus approved these changes Jul 9, 2024

View reviewed changes

rudream approved these changes Jul 9, 2024

View reviewed changes

Fix the buttons story snapshot

da09e04

bl-nero enabled auto-merge July 10, 2024 09:42

Merge branch 'master' into bl-nero/buttons-2

9567f03

bl-nero added this pull request to the merge queue Jul 10, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jul 10, 2024

Add license

82fc8d5

bl-nero enabled auto-merge July 10, 2024 18:02

bl-nero added this pull request to the merge queue Jul 10, 2024

Merged via the queue into master with commit ed2f1b6 Jul 10, 2024
38 checks passed

bl-nero deleted the bl-nero/buttons-2 branch July 10, 2024 18:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix UI issues after introducing new button design system #43663

Fix UI issues after introducing new button design system #43663

bl-nero commented Jun 28, 2024 •

edited

Loading

github-actions bot commented Jul 3, 2024

ravicious left a comment

ravicious Jul 4, 2024

bl-nero Jul 4, 2024

bl-nero Jul 9, 2024

ravicious Jul 5, 2024

ravicious Jul 5, 2024

bl-nero Jul 9, 2024

ravicious Jul 5, 2024

ravicious Jul 5, 2024

gzdunek Jul 5, 2024

ravicious Jul 5, 2024

bl-nero Jul 9, 2024

avatus Jul 9, 2024

Fix UI issues after introducing new button design system #43663

Fix UI issues after introducing new button design system #43663

Conversation

bl-nero commented Jun 28, 2024 • edited Loading

github-actions bot commented Jul 3, 2024

ravicious left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bl-nero commented Jun 28, 2024 •

edited

Loading