Update /help/ui

Summary

Update /help/ui page to be current.

cc @iamphill

Reassigned to @iamphill

Milestone changed to 8.8

Added frontend label

Added ~15078 label

See #3025 (closed)

mentioned in issue #3025 (closed)

Milestone changed to %8.9

Removed ~15078 frontend labels

Milestone changed to %8.10

Milestone changed to %8.11

Assignee removed

Added frontend ~19492 labels

Added ~15078 label

@cperessini can you work on this for %8.12?

Reassigned to @cperessini

Milestone changed to %8.12

@jschatz1 Yes! Would it be possible to have custom HTML elements like the one below? I can add them as images first and they can be translated later, too.

@cperessini For now, the simple solution seems to be just add images first only as needed. Lets only add custom HTML elements if they are truly needed. Other than that, is there anything else blocking for this issue? Thanks!

Milestone changed to %8.13

@awhildy Great, we'll use images then. This page is created with HAML and I'm not familiar with the way it works, so I'll ask for @annabeldunstone's help when she's back from vacation.

@cperessini back now! Let me know how I can help!

@annabeldunstone To get me started, is there a place where I can see a list of the available elements for reuse?

For example, a section of ui.html.haml has the following code to display a button of each kind

  .example
    %button.btn.btn-default{:type => "button"} Default
    %button.btn.btn-gray{:type => "button"} Gray
    %button.btn.btn-primary{:type => "button"} Primary
    %button.btn.btn-success{:type => "button"} Success
    %button.btn.btn-info{:type => "button"} Info
    %button.btn.btn-warning{:type => "button"} Warning
    %button.btn.btn-danger{:type => "button"} Danger
    %button.btn.btn-link{:type => "button"} Link

Before I saw that I was trying to determine the syntax for creating a button by looking at the web inspector

@cperessini are you able to run GitLab locally and see the current UI kit at http://localhost:3000/help/ui?

@annabeldunstone Yeah I can see it. I just updated my gdk to ensure I have the latest version.

Milestone changed to %8.14

@cperessini Are you still working on this? Let me know if I can help any way. Not sure what the end goal is for this release but I see it was added to 8.14 cc @awhildy

Good catch @tauriedavis. @cperessini is gone on vacation, but I believe when he gets back, he was prioritizing some other issues that I think we should get done first. I'm going to move this to backlog for now.

Milestone changed to %Backlog

Assignee removed

We have a list of components here: https://docs.gitlab.com/ee/development/ux_guide/components.html

I wonder if we should eventually switch out the screenshots with actual components like in https://gitlab.com/help/ui? Morph them together?

Agreed, @tauriedavis! I really want to do that. I started with just markdown in the UX Guide as it was an easy way to get started, but the goal should be to combine them all together so we can have the interactive controls and the written guidance on usage/etc. side-by-side. One of the challenges may be that docs.gitlab.com is markdown, and it seems like we are moving more to just using docs.gitlab.com (https://gitlab.com/gitlab-org/gitlab-ce/issues/18739). However, with our own CSS framework (https://gitlab.com/gitlab-org/gitlab-ce/issues/24071) maybe it is easy to show our controls without the guide being a part of the core ruby app? I might not know what I'm talking about though

/help/ui currently crashes: https://gitlab.com/gitlab-org/gitlab-ce/issues/34729

@sarrahvesselov @tauriedavis up your alley.

added bug regression and removed frontend labels

added Platform frontend labels

changed milestone to %9.4

@jschatz1 is this a regression? Issue was opened 1 year ago

@filipa sorry the bug @winh mentioned is a regression not this.

removed bug regression labels

I have another issues I opened for the help page. I will close this OLD one in favor of the new one @jschatz1.

closed