Avatar API RFC

Components

• Avatar
• AvatarGroup - Stack for holding multiple avatars
• AvatarBadge (optional) maybe we can use our badge component.

Props

• src string - Image URL
• name string - Alt for the image, will also be used for placeholder initials
• size string - Size of the Avatar
• onError - Function called when image failed to load
• fallback React.ReactNode - custom fallback element

API

<Avatar src="https://bit.ly/dan-abramov" size="md" name="Dan Abrahmov" />

When the image is loading we will show the placeholder initials

Usage with icon

<Avatar><UserIcon/><Avatar/>

fallback

If there is an error loading the avatar image, the component falls back to an
alternative in the following order:

• the provided fallback
• the initials which is calculated from name prop
• a generic avatar icon

<Avatar
  fallback={<GenericUserIcon />}
  src="https://bit.ly/dan-abramov"
  size="md"
  name="Dan Abrahmov"
/>

AvatarGroup

Avatar group is a stack or flex container to hold multiple avatars in a group.

Props

• limit number - Max number of avatars to show inside the group, rest of them
  will get sliced.

API

<AvatarGroup limit={3}>
  <Avatar name="Remy Sharp" src="..." />
  <Avatar name="Travis Howard" src="..." />
  <Avatar name="Cindy Baker" src="..." />
  <Avatar name="Agnes Walker" src="..." />
  <Avatar name="Trevor Henderson" src="..." />
</AvatarGroup>

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): ⬆️ update dev dependencies (minor) (@babel/cli, @babel/core, @babel/plugin-proposal-private-property-in-object, @babel/preset-env, @babel/preset-react, @babel/preset-typescript, @commitlint/cli, @commitlint/config-conventional, @release-it/conventional-changelog, @storybook/addon-a11y, @storybook/addon-actions, @storybook/addon-essentials, @storybook/builder-webpack5, @storybook/manager-webpack5, @storybook/react, @swc/cli, @swc/core, @swc/jest, @tailwindcss/forms, @testing-library/dom, @testing-library/jest-dom, @testing-library/react, @testing-library/user-event, @types/jest, @types/jest-axe, @types/node, @types/react, @types/react-dom, @types/testing-library__jest-dom, all-contributors-cli, autoprefixer, axe-core, concurrently, eslint, eslint-config-prettier, eslint-plugin-storybook, gacp, husky, jest-axe, lint-staged, patch-package, postcss, postcss-cli, postcss-selector-parser, prettier, prettier-plugin-tailwindcss, react-icons, release-it, storybook-addon-preview, tailwindcss, typescript, webpack)
• chore(deps): ⬆️ update prod dependencies (minor) (@react-aria/live-announcer, ariakit, ariakit-utils, tailwind-merge)
• chore(deps): ⬆️ update actions/checkout action to v4
• chore(deps): ⬆️ update dependency node to v18
• chore(deps): ⬆️ update dev dependencies (major) (major) (@release-it/conventional-changelog, @storybook/addon-a11y, @storybook/addon-actions, @storybook/addon-essentials, @storybook/builder-webpack5, @storybook/react, @testing-library/dom, @testing-library/jest-dom, @testing-library/react, @types/jest, concurrently, eslint-config-prettier, eslint-plugin-prettier, eslint-plugin-simple-import-sort, jest, jest-axe, jest-environment-jsdom, lint-staged, patch-package, postcss-focus-visible, prettier, release-it, rimraf, sort-package-json, typescript)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

The Goal:

Create an customizable, extendable & easily stylable Alert Component.

The Alert Component will follow WAI-ARIA Alert

Key Resources for the Alert Component,

• https://chakra-ui.com/docs/feedback/alert
• https://ant.design/components/alert/
• https://material-ui.com/components/alert/

Component Parts

• Alert: The wrapper for alert components.
  
• AlertIcon: The visual icon for the alert that changes based on the status prop.
  
• AlertTitle: The title of the alert to be announced by screen readers.
  
• AlertDescription: The description of the alert to be announced by screen readers.
  
• AlertActionButton: The action butotn for the alert that changes based on the status prop.

Usage

