Add named styles to buttons (#108)

Co-authored-by: Samuel Colvin <s@muelcolvin.com>

Author: sergue1

demo/components_list.py

@@ -92,6 +92,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', named_style='secondary', class_name='+ ms-2'),
+                c.Button(text='Warning Button', named_style='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

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

src/npm-fastui-prebuilt/src/main.scss

@@ -1,4 +1,5 @@
 $primary: black;
+$secondary: #666;
 $link-color: #0d6efd; // bootstrap primary
 
 @import 'bootstrap/scss/bootstrap';

src/npm-fastui/src/models.d.ts

@@ -55,6 +55,7 @@ export type JsonData =
       [k: string]: JsonData
     }
 export type AnyEvent = PageEvent | GoToEvent | BackEvent | AuthEvent
+export type NamedStyle = 'primary' | 'secondary' | 'warning'
 export type DisplayMode =
   | 'auto'
   | 'plain'
@@ -125,6 +126,7 @@ export interface Button {
   text: string
   onClick?: AnyEvent
   htmlType?: 'button' | 'reset' | 'submit'
+  namedStyle?: NamedStyle
   className?: ClassName
   type: 'Button'
 }

src/python-fastui/fastui/class_name.py

@@ -1,8 +1,11 @@
 # could be renamed to something general if there's more to add
-from typing import Dict, List, Union
+from typing import Dict, List, Literal, Union
 
 from pydantic import Field
 from typing_extensions import Annotated, TypeAliasType
 
 ClassName = TypeAliasType('ClassName', Union[str, List['ClassName'], Dict[str, Union[bool, None]], None])
 ClassNameField = Annotated[ClassName, Field(serialization_alias='className')]
+
+NamedStyle = TypeAliasType('NamedStyle', Union[Literal['primary', 'secondary', 'warning'], None])
+NamedStyleField = Annotated[NamedStyle, Field(serialization_alias='namedStyle')]

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

@@ -153,6 +153,7 @@ class Button(_p.BaseModel, extra='forbid'):
     html_type: _t.Union[_t.Literal['button', 'reset', 'submit'], None] = _p.Field(
         default=None, serialization_alias='htmlType'
     )
+    named_style: _class_name.NamedStyleField = None
     class_name: _class_name.ClassNameField = None
     type: _t.Literal['Button'] = 'Button'