Dan MH (f8edcaca) at 18 Mar 16:26

Dan MH (4bed3471) at 18 Mar 16:26

... and 1 more commit

What does this MR do?

Update progress bar to use the full border radius design token (gl-rounded-full / 9999px) instead of the default radius, to match the fully-rounded appearance shown #2565.

This follows up on !5753 which introduced gl-rounded-default, but the approved design in #2565 calls for a fully-rounded border radius.

Screenshots or screen recordings

Visual change: the progress bar track will have fully-rounded ends (border-radius: 9999px) instead of the default 0.25rem.

Integrations

• GitLab: mr_url
• CustomersDot: mr_url
• Duo UI: mr_url
• Status Page: mr_url
• Docs: mr_url
• Switchboard: mr_url

Does this MR meet the acceptance criteria?

Relates to #2565 (border-radius portion)

@vanessaotto as we have the approvals I'm gonna go ahead and MWPS 😄 thanks for being part of this great adventure

@vanessaotto ah you beat me! I was waiting for the pipeline to finish so I could update snapshots 😅 thank you!

idea: some mechanism to say "I want the screenshots to update in this MR" rather than wait ~20min for the pipelines to finish and start the manual job.

Dan MH (f8edcaca) at 18 Mar 11:37

... and 1 more commit

@jeldergl lush, thank you! Left some comments but this is good to merge as is if needed 🙇

What does this MR do?

Address followup items identified in the related issue.

Integrations

N/A

Does this MR meet the acceptance criteria?

This checklist encourages the authors, reviewers, and maintainers of merge requests (MRs) to confirm changes were analyzed for conformity with the project's guidelines, security and accessibility.

Related to #3361

suggestion (non-blocking): Shall we make the examples interactive? Try this patch:

diff --git a/contents/patterns/show-more.md b/contents/patterns/show-more.md
index 9097ccdb6..c9754e48d 100644
--- a/contents/patterns/show-more.md
+++ b/contents/patterns/show-more.md
@@ -59,25 +59,61 @@ A show more indicator takes one of two forms:
 ```html
 <!-- live-example -->
 <!-- Inline items with neutral action styling -->
-<div class="gl-display-flex gl-flex-wrap gl-gap-2">
-  <gl-badge variant="info">Item 1</gl-badge>
-  <gl-badge variant="info">Item 2</gl-badge>
-  <gl-badge variant="info">Item 3</gl-badge>
-  <button class="gl-p-0 gl-bg-transparent gl-border-none gl-text-default hover:gl-text-strong gl-text-sm">+2&nbsp;more</button>
-</div>
+<script>
+  export default {
+    methods: {
+      showMore(e) {
+        const container = e.target.parentElement;
+        container.querySelectorAll('.gl-hidden').forEach((el) => el.classList.remove('gl-hidden'));
+        e.target.remove();
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="gl-display-flex gl-flex-wrap gl-gap-2">
+    <gl-badge variant="info">Item 1</gl-badge>
+    <gl-badge variant="info">Item 2</gl-badge>
+    <gl-badge variant="info">Item 3</gl-badge>
+    <gl-badge variant="info" class="gl-hidden">Item 4</gl-badge>
+    <gl-badge variant="info" class="gl-hidden">Item 5</gl-badge>
+    <button class="gl-action-neutral-colors gl-rounded-action gl-p-0" @click="showMore">
+      +2&nbsp;more
+    </button>
+  </div>
+</template>
 ```
 
 ```html
 <!-- live-example -->
 <!-- Centered "Show more" text for larger regions -->
-<div class="gl-display-flex gl-flex-direction-column gl-gap-0">
-  <div class="gl-border-t gl-p-3 gl-text-center">Item</div>
-  <div class="gl-border-t gl-p-3 gl-text-center">Item</div>
-  <div class="gl-border-t gl-p-3 gl-text-center">Item</div>
-  <div class="gl-border-t gl-text-center gl-p-3">
-    <gl-button variant="confirm" category="tertiary" size="small">Show more</gl-button>
+<script>
+  export default {
+    methods: {
+      showMore(e) {
+        const container = e.target.closest('.gl-display-flex');
+        container.querySelectorAll('.gl-hidden').forEach((el) => el.classList.remove('gl-hidden'));
+        e.target.closest('div').remove();
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="gl-display-flex gl-flex-direction-column gl-gap-0">
+    <div class="gl-border-t gl-p-3 gl-text-center">Item</div>
+    <div class="gl-border-t gl-p-3 gl-text-center">Item</div>
+    <div class="gl-border-t gl-p-3 gl-text-center">Item</div>
+    <div class="gl-border-t gl-hidden gl-p-3 gl-text-center">Item</div>
+    <div class="gl-border-t gl-hidden gl-p-3 gl-text-center">Item</div>
+    <div class="gl-border-t gl-p-3 gl-text-center">
+      <gl-button variant="confirm" category="tertiary" size="small" @click="showMore">
+        Show more
+      </gl-button>
+    </div>
   </div>
-</div>
+</template>
 ```
 
 ### Accessibility

