wrap radix icons (#2263)
* Add inital ui * More radix updates * Add el inheritance * Add el inheritance for layout * Triggers + primitive prop inheritance * Initial Primitives * Small fix * Update select * Radix Themes fixups (#2245) * [REF-1367] Fix up event trigger specs * Add missing name/value props for form controls Checkbox was incorrectly tagged Button TextArea was incorrectly tagged TextArea.Input * [REF-1364] Radix Link now renders as a NextLink For href as Var or href does not contain the ://, then render as a NextLink for efficient inner-app navigation * More changes * PYI * add @radix-ui/icons to radix.themes * add pyi file * fix for py3.8 --------- Co-authored-by: Alek Petuskey <alekpetuskey@aleks-mbp.lan> Co-authored-by: Masen Furer <m_github@0x26.net>
This commit is contained in:
Thomas Brandého
GitHub
parent
a0bd83b915
commit
0ca903e468
@ -42,6 +42,7 @@ from .dropdownmenu import (
|
||||
)
|
||||
from .hovercard import HoverCardContent, HoverCardRoot, HoverCardTrigger
|
||||
from .iconbutton import IconButton
|
||||
from .icons import Icon
|
||||
from .inset import Inset
|
||||
from .popover import PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger
|
||||
from .radiogroup import RadioGroupItem, RadioGroupRoot
|
||||
@ -132,6 +133,9 @@ hovercard_root = HoverCardRoot.create
|
||||
hovercard_trigger = HoverCardTrigger.create
|
||||
hovercard_content = HoverCardContent.create
|
||||
|
||||
# Icon
|
||||
icon = Icon.create
|
||||
|
||||
# Icon Button
|
||||
icon_button = IconButton.create
|
||||
|
||||
|
||||
400
reflex/components/radix/themes/components/icons.py
Normal file
400
reflex/components/radix/themes/components/icons.py
Normal file
@ -0,0 +1,400 @@
|
||||
"""Radix Icons."""
|
||||
|
||||
|
||||
from typing import List
|
||||
|
||||
from reflex.components.component import Component
|
||||
from reflex.utils import format
|
||||
|
||||
|
||||
class RadixIconComponent(Component):
|
||||
"""A component used as basis for Radix icons."""
|
||||
|
||||
library = "@radix-ui/react-icons"
|
||||
|
||||
|
||||
class Icon(RadixIconComponent):
|
||||
"""An image Icon."""
|
||||
|
||||
tag = "None"
|
||||
|
||||
@classmethod
|
||||
def create(cls, *children, **props) -> Component:
|
||||
"""Initialize the Icon component.
|
||||
|
||||
Run some additional checks on Icon component.
|
||||
|
||||
Args:
|
||||
*children: The positional arguments
|
||||
**props: The keyword arguments
|
||||
|
||||
Raises:
|
||||
AttributeError: The errors tied to bad usage of the Icon component.
|
||||
ValueError: If the icon tag is invalid.
|
||||
|
||||
Returns:
|
||||
The created component.
|
||||
"""
|
||||
if children:
|
||||
raise AttributeError(
|
||||
f"Passing children to Icon component is not allowed: remove positional arguments {children} to fix"
|
||||
)
|
||||
if "tag" not in props.keys():
|
||||
raise AttributeError("Missing 'tag' keyword-argument for Icon")
|
||||
if type(props["tag"]) != str or props["tag"].lower() not in ICON_LIST:
|
||||
raise ValueError(
|
||||
f"Invalid icon tag: {props['tag']}. Please use one of the following: {ICON_LIST}"
|
||||
)
|
||||
props["tag"] = format.to_title_case(props["tag"]) + "Icon"
|
||||
return super().create(*children, **props)
|
||||
|
||||
|
||||
ICON_ABSTRACT: List[str] = [
|
||||
"hamburger_menu",
|
||||
"cross_1",
|
||||
"dots_vertical",
|
||||
"dots_horizontal",
|
||||
"plus",
|
||||
"minus",
|
||||
"check",
|
||||
"cross_2",
|
||||
"check_circled",
|
||||
"cross_circled",
|
||||
"plus_circled",
|
||||
"minus_circled",
|
||||
"question_mark",
|
||||
"question_mark_circled",
|
||||
"info_circled",
|
||||
"accessibility",
|
||||
"exclamation_triangle",
|
||||
"share_1",
|
||||
"share_2",
|
||||
"external_link",
|
||||
"open_in_new_window",
|
||||
"enter",
|
||||
"exit",
|
||||
"download",
|
||||
"upload",
|
||||
"reset",
|
||||
"reload",
|
||||
"update",
|
||||
"enter_full_screen",
|
||||
"exit_full_screen",
|
||||
"drag_handle_vertical",
|
||||
"drag_handle_horizontal",
|
||||
"drag_handle_dots_1",
|
||||
"drag_handle_dots_2",
|
||||
"dot",
|
||||
"dot_filled",
|
||||
"commit",
|
||||
"slash",
|
||||
"circle",
|
||||
"circle_backslash",
|
||||
"half_1",
|
||||
"half_2",
|
||||
"view_none",
|
||||
"view_horizontal",
|
||||
"view_vertical",
|
||||
"view_grid",
|
||||
"copy",
|
||||
"square",
|
||||
]
|
||||
ICON_ALIGNS: List[str] = [
|
||||
"align_top",
|
||||
"align_center_vertically",
|
||||
"align_bottom",
|
||||
"stretch_vertically",
|
||||
"align_left",
|
||||
"align_center_horizontally",
|
||||
"align_right",
|
||||
"stretch_horizontally",
|
||||
"space_between_horizontally",
|
||||
"space_evenly_horizontally",
|
||||
"space_between_vertically",
|
||||
"space_evenly_vertically",
|
||||
"pin_left",
|
||||
"pin_right",
|
||||
"pin_top",
|
||||
"pin_bottom",
|
||||
]
|
||||
ICON_ARROWS: List[str] = [
|
||||
"arrow_left",
|
||||
"arrow_right",
|
||||
"arrow_up",
|
||||
"arrow_down",
|
||||
"arrow_top_left",
|
||||
"arrow_top_right",
|
||||
"arrow_bottom_left",
|
||||
"arrow_bottom_right",
|
||||
"chevron_left",
|
||||
"chevron_right",
|
||||
"chevron_up",
|
||||
"chevron_down",
|
||||
"double_arrow_down",
|
||||
"double_arrow_right",
|
||||
"double_arrow_left",
|
||||
"double_arrow_up",
|
||||
"thick_arrow_up",
|
||||
"thick_arrow_down",
|
||||
"thick_arrow_right",
|
||||
"thick_arrow_left",
|
||||
"triangle_right",
|
||||
"triangle_left",
|
||||
"triangle_down",
|
||||
"triangle_up",
|
||||
"caret_down",
|
||||
"caret_up",
|
||||
"caret_left",
|
||||
"caret_right",
|
||||
"caret_sort",
|
||||
"width",
|
||||
"height",
|
||||
"size",
|
||||
"move",
|
||||
"all_sides",
|
||||
]
|
||||
ICON_BORDERS: List[str] = [
|
||||
"border_all",
|
||||
"border_split",
|
||||
"border_none",
|
||||
"border_left",
|
||||
"border_right",
|
||||
"border_top",
|
||||
"border_bottom",
|
||||
"border_width",
|
||||
"corners",
|
||||
"corner_top_left",
|
||||
"corner_top_right",
|
||||
"corner_bottom_right",
|
||||
"corner_bottom_left",
|
||||
"border_style",
|
||||
"border_solid",
|
||||
"border_dashed",
|
||||
"border_dotted",
|
||||
]
|
||||
ICON_COMPONENTS: List[str] = [
|
||||
"box",
|
||||
"aspect_ratio",
|
||||
"container",
|
||||
"section",
|
||||
"layout",
|
||||
"grid",
|
||||
"table",
|
||||
"image",
|
||||
"switch",
|
||||
"checkbox",
|
||||
"radiobutton",
|
||||
"avatar",
|
||||
"button",
|
||||
"badge",
|
||||
"input",
|
||||
"slider",
|
||||
"quote",
|
||||
"code",
|
||||
"list_bullet",
|
||||
"dropdown_menu",
|
||||
"video",
|
||||
"pie_chart",
|
||||
"calendar",
|
||||
"dashboard",
|
||||
"activity_log",
|
||||
"bar_chart",
|
||||
"divider_horizontal",
|
||||
"divider_vertical",
|
||||
]
|
||||
ICON_DESIGN: List[str] = [
|
||||
"frame",
|
||||
"crop",
|
||||
"layers",
|
||||
"stack",
|
||||
"tokens",
|
||||
"component_1",
|
||||
"component_2",
|
||||
"component_instance",
|
||||
"component_none",
|
||||
"component_boolean",
|
||||
"component_placeholder",
|
||||
"opacity",
|
||||
"blending_mode",
|
||||
"mask_on",
|
||||
"mask_off",
|
||||
"color_wheel",
|
||||
"shadow",
|
||||
"shadow_none",
|
||||
"shadow_inner",
|
||||
"shadow_outer",
|
||||
"value",
|
||||
"value_none",
|
||||
"zoom_in",
|
||||
"zoom_out",
|
||||
"transparency_grid",
|
||||
"group",
|
||||
"dimensions",
|
||||
"rotate_counter_clockwise",
|
||||
"columns",
|
||||
"rows",
|
||||
"transform",
|
||||
"box_model",
|
||||
"padding",
|
||||
"margin",
|
||||
"angle",
|
||||
"cursor_arrow",
|
||||
"cursor_text",
|
||||
"column_spacing",
|
||||
"row_spacing",
|
||||
]
|
||||
ICON_LOGOS: List[str] = [
|
||||
"modulz_logo",
|
||||
"stitches_logo",
|
||||
"figma_logo",
|
||||
"framer_logo",
|
||||
"sketch_logo",
|
||||
"twitter_logo",
|
||||
"icon_jar_logo",
|
||||
"git_hub_logo",
|
||||
"code_sandbox_logo",
|
||||
"notion_logo",
|
||||
"discord_logo",
|
||||
"instagram_logo",
|
||||
"linked_in_logo",
|
||||
]
|
||||
ICON_MUSIC: List[str] = [
|
||||
"play",
|
||||
"resume",
|
||||
"pause",
|
||||
"stop",
|
||||
"track_previous",
|
||||
"track_next",
|
||||
"loop",
|
||||
"shuffle",
|
||||
"speaker_loud",
|
||||
"speaker_moderate",
|
||||
"speaker_quiet",
|
||||
"speaker_off",
|
||||
]
|
||||
ICON_OBJECTS: List[str] = [
|
||||
"magnifying_glass",
|
||||
"gear",
|
||||
"bell",
|
||||
"home",
|
||||
"lock_closed",
|
||||
"lock_open_1",
|
||||
"lock_open_2",
|
||||
"backpack",
|
||||
"camera",
|
||||
"paper_plane",
|
||||
"rocket",
|
||||
"envelope_closed",
|
||||
"envelope_open",
|
||||
"chat_bubble",
|
||||
"link_1",
|
||||
"link_2",
|
||||
"link_break_1",
|
||||
"link_break_2",
|
||||
"link_none_1",
|
||||
"link_none_2",
|
||||
"trash",
|
||||
"pencil_1",
|
||||
"pencil_2",
|
||||
"bookmark",
|
||||
"bookmark_filled",
|
||||
"drawing_pin",
|
||||
"drawing_pin_filled",
|
||||
"sewing_pin",
|
||||
"sewing_pin_filled",
|
||||
"cube",
|
||||
"archive",
|
||||
"crumpled_paper",
|
||||
"mix",
|
||||
"mixer_horizontal",
|
||||
"mixer_vertical",
|
||||
"file",
|
||||
"file_minus",
|
||||
"file_plus",
|
||||
"file_text",
|
||||
"reader",
|
||||
"card_stack",
|
||||
"card_stack_plus",
|
||||
"card_stack_minus",
|
||||
"id_card",
|
||||
"crosshair_1",
|
||||
"crosshair_2",
|
||||
"target",
|
||||
"globe",
|
||||
"disc",
|
||||
"sun",
|
||||
"moon",
|
||||
"clock",
|
||||
"timer",
|
||||
"counter_clockwise_clock",
|
||||
"countdown_timer",
|
||||
"stopwatch",
|
||||
"lap_timer",
|
||||
"lightning_bolt",
|
||||
"magic_wand",
|
||||
"face",
|
||||
"person",
|
||||
"eye_open",
|
||||
"eye_none",
|
||||
"eye_closed",
|
||||
"hand",
|
||||
"ruler_horizontal",
|
||||
"ruler_square",
|
||||
"clipboard",
|
||||
"clipboard_copy",
|
||||
"desktop",
|
||||
"laptop",
|
||||
"mobile",
|
||||
"keyboard",
|
||||
"star",
|
||||
"star_filled",
|
||||
"heart",
|
||||
"heart_filled",
|
||||
"scissors",
|
||||
"hobby_knife",
|
||||
"eraser",
|
||||
"cookie",
|
||||
]
|
||||
ICON_TYPOGRAPHY: List[str] = [
|
||||
"font_style",
|
||||
"font_italic",
|
||||
"font_roman",
|
||||
"font_bold",
|
||||
"letter_case_lowercase",
|
||||
"letter_case_capitalize",
|
||||
"letter_case_uppercase",
|
||||
"letter_case_toggle",
|
||||
"letter_spacing",
|
||||
"align_baseline",
|
||||
"font_size",
|
||||
"font_family",
|
||||
"heading",
|
||||
"text",
|
||||
"text_none",
|
||||
"line_height",
|
||||
"underline",
|
||||
"strikethrough",
|
||||
"overline",
|
||||
"pilcrow",
|
||||
"text_align_left",
|
||||
"text_align_center",
|
||||
"text_align_right",
|
||||
"text_align_justify",
|
||||
"text_align_top",
|
||||
"text_align_middle",
|
||||
"text_align_bottom",
|
||||
"dash",
|
||||
]
|
||||
|
||||
ICON_LIST: List[str] = [
|
||||
*ICON_ABSTRACT,
|
||||
*ICON_ALIGNS,
|
||||
*ICON_ARROWS,
|
||||
*ICON_BORDERS,
|
||||
*ICON_COMPONENTS,
|
||||
*ICON_DESIGN,
|
||||
*ICON_LOGOS,
|
||||
*ICON_MUSIC,
|
||||
*ICON_OBJECTS,
|
||||
*ICON_TYPOGRAPHY,
|
||||
]
|
||||
185
reflex/components/radix/themes/components/icons.pyi
Normal file
185
reflex/components/radix/themes/components/icons.pyi
Normal file
@ -0,0 +1,185 @@
|
||||
"""Stub file for reflex/components/radix/themes/components/icons.py"""
|
||||
# ------------------- DO NOT EDIT ----------------------
|
||||
# This file was generated by `scripts/pyi_generator.py`!
|
||||
# ------------------------------------------------------
|
||||
|
||||
from typing import Any, Dict, Literal, Optional, Union, overload
|
||||
from reflex.vars import Var, BaseVar, ComputedVar
|
||||
from reflex.event import EventChain, EventHandler, EventSpec
|
||||
from reflex.style import Style
|
||||
from typing import List
|
||||
from reflex.components.component import Component
|
||||
from reflex.utils import format
|
||||
|
||||
class RadixIconComponent(Component):
|
||||
@overload
|
||||
@classmethod
|
||||
def create( # type: ignore
|
||||
cls,
|
||||
*children,
|
||||
style: Optional[Style] = None,
|
||||
key: Optional[Any] = None,
|
||||
id: Optional[Any] = None,
|
||||
class_name: Optional[Any] = None,
|
||||
autofocus: Optional[bool] = None,
|
||||
custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
|
||||
on_blur: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_click: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_context_menu: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_double_click: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_focus: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mount: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_down: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_enter: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_leave: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_move: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_out: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_over: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_up: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_scroll: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_unmount: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
**props
|
||||
) -> "RadixIconComponent":
|
||||
"""Create the component.
|
||||
|
||||
Args:
|
||||
*children: The children of the component.
|
||||
style: The style of the component.
|
||||
key: A unique key for the component.
|
||||
id: The id for the component.
|
||||
class_name: The class name for the component.
|
||||
autofocus: Whether the component should take the focus once the page is loaded
|
||||
custom_attrs: custom attribute
|
||||
**props: The props of the component.
|
||||
|
||||
Returns:
|
||||
The component.
|
||||
|
||||
Raises:
|
||||
TypeError: If an invalid child is passed.
|
||||
"""
|
||||
...
|
||||
|
||||
class Icon(RadixIconComponent):
|
||||
@overload
|
||||
@classmethod
|
||||
def create( # type: ignore
|
||||
cls,
|
||||
*children,
|
||||
style: Optional[Style] = None,
|
||||
key: Optional[Any] = None,
|
||||
id: Optional[Any] = None,
|
||||
class_name: Optional[Any] = None,
|
||||
autofocus: Optional[bool] = None,
|
||||
custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
|
||||
on_blur: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_click: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_context_menu: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_double_click: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_focus: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mount: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_down: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_enter: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_leave: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_move: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_out: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_over: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_up: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_scroll: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_unmount: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
**props
|
||||
) -> "Icon":
|
||||
"""Initialize the Icon component.
|
||||
|
||||
Run some additional checks on Icon component.
|
||||
|
||||
Args:
|
||||
*children: The positional arguments
|
||||
style: The style of the component.
|
||||
key: A unique key for the component.
|
||||
id: The id for the component.
|
||||
class_name: The class name for the component.
|
||||
autofocus: Whether the component should take the focus once the page is loaded
|
||||
custom_attrs: custom attribute
|
||||
**props: The keyword arguments
|
||||
|
||||
Raises:
|
||||
AttributeError: The errors tied to bad usage of the Icon component.
|
||||
ValueError: If the icon tag is invalid.
|
||||
|
||||
Returns:
|
||||
The created component.
|
||||
"""
|
||||
...
|
||||
|
||||
ICON_ABSTRACT: List[str]
|
||||
ICON_ALIGNS: List[str]
|
||||
ICON_ARROWS: List[str]
|
||||
ICON_BORDERS: List[str]
|
||||
ICON_COMPONENTS: List[str]
|
||||
ICON_DESIGN: List[str]
|
||||
ICON_LOGOS: List[str]
|
||||
ICON_MUSIC: List[str]
|
||||
ICON_OBJECTS: List[str]
|
||||
ICON_TYPOGRAPHY: List[str]
|
||||
ICON_LIST: List[str]
|
||||
Loading…
Reference in New Issue
Block a user