Persona: Persona

In Appsilon/shiny.fluent: Microsoft Fluent UI for Shiny Apps

Persona

Description

A persona is a visual representation of a person across products, typically showcasing the image that person has chosen to upload themselves. The control can also be used to show that person's online status.

The complete control inclues an individual's avatar (an uploaded image or a composition of the person’s initials on a background color), their name or identification, and online status.

The persona control is used in the PeoplePicker and Facepile controls.

For more details and examples visit the official docs. The R package cannot handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.

Usage

Persona(...)

Arguments

...	Props to pass to the component. The allowed props are listed below in the Details section.

Details

• className string
  Additional css class to apply to the PersonaCoin

• componentRef ⁠IRefObject<{}>⁠
  Gets the component ref.

• styles ⁠IStyleFunctionOrObject<IPersonaCoinStyleProps, IPersonaCoinStyles>⁠
  Call to provide customized styling that will layer on top of the variant rules

• componentRef ⁠IRefObject<{}>⁠
  Gets the component ref.

• styles ⁠IStyleFunctionOrObject<IPersonaPresenceStyleProps, IPersonaPresenceStyles>⁠
  Call to provide customized styling that will layer on top of the variant rules

• className string
  Additional CSS class(es) to apply to the Persona

• componentRef ⁠IRefObject<IPersona>⁠
  Optional callback to access the IPersona interface. Use this instead of ref for accessing the public methods and properties of the component.

• onRenderOptionalText ⁠IRenderFunction<IPersonaProps>⁠
  Optional custom renderer for the optional text.

• onRenderPrimaryText ⁠IRenderFunction<IPersonaProps>⁠
  Optional custom renderer for the primary text.

• onRenderSecondaryText ⁠IRenderFunction<IPersonaProps>⁠
  Optional custom renderer for the secondary text.

• onRenderTertiaryText ⁠IRenderFunction<IPersonaProps>⁠
  Optional custom renderer for the tertiary text.

• styles ⁠IStyleFunctionOrObject<IPersonaStyleProps, IPersonaStyles>⁠
  Call to provide customized styling that will layer on top of variant rules

• allowPhoneInitials boolean
  Whether initials are calculated for phone numbers and number sequences. Example: Set property to true to get initials for project names consisting of numbers only.

• coinProps IPersonaCoinProps
  Optional HTML element props for Persona coin.

• coinSize number
  Optional custom persona coin size in pixel.

• hidePersonaDetails boolean
  Whether to not render persona details, and just render the persona image/initials.

• imageAlt string
  Alt text for the image to use. Defaults to an empty string.

• imageInitials string
  The user's initials to display in the image area when there is no image.

• imageShouldFadeIn boolean
  If true, adds the css class 'is-fadeIn' to the image.

• imageShouldStartVisible boolean
  If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until it is successfully loaded. This disables imageShouldFadeIn.

• imageUrl string
  Url to the image to use, should be a square aspect ratio and big enough to fit in the image area.

• initialsColor PersonaInitialsColor | string
  The background color when the user's initials are displayed.

• isOutOfOffice boolean
  This flag can be used to signal the persona is out of office. This will change the way the presence icon looks for statuses that support dual-presence.

• onPhotoLoadingStateChange ⁠(newImageLoadState: ImageLoadState) => void⁠
  Optional callback for when loading state of the photo changes

• onRenderCoin ⁠IRenderFunction<IPersonaSharedProps>⁠
  Optional custom renderer for the coin

• onRenderInitials ⁠IRenderFunction<IPersonaSharedProps>⁠
  Optional custom renderer for the initials

• onRenderPersonaCoin ⁠IRenderFunction<IPersonaSharedProps>⁠
  Optional custom renderer for the coin

• optionalText string
  Optional text to display, usually a custom message set. The optional text will only be shown when using size100.

• presence PersonaPresence
  Presence of the person to display - will not display presence if undefined.

• presenceColors { available: string; away: string; busy: string; dnd: string; offline: string; oof: string; background: string; }
  The colors to be used for the presence-icon and it's background

• presenceTitle string
  Presence title to be shown as a tooltip on hover over the presence icon.

• primaryText string
  Primary text to display, usually the name of the person.

• secondaryText string
  Secondary text to display, usually the role of the user.

• showInitialsUntilImageLoads boolean
  If true renders the initials while the image is loading. This only applies when an imageUrl is provided.

• showSecondaryText boolean
  

• showUnknownPersonaCoin boolean
  If true, show the special coin for unknown persona. It has '?' in place of initials, with static font and background colors

• size PersonaSize
  Decides the size of the control.

• tertiaryText string
  Tertiary text to display, usually the status of the user. The tertiary text will only be shown when using size72 or size100.

• text string
  Primary text to display, usually the name of the person.

• theme ITheme
  Theme provided by High-Order Component.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Best practices

Layout

• Use the 24-pixel persona in text fields in read-only mode or in experiences like multicolumn lists which need compact persona representations.

• Use the 32-pixel persona in text fields in edit mode.

• Use the 32-pixel, 40-pixel, and 48-pixel persona in menus and list views.

• Use the 72-pixel and 100-pixel persona in profile cards and views.

Content

• Change the values of the color swatches in high contrast mode.

Examples

library(shiny)
library(shiny.fluent)

ui <- function(id) {
  ns <- NS(id)
  Persona(
    imageInitials = "AL",
    text = "Annie Lindqvist",
    secondaryText = "Software Engineer",
    presence = 4
  )
}

server <- function(id) {
  moduleServer(id, function(input, output, session) {})
}

if (interactive()) {
  shinyApp(ui("app"), function(input, output) server("app"))
}

Appsilon/shiny.fluent documentation built on June 4, 2024, 7:02 p.m.