Feedback

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/ds-allium

Package version

1.14.0

Loading...

<Feedback>Here's some feedback</Feedback>

<Feedback>Here's some feedback</Feedback>

Introduction

import { Feedback } from '@telus-uds/ds-allium'

A feedback box commonly used with form fields. While its primary use is to facilitate feedback states for other form components such as TextInput, you may use it standalone.

Guidance

Complex content

You may pass any React tree as the children of this component, bear in mind that a render function is better suited for styling children based on Feedback's variant.

Loading...

<Feedback title="Instructions"> <Typography>Provide a brief description of your issue</Typography> </Feedback>

<Feedback title="Instructions">
  <Typography>Provide a brief description of your issue</Typography>
</Feedback>

Using a render function

When a function is passed for rendering content, it will receive the feedback text styles and variant as arguments.

Loading...

<Feedback title="Feedback" validation="success" variant={{ icon: true }}> {({ variant, textStyles }) => ( <span style={textStyles}>The variant of this feedback is {Object.keys(variant).join(',')}</span> )} </Feedback>

<Feedback title="Feedback" validation="success" variant={{ icon: true }}>
  {({ variant, textStyles }) => (
    <span style={textStyles}>The variant of this feedback is {Object.keys(variant).join(',')}</span>
  )}
</Feedback>

Accessibility

All accessibility props set on this component will be applied to the outer container. By default using validation="error" will set the feedback's role to "alert".

Platform considerations

The component is available on both native platforms and web.

Props

Name	Type	Default	Description
children	string | node | func		Feedback content rendered below the title. A render function '({textStyles, variant}) => {}' is supported.
title	string		Emphasized summary of the feedback. If an icon is set, it is rendered next to the title.
tokens	custom		System tokens prop, see tokens for more details
validation	'error' | 'success'		Use to visually mark the Feedback as valid or invalid.
variant	objectOf		System variant prop, see variants for more details

Tokens

In exceptional circumstances, the following tokens can be passed to this component to override its default styles. Do not do this unless absolutely necessary. Read more about overriding styles.

View Tokens

Prop Name	Token Property	Token Type
tokens	backgroundColor	color
	borderColor	color
	borderWidth	border
	borderRadius	radius
	paddingTop	size
	paddingBottom	size
	paddingLeft	size
	paddingRight	size
	space	integer
	color	color
	fontName	fontName
	fontWeight	fontWeight
	lineHeight	lineHeight
	titleFontSize	fontSize
	contentFontSize	fontSize
	icon	icon
	iconSize	size
	iconColor	color
	iconGap	size

Figma

Variants

You can choose whether an icon should be shown by using the icon variant:

Loading...

<Feedback validation="success" variant={{ icon: true }} title="Title"> Everything went great! </Feedback>

<Feedback validation="success" variant={{ icon: true }} title="Title">
  Everything went great!
</Feedback>

info

An icon will only be rendered if the title prop is set.

This component's appearance may change based on the validation prop.

Loading...

<Feedback validation="success">Everything went great!</Feedback>

<Feedback validation="success">Everything went great!</Feedback>

Loading...

<Feedback validation="error">Something went wrong...</Feedback>

<Feedback validation="error">Something went wrong...</Feedback>

Feedback

• Spotted a problem with this component? Raise an issue on GitHub
• See any existing issues for this component
• Contact the team on slack in #ds-allium-support