Skip to content

Commit 4481b92

Browse files
mythzmythz
committed
Add support for optional className which merges with root element class
1 parent 4292b20 commit 4481b92

25 files changed

+84
-41
lines changed

‎src/components/AlertSuccess.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { useState } from 'react'
22
import type { AlertSuccessProps } from '@/components/types'
33

4-
export default function AlertSuccess({ message, children }: AlertSuccessProps & { children?: React.ReactNode }) {
4+
export default function AlertSuccess({ message, className, children }: AlertSuccessProps & { children?: React.ReactNode }) {
55
const [dismissed, setDismissed] = useState(false)
66

77
if (dismissed) return null
88

99
return (
10-
<div className="rounded-md bg-green-50 dark:bg-green-200 p-4" role="alert">
10+
<div className={`rounded-md bg-green-50 dark:bg-green-200 p-4 ${className || ''}`} role="alert">
1111
<div className="flex">
1212
<div className="flex-shrink-0">
1313
<svg className="h-5 w-5 text-green-400 dark:text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

‎src/components/AutoCreateForm.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ const AutoCreateForm = forwardRef<AutoCreateFormRef, AutoCreateFormProps & AutoC
6161
const {
6262
type,
6363
formStyle = "slideOver",
64+
className,
6465
panelClass: panelClassProp,
6566
formClass: formClassProp,
6667
headingClass: headingClassProp,
@@ -346,7 +347,7 @@ const AutoCreateForm = forwardRef<AutoCreateFormRef, AutoCreateFormProps & AutoC
346347
return (
347348
<ApiStateContext.Provider value={client}>
348349
<ModalProviderContext.Provider value={modalProvider}>
349-
<div>
350+
<div className={className}>
350351
{formStyle === 'card' ? (
351352
<div className={panelClass}>
352353
{formContent(false)}

‎src/components/AutoEditForm.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ const AutoEditForm = forwardRef<AutoEditFormRef, AutoEditFormProps & AutoEditFor
6363
type,
6464
value: modelValue,
6565
formStyle = "slideOver",
66+
className,
6667
panelClass: panelClassProp,
6768
formClass: formClassProp,
6869
headingClass: headingClassProp,
@@ -456,7 +457,7 @@ const AutoEditForm = forwardRef<AutoEditFormRef, AutoEditFormProps & AutoEditFor
456457
return (
457458
<ApiStateContext.Provider value={client}>
458459
<ModalProviderContext.Provider value={modalProvider}>
459-
<div>
460+
<div className={className}>
460461
{formStyle === 'card' ? (
461462
<div className={panelClass}>
462463
{formContent(false)}

‎src/components/AutoForm.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ const AutoForm = forwardRef<AutoFormRef, AutoFormProps & AutoFormSlots>((props,
6969
showLoading = true,
7070
jsconfig = 'eccn,edv',
7171
formStyle = "card",
72+
className,
7273
metaType: metaTypeProp,
7374
configureField,
7475
configureFormLayout,
@@ -363,7 +364,7 @@ const AutoForm = forwardRef<AutoFormRef, AutoFormProps & AutoFormSlots>((props,
363364
return (
364365
<ApiStateContext.Provider value={client}>
365366
<ModalProviderContext.Provider value={modalProvider}>
366-
<div>
367+
<div className={className}>
367368
{formStyle === 'card' ? (
368369
<div className={panelClass}>
369370
{formContent(false)}

‎src/components/AutoQueryGrid.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useState, useMemo, useEffect, useCallback, useRef, useImperativeHandle, forwardRef, useContext, type CSSProperties, type ReactNode } from 'react'
2-
import type { JsonServiceClient } from '@servicestack/client'
32
import type { ApiPrefs, ApiResponse, Column, ColumnSettings, MetadataPropertyType, GridAllowOptions, GridShowOptions } from '@/types'
43
import type { AutoQueryGridProps } from '@/components/types'
54
import { ApiResult, appendQueryString, combinePaths, delaySet, leftPart, mapGet, queryString, rightPart } from '@servicestack/client'
@@ -105,6 +104,7 @@ export const AutoQueryGrid = forwardRef<AutoQueryGridRef, AutoQueryGridComponent
105104
const {
106105
id = 'AutoQueryGrid',
107106
skip: initialSkip = 0,
107+
className,
108108
onHeaderSelected,
109109
onRowSelected,
110110
onNav,
@@ -724,7 +724,7 @@ export const AutoQueryGrid = forwardRef<AutoQueryGridRef, AutoQueryGridComponent
724724
}
725725

726726
return (
727-
<div className="pt-1">
727+
<div className={className ?? "pt-1"}>
728728
{show('forms') && create && apis.Create && (
729729
<div>
730730
{invalidCreateAccess ? (

‎src/components/AutoViewForm.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const AutoViewForm: React.FC<AutoViewFormProps & AutoViewFormSlots> = (props) =>
2424
typeName: typeNameProp,
2525
done: doneFn,
2626
formStyle = "slideOver",
27+
className,
2728
panelClass: panelClassProp,
2829
formClass: formClassProp,
2930
headingClass: headingClassProp,
@@ -152,7 +153,7 @@ const AutoViewForm: React.FC<AutoViewFormProps & AutoViewFormSlots> = (props) =>
152153
}
153154

154155
return (
155-
<div>
156+
<div className={className}>
156157
{formStyle === 'card' ? (
157158
<div className={panelClass}>
158159
<div className={formClass}>

‎src/components/Breadcrumb.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import type { BreadcrumbProps } from '@/components/types'
22

3-
export default function Breadcrumb({ href, title, children }: BreadcrumbProps) {
3+
export default function Breadcrumb({ href, title, className, children }: BreadcrumbProps) {
44
return (
5-
<li>
5+
<li className={className}>
66
<div className="flex items-center">
77
{/* Heroicon name: mini/chevron-right */}
88
<svg className="h-6 w-6 flex-shrink-0 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">

‎src/components/Breadcrumbs.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import type { BreadcrumbsProps } from '@/components/types'
33
export default function Breadcrumbs({
44
homeHref = "/",
55
homeLabel = "Home",
6+
className,
67
children
78
}: BreadcrumbsProps) {
89
return (
9-
<nav className="flex" aria-label="Breadcrumb">
10+
<nav className={className ?? "flex"} aria-label="Breadcrumb">
1011
<ol role="list" className="flex items-center space-x-4">
1112
<li>
1213
<div>

‎src/components/CloseButton.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@ import type { CloseButtonProps } from './types'
44
export default function CloseButton({
55
buttonClass = 'bg-white dark:bg-black',
66
title = 'Close',
7+
className,
78
onClose
89
}: CloseButtonProps) {
910
return (
10-
<div className="absolute top-0 right-0 pt-4 pr-4">
11+
<div className={className ?? "absolute top-0 right-0 pt-4 pr-4"}>
1112
<button
1213
type="button"
1314
onClick={onClose}

‎src/components/DarkModeToggle.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState, useEffect } from 'react'
2+
import type { DarkModeToggleProps } from './types'
23

3-
export function DarkModeToggle() {
4+
export function DarkModeToggle({ className }: DarkModeToggleProps) {
45
const html = typeof document !== 'undefined' ? document.documentElement : null
56
const hasDarkClass = () => html?.classList.contains('dark') ?? false
67

@@ -15,27 +16,27 @@ export function DarkModeToggle() {
1516
const currentIsDark = hasDarkClass()
1617
const newIsDark = !currentIsDark
1718

18-
console.log('Toggle clicked - current:', currentIsDark, 'new:', newIsDark)
19+
// console.log('Toggle clicked - current:', currentIsDark, 'new:', newIsDark)
1920

2021
if (newIsDark) {
2122
html?.classList.add('dark')
2223
} else {
2324
html?.classList.remove('dark')
2425
}
2526

26-
console.log('After toggle - classList:', html?.classList.toString())
27+
// console.log('After toggle - classList:', html?.classList.toString())
2728

2829
setIsDark(newIsDark)
2930
if (typeof localStorage !== 'undefined') {
3031
localStorage.setItem('color-scheme', newIsDark ? 'dark' : 'light')
31-
console.log('Saved to localStorage:', newIsDark ? 'dark' : 'light')
32+
// console.log('Saved to localStorage:', newIsDark ? 'dark' : 'light')
3233
}
3334
}
3435

3536
return (
3637
<button
3738
type="button"
38-
className="bg-gray-200 dark:bg-gray-700 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black"
39+
className={`bg-gray-200 dark:bg-gray-700 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black ${className || ''}`}
3940
role="switch"
4041
aria-checked="false"
4142
onClick={toggleDark}

0 commit comments

Comments
 (0)