<Alert status="success">
  <AlertIcon />
  <AlertTitle>Your browser is outdated!</AlertTitle>
  <AlertDescription>Your experience may be degraded.</AlertDescription>
  <AlertActionButton>Update</AlertActionButton>
  <Button aria-label="close"><ButtonIcon><CloseIcon/></ButtonIcon></Button>
</Alert>

Props

Alert

• status - The status of the alert - "info" | "warning" | "success" | "error" | "offline

default: "info"

RFC finalized - #133

Slider API RFC

Goal

Create an accessible, easy to use but still flexible enough slider component.

Following our renderlesskit slider component:
renderlesskit/react slider

Components

• Slider - Main component
• Optional (only for flexiblity)
  • SliderTrack
  • SliderThumb
  • SliderThumbTooltip
  • SliderInput

Props

All the basic props from :-
useSliderState

• defaultValue number | number[]

• tooltipContent React.ReactNode | (value: number | number[]) => JSX.Element

  Can be used to format tooltip content

• tooltipVisible boolean

  When tooltipVisible is true, Tooltip will show always, or tooltip will not
  show anyway, even if dragging or hovering.

• tooltipPlacement

• thumbContent React.ReactNode | (value: number | number[]) => JSX.Element

API

<Slider defaultValue={10} onChane={e => console.log(e)} />

Multi slider

Two values

<Slider defaultValue={[10, 20]} />

If defaultValues contains exactly two values we render this :-

More than two values

<Slider defaultValue={[10, 20, 30, 40]} />

If defaultValues contains more than two values we render this :-

Customization

Track

Customization of track can be done via the theme file

Thumb

To change the styles of the thumb users can use the theme file.

To change the thumb content

<Slider thumbContent={<SomeIcon />} />

Showing values in thumb

<Slider thumbContent={value => <span>{value} %</span>} />

Tooltip content

Format tooltip text

const tooltipFormatter = value => `${value}$`;

<Slider tooltipContent={tooltipFormatter} />;

Rendering react elements in tooltipContent

const tooltipFormatter = (value) => <span className="px-2">{value}</span>

<Slider tooltipContent={tooltipFormatter} />

Full customization

Users can do full customization through renderprops

<Slider>
  {state => (
    <>
      <SliderTrack />
      <SliderThumb>
        <VisuallyHidden>
          <SliderInput />
        </VisuallyHidden>
      </SliderThumb>
      <SliderThumbTooltip>Tooltip content</SliderThumbTooltip>
    </>
  )}
</Slider>

The problem

Currently how our theming system works has some downsides to it.

For our theming system we are basically using the tailwind.config.js file to
extend our component themes.

Now issues with this approach is that we have to include our tailwind.config.js
file in our client bundle (we are adding build step specific configs in clientside), thus increasing the bundle size of the end user.

// Importing tailwind config
import tailwindConfig from "../tailwind.config";

ReactDOM.render(
  <React.StrictMode>
    <RenderlesskitProvider tailwindConfig={tailwindConfig}>
      <App />
    </RenderlesskitProvider>
  </React.StrictMode>,
  document.getElementById("root"),
);

Currently our preset.js file imports

• tailwindcss/colors
• tailwindcss/defaultTheme
• deepmerge
• tailwindPlugins/borderColor
  • tailwindcss/plugin
  • tailwindcss/lib/util/flattenColorPalette
• tailwindPlugins/utilities
• tailwindPlugins/variantPlugin
  • postcss-selector-parser
  • tailwindcss/lib/util/buildSelectorVariant
• can get bigger as we add more plugins and other tailwind specific packages

Size analysis:

• preset.js - 13kb (unminified)
• tailwindcss/colors - 5kb (unminified)
• tailwindcss/defaultTheme - 22kb (unminified)
  • lodash/deepmerge (dependency)
• tailwindPlugins/variantPlugin
  • postcss-selector-parser (12kb min+gzip)

And remember this can get larger and larger down the dependency list because of dev dependencies getting included in our client bundle.

Screenshots:

• tailwind/colors
  

• tailwind default config
  

• postcss-selector-parser
  

The Solution

A quick fix for this would be to separate our theme from tailwind config. We can
have a separate theme.js file where users can extend the theme which will
eliminate the bundle size issue.