Skip to content

Commit

Permalink
Add named styles to buttons (#108)
Browse files Browse the repository at this point in the history
Co-authored-by: Samuel Colvin <[email protected]>
  • Loading branch information
sergue1 and samuelcolvin authored Feb 8, 2024
1 parent 5830432 commit c3cacbb
Show file tree
Hide file tree
Showing 6 changed files with 16 additions and 2 deletions.
2 changes: 2 additions & 0 deletions demo/components_list.py
Original file line number Diff line number Diff line change
Expand Up @@ -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.')],
Expand Down
7 changes: 6 additions & 1 deletion src/npm-fastui-bootstrap/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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':
Expand Down
1 change: 1 addition & 0 deletions src/npm-fastui-prebuilt/src/main.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
$primary: black;
$secondary: #666;
$link-color: #0d6efd; // bootstrap primary

@import 'bootstrap/scss/bootstrap';
Expand Down
2 changes: 2 additions & 0 deletions src/npm-fastui/src/models.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -125,6 +126,7 @@ export interface Button {
text: string
onClick?: AnyEvent
htmlType?: 'button' | 'reset' | 'submit'
namedStyle?: NamedStyle
className?: ClassName
type: 'Button'
}
Expand Down
5 changes: 4 additions & 1 deletion src/python-fastui/fastui/class_name.py
Original file line number Diff line number Diff line change
@@ -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')]
1 change: 1 addition & 0 deletions src/python-fastui/fastui/components/__init__.py
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down

0 comments on commit c3cacbb

Please sign in to comment.