I’m using Doggo for a side project that is not public.The styles are written with SCSS. The screenshot shows the app bar, tab navigation, table, and input components. That’s all I can show you at this time 
woylie
2
sodapopcan
I’m using it in a project (closed source). With Tailwind, you can either use @apply (which is what I’m currently doing) or wrap everything and use utility classes, though YMMV here, I only briefly spiked this.
1
kromnomo
Thank you for your feedback. There are a number of parallel initiatives currently ongoing to provide a stack of live components and it is not always easy to keep track of them an see where they are complementary or potentially build on each other.
0
woylie
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.Storybookandmix dog.gen.storiesfor generating
Phoenix.Storybookstories 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
Doggowith build macros
inDoggo.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
inputcomponent tofield. - Configure
Gettextmodule forfieldcomponent (formerlyinput) via
compile-time option instead of global attribute. - Allow to set required text and required title attributes for input and label.
- Add
moduleargument tomix dog.modifiersthat points to the module
in which the Doggo components are configured. - Replace
placeholderattribute withplaceholder_srcand
placeholder_contentattributes inavatarcomponent. - Replace
phx-feedback-forattribute in favor of
Phoenix.Component.used_input?/1. - Don’t use
h2forDoggo.page_header/1sub title. - Nest
vertical_nav_nestedcomponent into<div>. - Rename
drawer-nav-titleclass invertical_nav_nestedcomponent 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.Storybookstories bundled in theprivfolder in favor of
mix dog.gen.storiesandDoggo.Storybook. - Remove
Doggo.flash_group/1.
Upgrade Guide
- For all Doggo components you were using, call the corresponding
build
macros inDoggo.Componentsin one of your modules and update your HEEx
templates to call the generated functions instead of the ones from the
Doggomodule. See readme for installation details. - The previous Doggo version instructed you to configure a separate Storybook
that reads the stories from theprivfolder of the dependency. Remove that
second Storybook and run
mix dog.gen.stories -m [component-module] -o [storybook-folder] -ato
generate stories for the configured Doggo components in the primary
Storybook. - If you use
mix dog.modifiersin a script, add the--moduleargument. - If you were setting the
gettextattribute on theinputcomponent, pass
thegettext_moduleoption toDoggo.Components.build_field/1instead.
9
woylie
Quick follow-up with some internal refactoring. It also inlines dependent components into the image and field components instead of requiring the user to compile those dependencies. Consequently, the component builders for field descriptions, errors, and labels have been removed. Those were very simple components that only made sense in the context of the field component, so I doubt that anybody will miss them.
4
woylie
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.classesandDoggo.classes/1have been added to retrieve all classes used in the configured components. Unlike the previousmix dog.modifiersandDoggo.modifier_classes/1, the output includes the base classes, the nested classes based on the base class, customizable additional classes, and configured modifier classes.
11
woylie
I skipped a couple of releases here. 0.15.0 is a big one.
It adds hooks for all components that need them, implement all the required keyboard interaction, roving tab indexes, etc., as described in the ARIA Authoring Practices Guide. All hooks should survive LiveView patches.
The hooks are included in the Hex package, but also published separately as an npm package.
Included hooks:
- accordion
- action_bar
- alert_dialog
- combobox
- menu
- menu_bar
- menu_button
- modal
- split_pane
- tabs
- toolbar
- tooltip
- tree
- tree_item
The modal uses showModal() now, which provides proper modal semantics, allows to style the backdrop with the ::backdrop pseudo element, and lets the browser handle scroll lock behind the modal. The field component can be extended with custom types. And lots of other improvements.
Storybook: https://doggo.wlyx.dev. I haven’t gotten around to adding presentable styles yet, but at least everything should be functional now.
This version also added HTML snapshot tests. You can find the snapshots here. They will make writing your CSS a bit easier, and from the next release version, it will also be easier to review markup changes this way.
5