Skip to content

Fomantic UI replacements via web components #29849

@silverwind

Description

@silverwind
Member

Feature Description

As many know, we want to get rid of Fomantic UI. I propose the following:

  • Change the remaining easy-to-replace components with custom implementations in JS/CSS
  • For harder-to-replace components like dropdown and modal, use web components, ideally from npm dependencies.

I think custom elements are the future for Gitea's UI as they work on both backend-rendered content as well as frameworks like Vue and React.

We should first investigate if there are suitable web components available for these modules. Requrement for them is that they have good a11y and they need to be headless (e.g. no CSS).

If no suitable npm modules are available, we can write our own like was recently done for <overflow-menu> and <absolute-date>.

Activity

added
type/proposalThe new feature has not been accepted yet but needs to be discussed first.
topic/uiChange the appearance of the Gitea UI
on Mar 16, 2024
changed the title [-]Fomantic UI replacements via custom elements[/-] [+]Fomantic UI replacements via web components[/+] on Mar 16, 2024
silverwind

silverwind commented on Mar 16, 2024

@silverwind
MemberAuthor

https://github.com/shoelace-style/shoelace looks like a interesting library of web components. It uses floating-ui so should be top-notch for placment of floating content.

harryzcy

harryzcy commented on Mar 17, 2024

@harryzcy
Contributor

Some of the components may be rarely used. What about implementing them via tailwindcss?

silverwind

silverwind commented on Mar 17, 2024

@silverwind
MemberAuthor

What does "implementing via tailwindcss" exactly mean? You can't implement stuff like interactivity, reactivity, a11y and many other things with CSS alone.

harryzcy

harryzcy commented on Mar 17, 2024

@harryzcy
Contributor

What does "implementing via tailwindcss" exactly mean? You can't implement stuff like interactivity, reactivity, a11y and many other things with CSS alone.

I get it. I only mean some CSS only UI components.

silverwind

silverwind commented on Mar 17, 2024

@silverwind
MemberAuthor

Sure, what can be done with CSS only should be done with it. But I'm really talking about the more complex components like Dropdown and Modal which will require JS.

denyskon

denyskon commented on Mar 20, 2024

@denyskon
Member

https://github.com/shoelace-style/shoelace looks like a interesting library of web components. It uses floating-ui so should be top-notch for placment of floating content.

@silverwind This looks really promising, did you try it already? There are lots of styling options....

silverwind

silverwind commented on Mar 20, 2024

@silverwind
MemberAuthor

Did not try it yet, but first we should assert that the a11y of these components is ok. We should not blindly trust their claims 😆.

denyskon

denyskon commented on Mar 31, 2024

@denyskon
Member

@wxiaoguang I've seen you evaluating a11y for some components. What do you normally test? I'd really like if we could replace fomantic soon, but as silverwind said we need to check a11y for these components first 😅

wxiaoguang

wxiaoguang commented on Mar 31, 2024

@wxiaoguang
Contributor

There are some details in aria.md. Usually: the screen content could be read out correctly, the a11y active element could be highlighted and switched correctly. Actually the most difficult part is "dropdown ( menu / select / combobox / popup )". Other components are quite easy to work with native a11y support.

wxiaoguang

wxiaoguang commented on Mar 31, 2024

@wxiaoguang
Contributor

@wxiaoguang maybe you can review these components for their accessibility:

I think they work well

19 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    topic/uiChange the appearance of the Gitea UItype/proposalThe new feature has not been accepted yet but needs to be discussed first.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @silverwind@condemil@wxiaoguang@surfinky@McRaeAlex

        Issue actions

          Fomantic UI replacements via web components · Issue #29849 · go-gitea/gitea