Skip to content

Add Elixir component wrappers for existing CSS components #679

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gerardramos merged 2 commits into from
Mar 19, 2026
Merged

Add Elixir component wrappers for existing CSS components #679

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
38b8c41
Add Elixir component wrappers for existing CSS components
gerardramos Mar 19, 2026
3f96dea
Fix 23 ESLint errors across component and utility files
gerardramos Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 4 additions & 8 deletions packages/harmonium/src/components/AppShell/AppShell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,7 @@ export const AppShell = React.forwardRef<HTMLDivElement, AppShellProps>(

AppShell.displayName = 'AppShell'

export interface AppShellHeaderProps
extends React.HTMLAttributes<HTMLElement> {}
export type AppShellHeaderProps = React.HTMLAttributes<HTMLElement>

export const AppShellHeader = React.forwardRef<
HTMLElement,
Expand All @@ -42,8 +41,7 @@ export const AppShellHeader = React.forwardRef<

AppShellHeader.displayName = 'AppShellHeader'

export interface AppShellSidebarProps
extends React.HTMLAttributes<HTMLElement> {}
export type AppShellSidebarProps = React.HTMLAttributes<HTMLElement>

export const AppShellSidebar = React.forwardRef<
HTMLElement,
Expand All @@ -60,8 +58,7 @@ export const AppShellSidebar = React.forwardRef<

AppShellSidebar.displayName = 'AppShellSidebar'

export interface AppShellMainProps
extends React.HTMLAttributes<HTMLElement> {}
export type AppShellMainProps = React.HTMLAttributes<HTMLElement>

export const AppShellMain = React.forwardRef<HTMLElement, AppShellMainProps>(
({className, children, ...props}, ref) => (
Expand All @@ -77,8 +74,7 @@ export const AppShellMain = React.forwardRef<HTMLElement, AppShellMainProps>(

AppShellMain.displayName = 'AppShellMain'

export interface AppShellFooterProps
extends React.HTMLAttributes<HTMLElement> {}
export type AppShellFooterProps = React.HTMLAttributes<HTMLElement>

export const AppShellFooter = React.forwardRef<
HTMLElement,
Expand Down
2 changes: 1 addition & 1 deletion packages/harmonium/src/components/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(

Card.displayName = 'Card'

export interface CardSectionProps extends React.HTMLAttributes<HTMLDivElement> {}
export type CardSectionProps = React.HTMLAttributes<HTMLDivElement>

export const CardHeader = React.forwardRef<HTMLDivElement, CardSectionProps>(
({className, children, ...props}, ref) => (
Expand Down
2 changes: 1 addition & 1 deletion packages/harmonium/src/components/CommandPalette/CommandPalette.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function buildGroupedItems(filtered: CommandItem[]): Map<string, GroupedItem[]>
for (const item of filtered) {
const group = item.group ?? ''
if (!groups.has(group)) groups.set(group, [])
groups.get(group)!.push({item, flatIndex, group})
groups.get(group)?.push({item, flatIndex, group})
flatIndex++
}
return groups
Expand Down
6 changes: 3 additions & 3 deletions packages/harmonium/src/components/Dialog/Dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export const Dialog = React.forwardRef<HTMLDivElement, DialogProps>(

Dialog.displayName = 'Dialog'

export interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
export type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement>

export const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(
({className, children, ...props}, ref) => (
Expand All @@ -59,7 +59,7 @@ export const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(
)
DialogHeader.displayName = 'DialogHeader'

export interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
export type DialogBodyProps = React.HTMLAttributes<HTMLDivElement>

export const DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(
({className, children, ...props}, ref) => (
Expand All @@ -70,7 +70,7 @@ export const DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(
)
DialogBody.displayName = 'DialogBody'

export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
export type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>

export const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
({className, children, ...props}, ref) => (
Expand Down
9 changes: 3 additions & 6 deletions packages/harmonium/src/components/Field/Field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(

Field.displayName = 'Field'

export interface FieldLabelProps
extends React.LabelHTMLAttributes<HTMLLabelElement> {}
export type FieldLabelProps = React.LabelHTMLAttributes<HTMLLabelElement>

export const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(
({className, children, ...props}, ref) => {
Expand All @@ -61,8 +60,7 @@ export const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(

FieldLabel.displayName = 'FieldLabel'

export interface FieldDescriptionProps
extends React.HTMLAttributes<HTMLParagraphElement> {}
export type FieldDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>

export const FieldDescription = React.forwardRef<
HTMLParagraphElement,
Expand All @@ -84,8 +82,7 @@ export const FieldDescription = React.forwardRef<

FieldDescription.displayName = 'FieldDescription'

export interface FieldErrorProps
extends React.HTMLAttributes<HTMLParagraphElement> {}
export type FieldErrorProps = React.HTMLAttributes<HTMLParagraphElement>

export const FieldError = React.forwardRef<
HTMLParagraphElement,
Expand Down
6 changes: 3 additions & 3 deletions packages/harmonium/src/components/Menu/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react'
import {clsx} from 'clsx'
import styles from './Menu.module.css'

export interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {}
export type MenuProps = React.HTMLAttributes<HTMLDivElement>

export const Menu = React.forwardRef<HTMLDivElement, MenuProps>(
({className, children, ...props}, ref) => (
Expand Down Expand Up @@ -36,7 +36,7 @@ export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(

MenuItem.displayName = 'MenuItem'

export interface MenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {}
export type MenuSeparatorProps = React.HTMLAttributes<HTMLDivElement>

export const MenuSeparator = React.forwardRef<HTMLDivElement, MenuSeparatorProps>(
({className, ...props}, ref) => (
Expand All @@ -51,7 +51,7 @@ export const MenuSeparator = React.forwardRef<HTMLDivElement, MenuSeparatorProps

MenuSeparator.displayName = 'MenuSeparator'

export interface MenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {}
export type MenuLabelProps = React.HTMLAttributes<HTMLDivElement>

export const MenuLabel = React.forwardRef<HTMLDivElement, MenuLabelProps>(
({className, children, ...props}, ref) => (
Expand Down
1 change: 0 additions & 1 deletion packages/harmonium/src/components/NumberInput/NumberInput.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ describe('NumberInput', () => {
})

it('respects max boundary', async () => {
const user = userEvent.setup()
const onChange = vi.fn()
render(<NumberInput defaultValue={10} max={10} onChange={onChange} aria-label="Qty" />)
expect(screen.getByLabelText('Increase')).toBeDisabled()
Expand Down
9 changes: 3 additions & 6 deletions packages/harmonium/src/components/PricingTable/PricingTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,7 @@ export const PricingCard = React.forwardRef<HTMLDivElement, PricingCardProps>(

PricingCard.displayName = 'PricingCard'

export interface PricingCardHeaderProps
extends React.HTMLAttributes<HTMLDivElement> {}
export type PricingCardHeaderProps = React.HTMLAttributes<HTMLDivElement>

export const PricingCardHeader = React.forwardRef<
HTMLDivElement,
Expand Down Expand Up @@ -87,8 +86,7 @@ export const PricingCardPrice = React.forwardRef<

PricingCardPrice.displayName = 'PricingCardPrice'

export interface PricingCardFeaturesProps
extends React.HTMLAttributes<HTMLUListElement> {}
export type PricingCardFeaturesProps = React.HTMLAttributes<HTMLUListElement>

export const PricingCardFeatures = React.forwardRef<
HTMLUListElement,
Expand Down Expand Up @@ -126,8 +124,7 @@ export const PricingCardFeature = React.forwardRef<

PricingCardFeature.displayName = 'PricingCardFeature'

export interface PricingCardFooterProps
extends React.HTMLAttributes<HTMLDivElement> {}
export type PricingCardFooterProps = React.HTMLAttributes<HTMLDivElement>

export const PricingCardFooter = React.forwardRef<
HTMLDivElement,
Expand Down
2 changes: 1 addition & 1 deletion packages/harmonium/src/components/Tabs/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(

Tabs.displayName = 'Tabs'

export interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {}
export type TabsListProps = React.HTMLAttributes<HTMLDivElement>

export const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(
({className, ...props}, ref) => (
Expand Down
3 changes: 1 addition & 2 deletions packages/harmonium/src/components/Textarea/Textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ import {clsx} from 'clsx'
import {useFieldContext} from '../Field'
import styles from './Textarea.module.css'

export interface TextareaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>

export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
({className, ...props}, ref) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/harmonium/src/tokens/build.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ async function build() {
const flat = flattenTokens(allTokens)

const tsLines = Object.entries(flat)
.map(([key, value]) => {
.map(([key]) => {
const constName = key
.replace(/[.-]/g, '_')
.replace(/([a-z])([A-Z])/g, '$1_$2')
Expand Down
2 changes: 1 addition & 1 deletion packages/harmonium/src/utils/responsive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export function responsiveStyles(

for (const bp of BREAKPOINTS) {
if (value[bp] !== undefined) {
styles[`--${name}-${bp}`] = fmt(value[bp]!)
styles[`--${name}-${bp}`] = fmt(value[bp] as string | number)
}
}

Expand Down
Loading
Loading