I have written many times my struggles on here that web UI is a huge gap and undermines Phoenix as a viable way to build apps fast. Phoenix isn’t fast vs other solutions which have established UI frameworks.

A set of semantic headless components that address accessibility is the missing piece in the ecosystem and now, with Doggo you have made great strides to closing that gap. Well done and thank-you for your efforts.

I’ve actually moved to using web components / custom elements because of this gap (Shoelace and Adobe Spectrum with the what looks to be amazing Spectrum 2 just around the corner).

IMO Doggo should be seriously considered by the Phoenix core team as a foundation library given there is nothing other than the “stop gap” core components which are not fit for purpose and create a maintenance issue for phoenix apps.

If Phoenix had a set of core semantic components which implement all the accessibility requirements correctly and cover the common application use cases then tools, generators, CSS frameworks, themes, application website templates, UI design/figma templates, and real storybook collaboration with design teams can thrive within the Phoenix ecosystem.

Without a core semantic UI component library Phoenix and liveview will remain a fringe hobby web technology with low adoption because the gap between UI design teams and dev teams is too large as they cant work effectively or efficiently together. Phoenix in effect slows you down vs just using react or next.js or any other popular solution that has established UI components and real storybook support out of the box to close the gap between design intent and devs.

Doggo 0.5.0 focuses on the semantics of the remaining APG patterns. Note that not all added components are fully functional yet: client-side interactivity including keyboard support will be the next focus. Components that are not ready to be used yet are marked with admonition blocks in the documentation.

Added

• New component: Doggo.alert_dialog/1.
• New component: Doggo.carousel/1.
• New component: Doggo.combobox/1.
• New component: Doggo.disclosure_button/1.
• New component: Doggo.menu/1.
• New component: Doggo.menu_bar/1.
• New component: Doggo.menu_button/1.
• New component: Doggo.menu_group/1.
• New component: Doggo.menu_item/1.
• New component: Doggo.menu_item_checkbox/1.
• New component: Doggo.menu_item_radio_group/1.
• New component: Doggo.radio_group/1.
• New component: Doggo.split_pane/1.
• New component: Doggo.tabs/1.
• New component: Doggo.toolbar/1.
• New component: Doggo.tree/1.
• Storybook page about modifier classes.
• Mix task mix dog.modifiers to list all modifier classes.

Changed

• Set aria-invalid and aria-errormessage attributes in Doggo.input/1
  component.
• Use buttons instead of links in Doggo.action_bar/1.
• Add toolbar role to Doggo.action_bar/1.
• Use section instead of article in Doggo.modal/1.
• Use button for close button in Doggo.modal/1.
• Add dismissable attribute to Doggo.modal/1.
• Remove role from button_link/1, add class.
• Rename Doggo.drawer/1 slots to header, main, and footer.
• Rename Doggo.drawer_nav/1, Doggo.drawer_nav_nested/1 and
  Doggo.drawer_nav_section to Doggo.vertical_nav/1,
  Doggo.vertical_nav_nested/1 and Doggo.vertical_nav_section/1.
• Depend on phoenix_storybook ~> 0.6.0.

I just released Doggo 0.9.0. Since I didn’t announce the releases in between, just a brief summary:

• Various components have seen improvements, including documentation, stories, and customizability, and bumps in maturity levels.
• Example CSS has been added for some components and will be added for the remaining components in the future. Links to the CSS files have been added to the component docs on Hex.
• The demo application has been deployed and is available at https://woylie-doggo.fly.dev/.
• mix dog.classes and Doggo.classes/1 have been added to retrieve all classes used in the configured components. Unlike the previous mix dog.modifiers and Doggo.modifier_classes/1, the output includes the base classes, the nested classes based on the base class, customizable additional classes, and configured modifier classes.

https://hexdocs.pm/doggo/changelog.html#0-9-0-2024-09-25

Doggo 0.6.0 is released!

This release brings some significant changes with it. All components have been replaced with component builder functions, which means you can now customize all modifier attributes, rename components, and also customize the modifier class names.

The existing hard-coded Phoenix Storybook stories have been replaced with a mix task that generates stories into your storybook folder. This means you don’t need a separate storybook route for the Doggo components any more - just at them to your existing storybook. Furthermore, the generated stories automatically render variation groups for all configured modifiers. This is done dynamically - if you change the modifier configuration, you don’t need to re-generate the stories.

Release Notes

Added

• Add Doggo.Storybook and mix dog.gen.stories for generating
  Phoenix.Storybook stories for the configured components. The generated
  stories automatically render variation groups for all configured modifiers.
• Add Doggo.modifier_classes/1.
• Add Doggo.modifier_class_name/2.

Changed

• Replace all function components defined in Doggo with build macros
  in Doggo.Components. This allows you to customize the modifier attributes,
  component names, base classes, and some other options at compile time.
• Make modifier class name builder configurable.
• Rename build macro for former input component to field.
• Configure Gettext module for field component (formerly input) via
  compile-time option instead of global attribute.
• Allow to set required text and required title attributes for input and label.
• Add module argument to mix dog.modifiers that points to the module
  in which the Doggo components are configured.
• Replace placeholder attribute with placeholder_src and
  placeholder_content attributes in avatar component.
• Replace phx-feedback-for attribute in favor of
  Phoenix.Component.used_input?/1.
• Don’t use h2 for Doggo.page_header/1 sub title.
• Nest vertical_nav_nested component into <div>.
• Rename drawer-nav-title class in vertical_nav_nested component to be
  based on configured component name (default: vertical-nav-nested-title).
• Better consistency, various improvements and optimizations in all components.
• Revise The component type classification.
• Add maturity levels for all components (experimental, developing, refining,
  stable).
• Require live_view ~> 1.0.0-rc.6.

Removed

• Remove Phoenix.Storybook stories bundled in the priv folder in favor of
  mix dog.gen.stories and Doggo.Storybook.
• Remove Doggo.flash_group/1.

Upgrade Guide

1. For all Doggo components you were using, call the corresponding build
   macros in Doggo.Components in one of your modules and update your HEEx
   templates to call the generated functions instead of the ones from the
   Doggo module. See readme for installation details.
2. The previous Doggo version instructed you to configure a separate Storybook
   that reads the stories from the priv folder of the dependency. Remove that
   second Storybook and run
   mix dog.gen.stories -m [component-module] -o [storybook-folder] -a to
   generate stories for the configured Doggo components in the primary
   Storybook.
3. If you use mix dog.modifiers in a script, add the --module argument.
4. If you were setting the gettext attribute on the input component, pass
   the gettext_module option to Doggo.Components.build_field/1 instead.

Release 0.4.0 focuses on improving the consistency of the existing components and on improving the test coverage. It also introduces the cluster and toggle_button components.