Feature: st.toast #6783

mayagbarnes · 2023-06-02T17:54:47Z

📚 Context

Adds a new widget for notification toasts using st.toast - covers the use case for notifications that don't disrupt the flow/organization of the existing app. This is distinct from the existing st.warning, st.error, st.success & st.info, which are inline. st.toast params are as follows:
text(str) - Short message for the toast.
icon(None or str) - An optional, keyword-only argument that specifies an emoji to use as the icon for the toast. Shortcodes are not allowed, please use a single character instead. E.g. "🚨", "🔥", "🤖", etc. Defaults to None, which means no icon is displayed.

What kind of change does this PR introduce?
- Feature
- Refactor

NOTE: This PR also creates a new event rendering construct in an effort to distinguish events from persistent elements like widgets. The path is as follows:

new RootContainer constant -> EVENT
lib/streamlit/__init__.py -> toast mapped to event.toast vs. other methods on main
AppView.tsx has a new EventContainer that uses existing renderBlock method that takes in event elements

🧪 Testing Done

Screenshots included
Added/Updated unit tests
Added/Updated e2e tests

🌐 References

Demo App: link
Product Spec: link
Figma Mocks: link

lib/streamlit/elements/alert.py

lib/streamlit/elements/toast.py

mayagbarnes · 2023-06-02T18:30:43Z

frontend/src/app/App.tsx

