Add named styles to buttons

Author: sergue1

demo/components_list.py

@@ -88,6 +88,8 @@ class Delivery(BaseModel):
                 c.Heading(text='Button and Modal', level=2),
                 c.Paragraph(text='The button below will open a modal with static content.'),
                 c.Button(text='Show Static Modal', on_click=PageEvent(name='static-modal')),
+                c.Button(text='Secondary Button', mode='secondary', class_name='+ ms-2'),
+                c.Button(text='Warning Button', mode='warning', class_name='+ ms-2'),
                 c.Modal(
                     title='Static Modal',
                     body=[c.Paragraph(text='This is some static content that was set when the modal was defined.')],

src/npm-fastui-bootstrap/src/index.tsx

@@ -24,7 +24,12 @@ export const classNameGenerator: ClassNameGenerator = ({ props, fullPath, subEle
     case 'Page':
       return 'container mt-80'
     case 'Button':
-      return 'btn btn-primary'
+      return {
+        btn: true,
+        'btn-primary': !props.mode || props.mode === 'primary',
+        'btn-secondary': props.mode === 'secondary',
+        'btn-warning': props.mode === 'warning',
+      }
     case 'Table':
       switch (subElement) {
         case 'no-data-message':

src/npm-fastui/src/components/button.tsx

@@ -7,6 +7,7 @@ export interface ButtonProps {
   type: 'Button'
   text: string
   onClick?: AnyEvent
+  mode?: 'primary' | 'secondary' | 'warning'
   htmlType?: 'button' | 'submit' | 'reset'
   className?: ClassName
 }

src/python-fastui/fastui/components/__init__.py

@@ -141,6 +141,7 @@ class Button(_p.BaseModel, extra='forbid'):
         default=None, serialization_alias='htmlType'
     )
     class_name: _class_name.ClassNameField = None
+    mode: _t.Union[_t.Literal['primary', 'secondary', 'warning'], None] = None
     type: _t.Literal['Button'] = 'Button'
 
 

src/python-fastui/tests/react-fastui-json-schema.json

@@ -61,6 +61,10 @@
           "enum": ["button", "reset", "submit"],
           "type": "string"
         },
+        "mode": {
+          "enum": ["primary", "secondary", "warning"],
+          "type": "string"
+        },
         "onClick": {
           "anyOf": [
             {