diff --git a/pynecone/components/__init__.py b/pynecone/components/__init__.py index 7dfb7cd5e..268dedbb3 100644 --- a/pynecone/components/__init__.py +++ b/pynecone/components/__init__.py @@ -41,6 +41,11 @@ stat_group = StatGroup.create stat_help_text = StatHelpText.create stat_label = StatLabel.create stat_number = StatNumber.create +tag = Tag.create +tag_label = TagLabel.create +tag_left_icon = TagLeftIcon.create +tag_right_icon = TagRightIcon.create +tag_close_button = TagCloseButton.create table = Table.create table_caption = TableCaption.create table_container = TableContainer.create diff --git a/pynecone/components/datadisplay/__init__.py b/pynecone/components/datadisplay/__init__.py index 33ec42815..3d3a15545 100644 --- a/pynecone/components/datadisplay/__init__.py +++ b/pynecone/components/datadisplay/__init__.py @@ -8,3 +8,4 @@ from .keyboard_key import KeyboardKey from .list import List, ListItem, OrderedList, UnorderedList from .stat import Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber from .table import Table, TableCaption, TableContainer, Tbody, Td, Tfoot, Th, Thead, Tr +from .tag import Tag, TagCloseButton, TagLabel, TagLeftIcon, TagRightIcon diff --git a/pynecone/components/datadisplay/tag.py b/pynecone/components/datadisplay/tag.py new file mode 100644 index 000000000..f5a24b2d6 --- /dev/null +++ b/pynecone/components/datadisplay/tag.py @@ -0,0 +1,79 @@ +"""Chakra Tag Component.""" +from typing import Optional + +from pynecone.components.component import Component +from pynecone.components.libs.chakra import ChakraComponent +from pynecone.vars import Var + + +class TagLabel(ChakraComponent): + """The label of the tag.""" + + tag = "TagLabel" + + +class TagLeftIcon(ChakraComponent): + """The left icon of the tag.""" + + tag = "TagLeftIcon" + + +class TagRightIcon(ChakraComponent): + """The right icon of the tag.""" + + tag = "TagRightIcon" + + +class TagCloseButton(ChakraComponent): + """The close button of the tag.""" + + tag = "TagCloseButton" + + +class Tag(ChakraComponent): + """The parent wrapper that provides context for its children.""" + + tag = "Tag" + + # The visual color appearance of the tag. + # options: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | + # "cyan" | "purple" | "pink" + # default: "gray" + color_scheme: Var[str] + + # The size of the tag + # options: "sm" | "md" | "lg" + # default: "md" + size: Var[str] + + # The variant of the tag + # options: "solid" | "subtle" | "outline" + # default: "solid" + variant: Var[str] + + @classmethod + def create( + cls, + label: Component, + *, + left_icon: Optional[Component] = None, + right_icon: Optional[Component] = None, + close_button: Optional[Component] = None, + **props + ) -> Component: + """Creates a Chakra Tag with a label and optionally left_icon, right_icon, and close_button, and returns it. + + Args: + label (Component): The label of the Tag that will be created. + left_icon (Optional[Component]): Should be a pc.TagLeftIcon instance. + right_icon (Optional[Component]): Should be a pc.TagRightIcon instance. + close_button (Optional[Component]): Should be a pc.TagCloseButton instance. + props: The properties to be passed to the component. + + Returns: + The `create()` method returns a Tag object. + """ + children = [ + x for x in (left_icon, label, right_icon, close_button) if x is not None + ] + return super().create(*children, **props)