Material 3 Theme v1.2.3

Announcements
1

Hi everyone,

There’s a new version of the Material 3 Theme out! Here’s what has changed:

New Components

  • Avatar: The Avatar component is for displaying a user’s avatar. It has the following key properties:
    • image: This is the image that will be displayed on the avatar
    • name: You can associate the user’s name with the Avatar. If no image is provided, the Avatar will display the user’s initials, generated from the name
    • fallback_icon: By default, if no image or name is provided, the Avatar will display the person icon. You can change this icon by setting the fallback_icon property
  • AvatarMenu: Like the ButtonMenu, the AvatarMenu component is an Avatar component that opens a popup menu when clicked. You can drag and drop components into this menu from the Anvil Editor, or add components via the menu_items property. MenuItem components are designed to be added to this menu (but you can add whatever you want!).
  • IconButtonMenu: Similarly, the IconButtonMenu component is an IconButton that opens a popup menu when clicked.

Here’s an example of the new AvatarMenu in use:
avatar-menu-example

Updates

  • Theme colors are now set to CSS variables. This means that if app.theme_colors is updated at runtime, colors set in component properties will update.

Fixes

  • Fixed an extraneous import in theme.css
  • Fixed an issue where Buttons could be out of alignment in built-in Anvil modals (such as the Login Form)
  • Fixed an issue where canceling the FileLoader file selector window instead of selecting a file could raise an IndexError
  • The theme now accomodates the Free Banner, which previously overlayed the page content
  • For properties that set a JS element’s innerText, the property is first set to a string. This stops Python booleans from being converted to JS booleans (e.g. True was previously displayed as true)
  • The tooltip property on IconButtons previously didn’t appear under the component if the alignment was set to anything other than left
  • You can now set the spacing property of ButtonMenu components from the Anvil Editor
  • The icon_position property of ButtonMenu components is now called icon_align. This means it actually works and matches the name of the equivalent Button property

To upgrade to this new version, go to your app’s Settings > Dependencies, and change the Material 3 Theme dependency version to v1.2.3. Any newly created Material 3 Theme apps will use this version.

Full changelog here: material-3-theme/CHANGELOG.md at master · anvil-works/material-3-theme · GitHub 10

12 Likes
2

Amazing update! The ButtonMenu component is something that I found myself searching for so often. And the new Avatar and AvatarMenu are just what I needed :slight_smile: (I added a similar avatar menu to my app just two days ago but the new component looks way sleeker :wink:)

Question - would you recommend adding a “New M3” app as a dependency to an existing app with an older theme (Rally) so that I can use the new components? Is there anything I should be careful of?

2 Likes
3

Well, time to remove my UserIcon component from my core dependency.

I feel like, with all those more recent and frequent updates, soon we will be able to just select from a list that has your entire app already done for you.

Good work anvil team!

1 Like
4

Awesome work :slight_smile:

Would love to see some more Example applications where you use this theme :slight_smile:

1 Like
5

@Zaro Yes! You can add it to old apps as a dependency, although there’s a chance some of the CSS in your existing app might clash with the M3 CSS.

You can find the dependency ID for the M3 theme here: Anvil Docs | Material 3

1 Like
6

Hi @patricia,

I see that the theme.css file for apps using the New M3 theme is empty. How can we access/edit the default css of the theme?