@@ -1565,6 +1565,8 @@ export class App extends PureComponent<Props, State> {
        value={{
          initialSidebarState,
          wideMode: userSettings.wideMode,
+          toastAdjustment:


When host is Community Cloud, toolbar items are sent - this is used as a proxy to check whether toast position should be moved up not to interfere with their Manage App button

mayagbarnes · 2023-06-02T19:03:53Z

lib/streamlit/elements/alert.py


 if TYPE_CHECKING:
    from streamlit.delta_generator import DeltaGenerator
    from streamlit.type_util import SupportsStr


-def validate_emoji(maybe_emoji: Optional[str]) -> str:


Moved function to string_util.py so it can be shared with toast

vdonato

LGTM! Most of my comments are nits, but I'll probably want to take a second pass at this later given the length of the PR + app/lib split. I'm guessing this should be easy to do since this PR will likely be open awhile while waiting for QA.

It'd also be good to have @tconkling sanity check this for the app/lib split implications since I'm not yet entirely confident in my ability to reason about what should live where, but nothing stuck out to me about how everything is organized.

frontend/src/app/components/AppView/styled-components.ts

frontend/src/lib/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx

frontend/src/lib/components/shared/StreamlitMarkdown/styled-components.ts

e2e/specs/st_toast.spec.js

lib/streamlit/elements/toast.py

frontend/src/app/components/EventContainer/EventContainer.tsx

frontend/src/lib/components/elements/Toast/Toast.test.tsx

vdonato · 2023-06-07T23:08:06Z

frontend/src/lib/components/elements/Toast/Toast.tsx

+        width: "288px",
+        marginTop: "8px",
+        borderRadius: "4px",


nit: would be nice to move these into the theme object if there are reasonable places to put them (same comment for a few other magic values in this file + throughout the PR)

sfc-gh-dmatthews · 2023-06-12T16:45:11Z

Hi @mayagbarnes, I'm just working on the docs and just FYI I'm getting a nit warning on line 28 about using is instead of == with a literal.

streamlit/lib/streamlit/elements/toast.py

Line 28 in 867ece0

if toast_text is "":

Cheers!

sfc-gh-jcarroll · 2023-06-21T18:25:48Z

@mayagbarnes we had a late request in office hours today to conform better with other APIs and name the first parameter body instead of text. We only use text currently for spinner and progress and everything else uses body.

I'm very sorry for missing this earlier!! If it's a big effort to change or otherwise warrants further discussion, let me know, happy to do it.

* develop: Feature: st.toast (streamlit#6783) Bump semver from 5.7.1 to 5.7.2 in /frontend (streamlit#6982) Add host communication e2e tests (streamlit#6806) Re-add homepage to package.json (streamlit#6987) Remove unnecessary code and Add rm commands to make clean (streamlit#6980) Allow setting placeholder for st.selectbox (streamlit#6913) Allow setting placeholder for st.multiselect (streamlit#6901) Also use bottom padding in embedded mode for chat input (streamlit#6979) Feature/st lib (streamlit#6692) Remove unused import (streamlit#6977) Release 1.24.1 (streamlit#6965) Update st.audio/st.video docstrings (streamlit#6964) Slightly simplify bug report template (streamlit#6972) Fix baseweb warnings by using longhand properties (streamlit#6976)

Adds a new widget for notification toasts using st.toast - covers the use case for notifications that don't disrupt the flow/organization of the existing app. This is distinct from the existing st.warning, st.error, st.success & st.info, which are inline. NOTE: This PR also creates a new event rendering construct in an effort to distinguish events from persistent elements like widgets. The path is as follows: - new RootContainer constant -> EVENT - lib/streamlit/__init__.py -> toast mapped to event.toast vs. other methods on main - AppView.tsx has a new EventContainer that uses existing renderBlock method that takes in event elements

mayagbarnes added 10 commits June 1, 2023 19:36

First pass - toasts as events

a38e945

Add comment for event methods

fe658d1

Disallow colored text in toasts

e9e34d5

Fix alert import

f1002e7

Refactor FE to use renderBlock

0ce589d

Remove zindex, add notes

1352621

Rename communityCloud boolean & fix lints

67fb7f3

Add/Fix BE/FE/e2e tests

186505c

Fix e2e test & update snapshots

e2077ac

Remove type param

bf189d6

github-advanced-security bot found potential problems Jun 2, 2023

View reviewed changes

lib/streamlit/elements/alert.py Fixed Show fixed Hide fixed

lib/streamlit/elements/toast.py Fixed Show fixed Hide fixed

Update comments and fix lints

e2b0215

mayagbarnes commented Jun 2, 2023

View reviewed changes

mayagbarnes added 2 commits June 2, 2023 13:05

Fix bg color, add comments

cb99e25

Update snapshots

6a206b3

mayagbarnes added the security-assessment-completed label Jun 2, 2023

mayagbarnes changed the title ~~[WIP] Feature: st.toast~~ Feature: st.toast Jun 2, 2023

mayagbarnes added 3 commits June 2, 2023 15:19

Merge branch 'develop' into feature/toast

4804f6a

First pass - sidebar error handling

428c7a0

Revise sidebar error message

23704bd

mayagbarnes added change:feature impact:users labels Jun 5, 2023

Add test for error message

867ece0

mayagbarnes added the QA-Needed QA is Required label Jun 5, 2023

mayagbarnes marked this pull request as ready for review June 5, 2023 23:11

mayagbarnes requested review from vdonato, tconkling, LukasMasuch and sfc-gh-mnowotka as code owners June 5, 2023 23:11

vdonato approved these changes Jun 7, 2023

View reviewed changes

mayagbarnes added 3 commits June 23, 2023 13:34

Unwind no colored text

ad1a94a

Address PR comments, change text param to body

b5f995b

Merge branch 'develop' into feature/toast

ad0761c

mayagbarnes force-pushed the feature/toast branch from ef04922 to ad0761c Compare June 23, 2023 22:03

mayagbarnes added 4 commits June 23, 2023 15:56

Refactor toast spec & fix lints

7b23cdf

Merge branch 'develop' into feature/toast

ce0d8b4

Fix newly added tests

ed58956

Fix naming of snaps

b07b176

mayagbarnes force-pushed the feature/toast branch from 51507df to 948a0f2 Compare July 11, 2023 03:54

mayagbarnes requested review from kmcgrady and AnOctopus as code owners July 11, 2023 03:54

Merge develop/Resolve st-lib changes

f7dbee6

mayagbarnes force-pushed the feature/toast branch from 948a0f2 to f7dbee6 Compare July 11, 2023 04:19

mayagbarnes removed request for kmcgrady and AnOctopus July 11, 2023 04:20

mayagbarnes added QA-Done QA is Complete and removed QA-Needed QA is Required labels Jul 11, 2023

Update docstring

9873b84

mayagbarnes merged commit 64e1a39 into develop Jul 12, 2023
85 checks passed

mayagbarnes deleted the feature/toast branch July 12, 2023 03:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: st.toast #6783

Feature: st.toast #6783

mayagbarnes commented Jun 2, 2023 •

edited

mayagbarnes Jun 2, 2023

mayagbarnes Jun 2, 2023

vdonato left a comment

vdonato Jun 7, 2023

sfc-gh-dmatthews commented Jun 12, 2023

sfc-gh-jcarroll commented Jun 21, 2023

Feature: st.toast #6783

Feature: st.toast #6783

Conversation

mayagbarnes commented Jun 2, 2023 • edited

📚 Context

🧪 Testing Done

🌐 References

mayagbarnes Jun 2, 2023

Choose a reason for hiding this comment

mayagbarnes Jun 2, 2023

Choose a reason for hiding this comment

vdonato left a comment

Choose a reason for hiding this comment

vdonato Jun 7, 2023

Choose a reason for hiding this comment

sfc-gh-dmatthews commented Jun 12, 2023

sfc-gh-jcarroll commented Jun 21, 2023

mayagbarnes commented Jun 2, 2023 •

edited