Persona: Persona

PersonaR Documentation

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 can not 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 shiny.react::reactElement. See allowed props listed below in 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.

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.fluent)

if (interactive()) {
  shinyApp(
    ui = Persona(
      imageInitials = "AL",
      text = "Annie Lindqvist",
      secondaryText = "Software Engineer",
      presence = 4
    ),
    server = function(input, output) {}
  )
}

Appsilon/shiny.fluent documentation built on June 12, 2022, 2:41 a.m.