Maybe this?

  <button class="gl-action-neutral-colors gl-rounded-action gl-p-0">+2&nbsp;more</button>

question (non-blocking): to a user, what is the different between show more and load more? The second example feels like it is a load more but with a different button label.

@vanessaotto 🙈 please could you review frontend ?

@jeldergl please could you review UX ?

What does this MR do?

Update progress bar to use the full border radius design token (gl-rounded-full / 9999px) instead of the default radius, to match the fully-rounded appearance shown #2565.

This follows up on !5753 which introduced gl-rounded-default, but the approved design in #2565 calls for a fully-rounded border radius.

Screenshots or screen recordings

Visual change: the progress bar track will have fully-rounded ends (border-radius: 9999px) instead of the default 0.25rem.

Integrations

• GitLab: mr_url
• CustomersDot: mr_url
• Duo UI: mr_url
• Status Page: mr_url
• Docs: mr_url
• Switchboard: mr_url

Does this MR meet the acceptance criteria?

Relates to #2565 (border-radius portion)

Dan MH (d9b3b213) at 18 Mar 11:04

@sdejonge thank you so much for taking a look.

question: what about the avatar border for default/circle shape? Should we also add a design token e.g. avatar.circle.border.radius.default which aliases "{border.radius.full}"?

Sounds good, it is less likely to be needed but the completeness might make set easier to understand.

I'd like to avoid add square/circle abstractions and simply have the scale define usage

I hear you on this. I've spent some time wrestling with it, but I don't think we can.

Unless I am missing something, when looking at the full set it is neither scale (16,24,32…) or variants (cirlce/square) alone that determines it. But the combination of them.

For example a size 48 avatar (avatar.border.radius.48) will either have border.radius.full or border.radius.lg :

Something I like about avatar.square.border.radius.default and avatar.square.border.radius.lg is it provides answers for any future or snowflake sized avatars. Use default unless bigger than X.

Something I like about avatar.square.border.radius.16, avatar.square.border.radius.24 and so on is they are very explicit for what exists today and the planned future.

If we value completeness for the set to aid understanding I prefer this option:

avatar
  cirlce
    border
      radius
        default
  square
    border
      radius
        default
        large

The other complete option seems inefficient, mixing default and a number scale could be confusing:

avatar
  circle
    border
      radius
        16
        24
        32
        48
        64
        96
  square
    border
      radius
        16
        24
        32
        48
        64
        96

or the inverse

avatar
  16
    border
      radius
        circle
        square
  24
    border
      radius
        circle
        square
  32
    border
      radius
        circle
        square
  48
    border
      radius
        circle
        square
  64
    border
      radius
        circle
        square
  96
    border
      radius
        circle
        square

I've pushed a change to capture my preferred, but lets work together to figure out the tradeoffs and make a decision 😊

Dan MH (b7bb2914) at 18 Mar 09:24