Add Elixir component wrappers for existing CSS components - #679
Merged
Conversation
Adds 35 new function components to harmonium_ex, wrapping CSS classes that already exist in the design system but had no Elixir wrapper: Stepper: hm_stepper, hm_stepper_step, hm_stepper_connector Progress: hm_progress (with value/max/size/variant) Dialog: hm_dialog_overlay, hm_dialog, hm_dialog_header/body/footer Empty State: hm_empty_state, hm_empty_state_icon/title/description/action Drawer: hm_drawer_overlay, hm_drawer (side/size) Typography: hm_text (size/weight/color/truncate), hm_heading (size/weight) Data Grid: hm_data_grid_wrapper, hm_data_grid (striped/hoverable) File Upload: hm_file_upload, hm_file_upload_placeholder Toast: hm_toast_container, hm_toast Popover: hm_popover, hm_popover_content Tooltip: hm_tooltip, hm_tooltip_content Skeleton: hm_skeleton Stat: hm_stat, hm_stat_value, hm_stat_label Tabs: hm_tabs, hm_tabs_list, hm_tabs_trigger, hm_tabs_content All follow the existing thin-wrapper pattern: set CSS class + data attributes, pass through global attrs and slots.
Replace empty interfaces with type aliases, remove non-null assertions, and clean up unused variables to pass strict TypeScript linting. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds 35 new Phoenix function components to
harmonium_ex, wrapping CSS classes that already exist in the design system but had no Elixir wrapper. Previously only 11 of 50+ CSS components had wrappers.New Components
hm_stepper,hm_stepper_step,hm_stepper_connectorhm_progress(value, max, size, variant)hm_dialog_overlay,hm_dialog,hm_dialog_header,hm_dialog_body,hm_dialog_footerhm_empty_state,hm_empty_state_icon,hm_empty_state_title,hm_empty_state_description,hm_empty_state_actionhm_drawer_overlay,hm_drawer(side, size)hm_text(size, weight, color, truncate),hm_heading(size, weight)hm_data_grid_wrapper,hm_data_grid(striped, hoverable)hm_file_upload,hm_file_upload_placeholderhm_toast_container,hm_toasthm_popover,hm_popover_contenthm_tooltip,hm_tooltip_contenthm_skeletonhm_stat,hm_stat_value,hm_stat_labelhm_tabs,hm_tabs_list,hm_tabs_trigger,hm_tabs_contentAll follow the existing thin-wrapper pattern: set CSS class + data attributes, pass through global attrs and slots.
Motivation
The bid leveling app (and likely other Harmonium consumers) needs stepper, progress, dialog, drawer, typography, and data grid components. The CSS already supports all of these — only the Elixir wrappers were missing, forcing consumers to use raw HTML class strings.
Test plan
mix compilepasses in harmonium_ex