Skip to content

fix(components): honor unstyled prop for components bypassing set_class_name #32

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

Open
elviskahoro wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(components): honor unstyled prop for components bypassing set_class_name #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
14 changes: 8 additions & 6 deletions assets/docs/components/attachment.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,18 +173,20 @@ class Button(BaseButton, CoreComponent):
def create(cls, *children, **props) -> BaseButton:
variant = props.pop("variant", "default")
size = props.pop("size", "default")
custom_classes = props.pop("class_name", "")
data_slot = props.pop("data_slot", "button")

return super().create(
*children,
data_slot=data_slot,
class_name=cn(
cls.set_class_name(
cn(
DEFAULT_CLASS_NAME,
BUTTON_VARIANTS["variant"].get(variant, ""),
BUTTON_VARIANTS["size"].get(size, ""),
custom_classes,
),
props,
)

return super().create(
*children,
data_slot=data_slot,
**props,
)

Expand Down
30 changes: 10 additions & 20 deletions assets/docs/components/avatar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,13 +108,11 @@ class ClassNames:
class AvatarRoot(Div, CoreComponent):
@classmethod
def create(cls, *children, **props) -> Div:
custom_classes = props.pop("class_name", "")
size = props.pop("size", "default")
props["data-slot"] = "avatar"
props["data-size"] = size
return super().create(
*children, class_name=cn(ClassNames.ROOT, custom_classes), **props
)
cls.set_class_name(ClassNames.ROOT, props)
return super().create(*children, **props)


class AvatarImage(CoreComponent):
Expand Down Expand Up @@ -156,42 +154,34 @@ class AvatarImage(CoreComponent):
class AvatarFallback(Span, CoreComponent):
@classmethod
def create(cls, *children, **props) -> Span:
custom_classes = props.pop("class_name", "")
props["data-slot"] = "avatar-fallback"
props["style"] = {"display": "none", **props.get("style", {})}
return super().create(
*children, class_name=cn(ClassNames.FALLBACK, custom_classes), **props
)
cls.set_class_name(ClassNames.FALLBACK, props)
return super().create(*children, **props)


class AvatarBadge(Span, CoreComponent):
@classmethod
def create(cls, *children, **props) -> Span:
custom_classes = props.pop("class_name", "")
props["data-slot"] = "avatar-badge"
return super().create(
*children, class_name=cn(ClassNames.BADGE, custom_classes), **props
)
cls.set_class_name(ClassNames.BADGE, props)
return super().create(*children, **props)


class AvatarGroup(Div, CoreComponent):
@classmethod
def create(cls, *children, **props) -> Div:
custom_classes = props.pop("class_name", "")
props["data-slot"] = "avatar-group"
return super().create(
*children, class_name=cn(ClassNames.GROUP, custom_classes), **props
)
cls.set_class_name(ClassNames.GROUP, props)
return super().create(*children, **props)


class AvatarGroupCount(Div, CoreComponent):
@classmethod
def create(cls, *children, **props) -> Div:
custom_classes = props.pop("class_name", "")
props["data-slot"] = "avatar-group-count"
return super().create(
*children, class_name=cn(ClassNames.GROUP_COUNT, custom_classes), **props
)
cls.set_class_name(ClassNames.GROUP_COUNT, props)
return super().create(*children, **props)


class Avatar(ComponentNamespace):
Expand Down
9 changes: 3 additions & 6 deletions assets/docs/components/badge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,16 +108,13 @@ def badge_variants(variant: str = "default") -> Var:
class BadgeComponent(Span, CoreComponent):
@classmethod
def create(cls, *children, **props) -> Span:
custom_classes = props.pop("class_name", "")
variant = props.pop("variant", "default")
props["data-slot"] = "badge"
props["data-variant"] = variant

return super().create(
*children,
class_name=cn(badge_variants(variant), custom_classes),
**props,
)
cls.set_class_name(badge_variants(variant), props)

return super().create(*children, **props)


class Badge(CoreComponent):
Expand Down
14 changes: 8 additions & 6 deletions assets/docs/components/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,18 +173,20 @@ class Button(BaseButton, CoreComponent):
def create(cls, *children, **props) -> BaseButton:
variant = props.pop("variant", "default")
size = props.pop("size", "default")
custom_classes = props.pop("class_name", "")
data_slot = props.pop("data_slot", "button")

return super().create(
*children,
data_slot=data_slot,
class_name=cn(
cls.set_class_name(
cn(
DEFAULT_CLASS_NAME,
BUTTON_VARIANTS["variant"].get(variant, ""),
BUTTON_VARIANTS["size"].get(size, ""),
custom_classes,
),
props,
)

return super().create(
*children,
data_slot=data_slot,
**props,
)

Expand Down
51 changes: 15 additions & 36 deletions assets/docs/components/frame.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,6 @@ class FrameRoot(CoreComponent):
spacing: LiteralSpacing = props.pop("spacing", "default")
stacked: bool = props.pop("stacked", False)
dense: bool = props.pop("dense", False)
class_name: str = props.pop("class_name", "")

stacked_class = (
"gap-0 *:has-[+[data-slot=frame-panel]]:rounded-b-none *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:rounded-t-none *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:border-t-0"
Expand All @@ -125,78 +124,58 @@ class FrameRoot(CoreComponent):
props["data-slot"] = "frame"
props["data-spacing"] = spacing

return rx.el.div(
*children,
class_name=cn(
cls.set_class_name(
cn(
ClassNames.ROOT,
VARIANT_CLASSES.get(variant, ""),
SPACING_CLASSES.get(spacing, ""),
stacked_class,
dense_class,
class_name,
),
**props,
props,
)

return rx.el.div(*children, **props)


class FramePanel(CoreComponent):
@classmethod
def create(cls, *children, **props) -> rx.Component:
class_name: str = props.pop("class_name", "")
props["data-slot"] = "frame-panel"
return rx.el.div(
*children,
class_name=cn(ClassNames.PANEL, class_name),
**props,
)
cls.set_class_name(ClassNames.PANEL, props)
return rx.el.div(*children, **props)


class FrameHeader(CoreComponent):
@classmethod
def create(cls, *children, **props) -> rx.Component:
class_name: str = props.pop("class_name", "")
props["data-slot"] = "frame-panel-header"
return rx.el.header(
*children,
class_name=cn(ClassNames.HEADER, class_name),
**props,
)
cls.set_class_name(ClassNames.HEADER, props)
return rx.el.header(*children, **props)


class FrameTitle(CoreComponent):
@classmethod
def create(cls, *children, **props) -> rx.Component:
class_name: str = props.pop("class_name", "")
props["data-slot"] = "frame-panel-title"
return rx.el.div(
*children,
class_name=cn(ClassNames.TITLE, class_name),
**props,
)
cls.set_class_name(ClassNames.TITLE, props)
return rx.el.div(*children, **props)


class FrameDescription(CoreComponent):
@classmethod
def create(cls, *children, **props) -> rx.Component:
class_name: str = props.pop("class_name", "")
props["data-slot"] = "frame-panel-description"
return rx.el.div(
*children,
class_name=cn(ClassNames.DESCRIPTION, class_name),
**props,
)
cls.set_class_name(ClassNames.DESCRIPTION, props)
return rx.el.div(*children, **props)


class FrameFooter(CoreComponent):
@classmethod
def create(cls, *children, **props) -> rx.Component:
class_name: str = props.pop("class_name", "")
props["data-slot"] = "frame-panel-footer"
return rx.el.footer(
*children,
class_name=cn(ClassNames.FOOTER, class_name),
**props,
)
cls.set_class_name(ClassNames.FOOTER, props)
return rx.el.footer(*children, **props)


class Frame(ComponentNamespace):
Expand Down
22 changes: 11 additions & 11 deletions assets/docs/components/input-group.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,18 +173,20 @@ class Button(BaseButton, CoreComponent):
def create(cls, *children, **props) -> BaseButton:
variant = props.pop("variant", "default")
size = props.pop("size", "default")
custom_classes = props.pop("class_name", "")
data_slot = props.pop("data_slot", "button")

return super().create(
*children,
data_slot=data_slot,
class_name=cn(
cls.set_class_name(
cn(
DEFAULT_CLASS_NAME,
BUTTON_VARIANTS["variant"].get(variant, ""),
BUTTON_VARIANTS["size"].get(size, ""),
custom_classes,
),
props,
)

return super().create(
*children,
data_slot=data_slot,
**props,
)

Expand All @@ -207,7 +209,7 @@ button = Button.create
from reflex.components.component import ComponentNamespace
from reflex_components_core.el import Input as BaseInput

from ..core.core import CoreComponent, cn
from ..core.core import CoreComponent


class ClassNames:
Expand All @@ -230,15 +232,13 @@ class InputComponent(BaseInput, CoreComponent):
@classmethod
def create(cls, *children, **props) -> BaseInput:

existing_class = props.get("class_name", "")

props["class_name"] = cn(ClassNames.INPUT, existing_class)

props.setdefault("data_slot", "input")

if "type" not in props:
props["type"] = "text"

cls.set_class_name(ClassNames.INPUT, props)

return super().create(*children, **props)


Expand Down
8 changes: 3 additions & 5 deletions assets/docs/components/input.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ def cn(*classes: Var | str | tuple | list | None) -> Var:
from reflex.components.component import ComponentNamespace
from reflex_components_core.el import Input as BaseInput

from ..core.core import CoreComponent, cn
from ..core.core import CoreComponent


class ClassNames:
Expand All @@ -88,15 +88,13 @@ class InputComponent(BaseInput, CoreComponent):
@classmethod
def create(cls, *children, **props) -> BaseInput:

existing_class = props.get("class_name", "")

props["class_name"] = cn(ClassNames.INPUT, existing_class)

props.setdefault("data_slot", "input")

if "type" not in props:
props["type"] = "text"

cls.set_class_name(ClassNames.INPUT, props)

return super().create(*children, **props)


Expand Down
15 changes: 12 additions & 3 deletions assets/docs/components/select.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,14 +173,23 @@ class NativeSelectComponent(CoreComponent):
size = props.pop("size", "default")
wrapper_class_name = props.pop("wrapper_class_name", "")
data_slot = props.pop("data_slot", "native-select")
unstyled = props.pop("unstyled", False)

select_class_name = cn(ClassNames.SELECT, props.get("class_name", ""))
props["class_name"] = select_class_name
select_user_class = props.get("class_name", "")
props["class_name"] = (
select_user_class if unstyled else cn(ClassNames.SELECT, select_user_class)
)
props["data-slot"] = data_slot
props["data-size"] = size

select_el = rx.el.select(*children, **props)

wrapper_class = (
wrapper_class_name
if unstyled
else cn(ClassNames.WRAPPER, wrapper_class_name)
)

return rx.el.div(
select_el,
hi(
Expand All @@ -191,7 +200,7 @@ class NativeSelectComponent(CoreComponent):
),
data_slot="native-select-wrapper",
data_size=size,
class_name=cn(ClassNames.WRAPPER, wrapper_class_name),
class_name=wrapper_class,
)


Expand Down
8 changes: 3 additions & 5 deletions assets/docs/components/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ def cn(*classes: Var | str | tuple | list | None) -> Var:
from reflex.components.component import ComponentNamespace
from reflex_components_core.el import Input as BaseInput

from ..core.core import CoreComponent, cn
from ..core.core import CoreComponent


class ClassNames:
Expand All @@ -88,15 +88,13 @@ class InputComponent(BaseInput, CoreComponent):
@classmethod
def create(cls, *children, **props) -> BaseInput:

existing_class = props.get("class_name", "")

props["class_name"] = cn(ClassNames.INPUT, existing_class)

props.setdefault("data_slot", "input")

if "type" not in props:
props["type"] = "text"

cls.set_class_name(ClassNames.INPUT, props)

return super().create(*children, **props)


Expand Down
Loading