The bento-design-system from buildo

Add support for default padding in Card's configuration

The Card component's configuration is

declare type CardConfig = {
    defaultRadius: Exclude<BentoSprinkles["borderRadius"], "circled">;
};

It makes sense to also support a defaultPadding.

Currently, it's implicitly 0.

Bug: Radio group control background should be Background/Primary

Description of the bug

Radio group control background should be Background/Primary instead of transparent.

Playroom reproduction

https://playroom.bento.buildo.io/#?code=N4Igxg9gJgpiBcIA8AhCAPABAIwIZgGsBzAJwgFcA7KAXgB0QBnCAMwBcUAbcmBgPmB1KmTAApRASkw0%2BmQcJGZIlRm0wBtAG65uMADSZGMNgDUdPALrTMAJRj42AOnJGAym1xsYoqrBYBLShgoCSFFTBJjchJhUTDwzCQbXCh-CABxMnIABwAxfxhOKHiEzAgSAsoPNjTKehBNGBIasB0GEoTOXGxC%2BoBNChJMFlxNQf8vJQhOcvh2hVLKXABbGHqRseiJmABaSBmSedKRbV0aYFOeAF8O8IhKAGEAC1xKIjXgI1NzGBuFhPuXGi50k0lkwCuf2OZWyNXujHO6luCXk0PClxg8EwDEyMBglAYemRpS6PU4WJxkXxhOJiiuRP%2BpVRaJOPwpICBvBADJZIlJhXZnJpjIS9NpImZLIx7LsxW54sU-PJ2JAsuFLLFIpEFihCQA9HwOqEFFcJJIhH8kHq0Og%2BNyQAB3fxQNhPRgIdQAJgArAA2AAMOqAA

Version

0.11.4

What browsers are you seeing the problem on?

Chrome, Safari, Firefox, Edge

Columns overflows inside a container

Hi,
I opened a blank issue since I'm not sure if it's actually a Bento bug or if it's my fault.
Please, can you tell me why the component Columns composed by 4 columns with width 2/5, 1/5, 1/5, 1/5 overflows the parent component's width?

You can easily verify it in this playroom:
https://playroom.bento.buildo.io/#?code=N4Igxg9gJgpiBcIA8AhCAPABAZwC4E8AbGAXmGEwHcBLKXAC3kwEYBmABncwF9uA%2BADoA7TJiQBlXAEMwAaxwAHGaWDMAbP2GjRSACrVcxHNQBepASAC2MKNQCuli33ExcdhZiFTrmAE53ibCQAen1DGEERbSQAYQhCByFsRWUyAA5NKO0xOITLERo6ejILACZggFYLTOzsvRh0XAAxahhCKC1a7K9rEpAAOQBpas6u0QA3KQSVCyGRrLGIIRj6KSEAcxUACgBKTBI%2BTGBeUcWhFATfMl39w%2BPuU67CKQAjNr6ABQgFAKlcaiW8zG2gUzzAMHo8VgV2AFiBwMw1GwACUYFIoAB5ISEfCPbTBSJdEK5RKRPGxeKJKi0Bh9ZiVaqEsYSNowMDNVrtPHdbwzAYY3SYAAiAEEPgBJeHAybTPr9AXCsWSkAPBZdJYrNaba57A5HE5q2pLC52GE3PX3bnaZ5vQifXzfGC%2BAgsKVjUHKSHtJ19N3qhT-JbYMgAbSt2VhhulUzsMCYswVoolFgANOHaja2vH%2BYKk8q01GxrJqEIoNnsCX1sQALSEEswVPp0TcAsIzAAXVVbaRqPRWJxVoJ5OCJPyZMNFLyBRpxVhIHpVRVTKJugaHLaHULoh6fJF-SFftqMtjfT3B5V6Y1qw2211dwNbeNlx1t31XYRmbtc4xCidfwgviHtkHrgl60K%2BheW6IiiaKYtiuKFkOE4jpSY7COSo7TkUdIMkuVossQ7ItBu6Y7n0TTiroMRAdox58hRVE0aIV5arer6WlBT6mi%2BFoPh%2BrzvHOHwOr%2Bzr4JgpRMZgIEQlCPpzlJ3yBkkoZNkcakTDGcaYBYDHUSArZttaAmENmemNlB2TFqW5aVjWdZCA2BlqS26adumPawf2CHAkhRIoVOy5iAFiTYOOdRoFgeBECoFD0DA1DrPQuBMKUnA8NwmAvDIsjrA6diliQFjZXIeUQAVUBClIviyOIYC%2BNQjggHwISRUyISSDlkStRgkQGSAhQMNgCAhswAAsY3sJ2QA

Support images in Avatar

Avatar should accept an optional imageSrc prop.

It would be cool if we could show the default icon (or initial, depending on whether username is set or not) while the image is loading or if the image fails loading (possibly because the url is wrong or unreachable)

I think it may be achievable by using an <object> tag and nesting the fallback in it, but I haven't explored it much

Change the icons management to speed up library publishing time

We should manage icons as components and not as variants to speed up library publishing times whenever you change or add an icon. Therefore, we need to create a new Iconography page in the Foundations section to collect all the icons and remove the Vector component from Icon.

With this change, it will be easier to switch between icons since it will be done using Swap Instance and not by component properties. The user will also have a preview, and icons will be automatically sorted in ascending alphabetical order.

Sticky table header and fixed table height

Add an option to make Table headers sticky and also add the ability to restrict the Table height to a fixed value (so that the Table can scroll and the header can effectively be sticky).

Create Timepicker

Add Outline/Container to Menu

Bug: SelectField broken if isMulti enabled without a value

Description of the bug

Enabling isMulti on SelectField without passing a value broke the component

Playroom reproduction

No response

Version

0.11.4

What browsers are you seeing the problem on?

Chrome

Improve line configuration in tabs and navigation

In the Tabs component, the lineHeight accepts only the values of borderBottomWidth, while it should probably accept a SizeConfig<number> like the activeVisualElement of the Navigation component.

In the Tabs component, the lineColor accepts the values of "borderColor", while in the Navigation component the lineColor accepts the values of "background". We should probably unify them.

Autofocus on fields

Discussed in #286

^{Originally posted by **mperrando** July 19, 2022}

As discussed, it would be convenient for fields to expose an autoFocus prop. I would add it to:

all form fields (text fields, number field, radio field, etc)
SearchBar
Form (with the same semantics as Modal, i.e. autofocus the first focusable children)

Implementation notes:

for fields and searchbar, we can probably pass down the autoFocus prop to the native browser component
for Form I would use the same approach as Modal and wrap the children in a <FocusScope autoFocus={props.autoFocus}>

Table: fix internal paddings

the SectionHeader needs an additional 8px horizontal padding
ColumnGroup should have a paddingX

Expose ref of components

Apart from Box, we currently don't forward the ref prop of any of the components. This is rather arbitrary and potentially problematic in some situations.

For example, we can't use a Button directly as a trigger for Menu since it doesn't accept a ref.
As another example, users of Bento can't programmatically control focus on the components in case they need to, and so on.

This is issue is potentially broad, but I propose we expose ref on every component. Where to forward ref heavily depends on the component itself: in some cases it may make sense to target the top-level wrapper of the component, in other cases we may need to target the native component we're wrapping (think of NumberInput for instance).

InputConfig's iconSize seems unused

I've tried removing it and nothing happened :D

It was probably used at some point, but we have more specific icon sizes for inputs like passwordIconSize and searchIconSize

SelectField is laggy when the number of items is very large

For example, if you have a SelectField with all the countries in the world, then it starts to lag.

This is due to the lack of virtualization in react-select, see JedWatson/react-select#3128 and JedWatson/react-select#2850 for more info.

Judging from those threads, a promising solution would be to have a custom MenuList built on top of react-virtualized's List

Force Tooltip position

Discussed in #367

At the moment, the Tooltip is positioned automatically.
We shall add a new prop to force the position.

^{Originally posted by LauGroupie95 August 31, 2022}
Hi @veej and @gabro,
as you suggested us, we should use a tooltip for an IconButton and it should be on top of the IconButton (see 1st image), however, the actual implementation shows the tooltip on the right (see 2nd image).
Is there the chance to force the position of a tooltip?

What I want to achieve:

What I've obtained:

Thank you in advance!

Certain navigation components don't trigger their action

Some components (Link, ButtonLink, Navigation and Breadcrumb, that I've seen so far) don't perform their action when clicked.

Syntax highlighting is broken in the documentation

This only happens in markcode code fences (``` blocks), while it works in Canvas.

I think this happened while upgrading docusaurus to the latest beta (from beta 18 to beta 21), but reverting it didn't see to fix it (see my attempt here #269)

Bug: Custom sprinkles are overridden by the default ones in some components

Description of the bug

Some components are using the default bentoSprinkles instead of getting them via useSprinkles. For example

bento-design-system/packages/bento-design-system/src/SelectField/components.tsx

Lines 162 to 168 in 5acaf1c

    
           className={clsx( 
        
             menu, 
        
             bentoSprinkles({ 
        
               boxShadow: elevation, 
        
               borderRadius: dropdownConfig.radius, 
        
             }) 
        
           )}

This causes runtime errors if you try to use a custom sprinkle.

How to reproduce

Define a custom radius

// theme.css.ts
export const customVars = createGlobalTheme(":root", {
  borderRadius: {
    0: "0px",
  },
});

// sprinkles.css.ts
const defineBentoSprinkles = createDefineBentoSprinklesFn();
export const { sprinkles: customSprinkles } = defineBentoSprinkles({
  ...unconditionalProperties,
  borderRadius: {
    ...unconditionalProperties.borderRadius,
    ...customVars.borderRadius,
  },
});
export type CustomSprinkles = Parameters<typeof customSprinkles>[0];

Use the custom radius in the dropdown config

createBentoProvider(
  {
    dropdown: {
      radius: 0
    },
  },
  customSprinkles
);

Run the showroom, and open the dropdown to get

SprinklesError: "borderRadius" has no value 0. Possible values are "4", "8", "16", "circled", "circledX"

Playroom reproduction

No response

Version

0.13.6

What browsers are you seeing the problem on?

Chrome

Add background and foreground config to Table Header

IconLast and IconFirst missing in the DS

Hi @gabro and @veej ,
I'm trying to importa the IconLast and the IconFirst in my project, but It seems they're not present in the DS (or maybe I'm not able to find them). Please, can you help me?

Here's an example of what I'm talking about:

Add iconSize to Disclosure config

Disclosure's icon size should be configurable, for consistency

Allow searching inside a SelectField

SelectField should allow searching amongst the options.

This should probably be exposed as an optional searchable prop (false by default).

SelectionControlGroup: remove paddingY config

This config was used to add a vertical padding before the first item, but we agreed it should always be half of the spacing between the options. So we can remove the config entry and just use config.internalSpacing \ 2 as vertical padding.

We agreed to apply the same logic also to horizontal groups (the padding top will be half the horizontal spacing between options)

It should be possible to hide tooltip arrow

Add a hideArrow prop to the Tooltip component to hide the arrow (default: visible)

Add autoFocus prop to Modal

Currently Modal automatically sets the autoFocus prop of FocusScope. We should make this configurable via a homonymous prop on Modal itself.

I'm still on the fence on whether to enable it by default to avoid breaking changes.

Use `{ custom: number }` convention for Illustration size

Illustration accepts a set of fixed sizes and also a generic number for custom sizes.

That was one of the first times we allowed arbitrary values in the DS, and since then we standardized on using { custom: number } in union with the known values (this leads to better type inference, and it introduces an appropriate amount of friction when using custom values)

This means that instead of:

  size: 24 | 32 | 40 | 80 | 160 | number;

we should have

  size: 24 | 32 | 40 | 80 | 160 | { custom: number };

instead.

This is unfortunately a breaking change, but I think it's worth it.

Add support for colors in Display and Headline

Currently, the components Display and Headline don't support the property color (they always use the primary color).

The other typography components support the following colors

	Body	Display	Headline	Label	Title
Primary	✅ (as `default`)	✅ (implicitly)	✅ (implicitly)	✅	✅ (as `default`)
Secondary	✅			✅	✅
PrimaryInverse	✅			✅	✅
SecondaryInverse				✅	✅
Interactive
Informative	✅			✅	✅
Positive	✅			✅	✅
Warning	✅			✅	✅
Negative				✅	✅
Disabled	✅			✅

Inline props not resolved correctly

The reference to BoxProps type is not resolved correctly and is exploded to any. As a result, the prop as is not seen as optional any more.

Create Semantic Chip

Like Chip, but using the semantic tokens.
The Figma component is not yet ready.

Use official floating-ui dependency instead of fork

Back in #39 we started using a fork of floating ui due to this issue: floating-ui/floating-ui#1529

Since then, Floating UI release its version 1.0.0 which should have fixed this issue in floating-ui/floating-ui#1678

We should try going back to the main dependency instead of the fork we're using now

IllustrationProps "style" attribute raises a jsx-eslint warning

The name "style" of the attribute in

bento-design-system/packages/bento-design-system/src/Illustrations/IllustrationProps.ts

Line 5 in edfc0eb

style: "color";

makes jsx-eslint to give the following warning

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/style-prop-object.md

Remove ModalContext

ModalContext was basically used to conditionally set z-index, but now we’re refactored away that approach so ModalContext is useless now.

Bug: Tables lose their sorting status when interacting with them

Description of the bug

Each time a rerendering of the data is performed (change filter or for example set a column as favorite) the table lose the information about the sorting status, for example:

external interaction:

internal interaction

I know that's probably a react-table issue but maybe, given that the code is something like

 <Table
        columns={columns}
        data={data}
        customSorting={tableCustomSorting}
        initialSorting={[{ id: "traffic", desc: true }]}
      />

using rerendering, if we were given props like: onSortChanged which returns the sort key, we could pass as new initialSorting key the key just received

Playroom reproduction

No response

Version

0.11.3

What browsers are you seeing the problem on?

Chrome, Safari, Firefox, Edge

Number field missing on bento.buildo.io

Description of the bug

The number field component is missing on bento.buildo.io

Playroom reproduction

No response

Version

v0.13.6

What browsers are you seeing the problem on?

No response

List should be able to scroll to the currently selected item

When a list contains many items, some of them hidden by scrolling, we may want to allow to render the list so that the selected item is initially visible.

This is particularly useful e.g. for the SelectField menu, where we may want to see the selected item whenever the menu is opened.

This is the current behaviour when the year menu in the DatePicker is opened:

Screen.Recording.2022-08-05.at.12.16.06.mov

Menu: allow sub-menus

Description

Currently, the Menu item doesn't allow to have sub-menus, opened on hover/click of a menu item, like:

It's currently possible to achieve a similar result using some workarounds (playroom), consisting in:

passing a dummy onPress event to the menu item, so that its "interactive" style is used (i.e. background style on hover)
passing a Menu as the item label, representing the sub-menu for that item
as a trigger for the internal Menu (i.e. the sub-menu), pass a Box with negative margin and internal padding, in order to compensate the padding assigned to every Menu item

What we would like to do instead is:

allowing to pass nested items to the Menu, e.g.

items={[
   { label: "Item1", onPress: () => {...} },
   { label: "Item2", subitems: [...] }
]}

pre-process the list of items so that, instead of passing them directly to the List component underneath, every item with subitems is converted into a list item with an onPress/[onHover*] that handles the logic to open the submenu
the submenu is rendered with an additional Popover internally to the Menu component (only one sub-menu open at a time)
if we want to handle also the sub-menu open on hover, we must also adapt the ListItem component to accept hover handlers (onMouseEnter/onMouseLeave?). When passed, they should activate the "interactive" style (same as onPress/href).
- pay attention to the behaviour when the mouse moves from the item to the submenu: the submenu should not be closed even if mouse is leaving the menu item.

Multioptions SelectField can't accept string[] as value

Description of the bug

Hi @gabro and @veej ,
I tried to implement a multioptions selectField and if I set
value={["A", "B", "C"]}
is everything ok, otherwise if I set
const selectedLetters : string[] = ["A", "B", "C"];
value={selectedLetters}
there's an error saying that:
Type 'string[]' is not assignable to type 'string[][]'.
Type 'string' is not assignable to type 'string[]'.ts(2322)

Please, can you help me?

Here's the code:

const optionsLetters = [
    {
        value: "A",
        label: "A",
        kind: "single-line",
    },
    {
        value: "B",
        label: "B",
        kind: "single-line",
    },
    {
        value: "C",
        label: "C",
        kind: "single-line",
    },
    {
        value: "D",
        label: "D",
        kind: "single-line",
    },
];

const selectedLetters = ["A", "B", "C"];

<SelectField
    name={""}
    value={selectedLetters}
    onChange={(v: string[]) => {
        console.log("selected", v);
    }}
    onBlur={() => {}}
    label="Letters"
    placeholder={""}
    options={optionsLetters}
    isMulti={true}
    multiValueMessage={(numberOfSelectedOptions: number) =>
        `${numberOfSelectedOptions} letters selected`
    }
    showMultiSelectBulkActions={true}
/>

Playroom reproduction

No response

Version

0.12.2

What browsers are you seeing the problem on?

No response

SearchBar should require an aria-label (or aria-labelledby)

SearchBar does not have a visible label, so it should require either aria-label or aria-labelledby so that it stays accessible.

We can use the same pattern used by Checkbox here (see the use of O.AtLeast, to make sure we get either one of the two props):

bento-design-system/packages/bento-design-system/src/Checkbox/createCheckbox.tsx

Line 9 in 1456aaa

    
           type Props = O.AtLeast<Pick<HTMLAttributes<HTMLInputElement>, "aria-label" | "aria-labelledby">> &

Implement new icons from v2.4 and document how to create new icons

Figma v2.4 introduced new icons and renamed some of the existing ones.
Resync the implementation with Figma, implementing the missing icons and renaming the already existing ones.

Add documentation on how to create new icons in the DS, using the svgIconProps utility.

Add TextArea component

It should be very similar to the TextField component, just using .

The new component should be exposed from createFormFields and createBentoComponents and added to the documentation.

It can use the same inputConfig as the other input components.

Add show/hide password toggle to TextField type="password"

Figma spec:
https://www.figma.com/file/YW6FFYt0zPbju3oVwMfdky/Bento-DS-2.3?node-id=1238%3A4103

Eye icon:
https://www.figma.com/file/YW6FFYt0zPbju3oVwMfdky/Bento-DS-2.3?node-id=1238%3A4253

@Phyele I think we're probably missing an "eye closed" icon, for when we want to hide the password.

Some analysis:

this needs to happen on TextField whenever the type prop is set to "password"
layout-wise, it will need some extra wrapping, pretty much identical to what happens with rightAccessoryContent in NumberInput (I've tried to generalize it in the past, but it's not really worth it, let's just copy the approach)
the icons need to be configurable in the Config, we can add passwordShowIcon, passwordHideIcon, and passwordIconSize to InputConfig (the default config should provide the default icons and sizes from Figma)

Bug: `ts-deepmerge` is merging props of JSX.Elements passed in the config

Description of the bug

Given a component config containing a JSX.Element (e.g. activeVisualElement for Navigation), ts-deepmerge is deep-merging also the JSX.Elements instead of replacing them completely.

Deep-merging two JSX.Elements means their props are merged together: see https://codesandbox.io/s/react-typescript-forked-zbvhtr?file=/src/index.tsx

Playroom reproduction

No response

Version

0.12.0

What browsers are you seeing the problem on?

Chrome, Safari, Firefox, Edge

Select component missed on Bento website

The select component is present in Bento, but it's not visible in the "Components" section on the Bento website.

Center the alignment of fill-parent underlined Tabs

In the underlined variant of the Tabs component, when tabsWidth is "fill-parent", the labels are left-aligned instead of being centered.

Bug: TextField's right padding is missing

Before:

After:

The change seems to have been introduced with this PR.

Props generation is broken on the documentation

This is likely due to the recent update of docusaurus-plugin-react-docgen-typescript, we can try fixing it or reverting the dep to 0.1.0.

Columns: column width seems to not consider space between columns

The fractional width of a Column inside the Columns layout component is computed considering the whole width of the parent, without considering gaps between the columns.

Hence, for example, two columns with width "1/2" and a gap between them will lead to an overall width > 100%.

Note: Braid's strategy is to avoid gap and use paddingLeft instead, adding a negative left margin to the parent to compensate the padding of the first column. Consider using the same approach in bento

Expand color config for Tabs and Navigation

Dependency Dashboard

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

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

Open

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

Update dependency @fontsource/lexend to v5.0.20

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

dockerfile

.devcontainer/Dockerfile

mcr.microsoft.com/vscode/devcontainers/typescript-node 0-16-bullseye

github-actions

.github/workflows/ci.yml

actions/checkout v3

actions/setup-node v3

actions/checkout v3

actions/setup-node v3

chromaui/action v1

actions/checkout v3

actions/setup-node v3

cloudflare/pages-action v1

cloudflare/pages-action v1

cloudflare/pages-action v1

.github/workflows/release-drafter.yml

release-drafter/release-drafter v5

.github/workflows/release.yml

actions/checkout v4

actions/setup-node v4

actions/create-github-app-token v1

JS-DevTools/npm-publish v3

JS-DevTools/npm-publish v3

slackapi/slack-github-action v1.24.0

slackapi/slack-github-action v1.24.0

npm

package.json

husky 8.0.3

turbo 1.10.13

pnpm >=6

pnpm 7.33.6

@types/react ^18

packages/bento-design-system/package.json

@datepicker-react/hooks 2.8.4

@dessert-box/core 0.2.0

@floating-ui/core 1.4.1

@floating-ui/dom 1.5.1

@floating-ui/react-dom 2.0.2

@floating-ui/utils 0.1.1

@fontsource/lexend 5.0.17

@internationalized/date 3.4.0

@react-aria/breadcrumbs 3.5.4

@react-aria/button 3.8.1

@react-aria/calendar 3.4.0

@react-aria/checkbox 3.10.0

@react-aria/datepicker 3.6.0

@react-aria/dialog 3.5.4

@react-aria/focus 3.14.0

@react-aria/i18n 3.8.1

@react-aria/interactions 3.17.0

@react-aria/label 3.6.1

@react-aria/link 3.5.3

@react-aria/menu 3.10.1

@react-aria/numberfield 3.7.0

@react-aria/overlays 3.16.0

@react-aria/progress 3.4.4

@react-aria/radio 3.7.0

@react-aria/separator 3.3.4

@react-aria/slider 3.6.0

@react-aria/ssr 3.7.1

@react-aria/switch 3.5.3

@react-aria/textfield 3.11.0

@react-aria/tooltip 3.6.1

@react-aria/utils 3.19.0

@react-aria/visually-hidden 3.8.3

@react-stately/calendar 3.3.0

@react-stately/checkbox 3.4.4

@react-stately/datepicker 3.6.0

@react-stately/menu 3.5.4

@react-stately/numberfield 3.6.0

@react-stately/overlays 3.6.1

@react-stately/radio 3.8.3

@react-stately/slider 3.4.1

@react-stately/toggle 3.6.1

@react-stately/tooltip 3.4.3

@react-types/calendar 3.3.0

@react-types/overlays 3.8.1

@react-types/radio 3.5.0

@react-types/shared 3.19.0

@tanstack/react-virtual 3.0.0-beta.65

@tanstack/virtual-core 3.0.0-beta.65

@vanilla-extract/css 1.13.0

@vanilla-extract/dynamic 2.0.3

@vanilla-extract/recipes 0.5.0

@vanilla-extract/sprinkles 1.6.1

clsx 1.2.1

deepmerge-ts 4.3.0

lodash.pick 4.4.0

react-cool-dimensions 2.0.7

react-dropzone 14.2.3

react-input-mask 2.0.4

react-is 18.2.0

react-select 5.7.4

react-table 7.8.0

recharts 2.8.0

ts-pattern 3.3.5

@babel/core 7.22.20

@babel/preset-env 7.22.20

@babel/preset-react 7.22.15

@babel/preset-typescript 7.22.15

@phosphor-icons/react 2.0.15

@react-types/breadcrumbs 3.6.1

@react-types/button 3.7.4

@react-types/datepicker 3.5.0

@react-types/link 3.4.4

@react-types/menu 3.9.3

@react-types/numberfield 3.5.0

@react-types/slider 3.6.0

@react-types/textfield 3.7.3

@storybook/addon-actions 8.0.8

@storybook/addon-essentials 8.0.8

@storybook/addon-links 8.0.8

@storybook/addon-themes 8.0.8

@storybook/builder-vite 8.0.8

@storybook/preview-api 8.0.8

@storybook/react 8.0.8

@storybook/react-vite 8.0.8

@storybook/test 8.0.10

@storybook/types 8.0.8

@testing-library/dom 9.3.3

@testing-library/jest-dom 6.1.4

@testing-library/react 14.0.0

@testing-library/react-hooks 8.0.1

@testing-library/user-event 14.4.3

@types/lodash.orderby 4.6.7

@types/lodash.pick 4.4.7

@types/react 18.2.21

@types/react-dom 18.2.7

@types/react-input-mask 3.0.2

@types/react-is 18.2.1

@types/react-table 7.7.15

@types/testing-library__jest-dom 5.14.9

@typescript-eslint/parser 5.62.0

@vanilla-extract/babel-plugin 1.2.0

@vanilla-extract/esbuild-plugin 2.3.0

@vanilla-extract/private 1.0.3

@vanilla-extract/vite-plugin 3.9.0

@vanilla-extract/webpack-plugin 2.3.0

@vitejs/plugin-react 4.0.4

chromatic 6.24.1

css-loader 6.8.1

date-fns 2.30.0

esbuild-loader 2.21.0

eslint 8.48.0

eslint-config-react-app 7.0.1

eslint-plugin-sort-export-all 1.4.1

eslint-plugin-storybook 0.8.0

file-loader 6.2.0

jsdom 22.1.0

lint-staged 13.3.0

lodash.orderby 4.6.0

madge 5.0.2

mini-css-extract-plugin 2.7.6

playroom 0.32.1

postcss 8.4.31

prettier 2.8.8

react 18.2.0

react-dom 18.2.0

storybook 8.0.8

style-loader 3.3.3

ts-loader 9.4.4

tsup 7.2.0

typescript 5.1.3

vite 4.5.3

vitest 0.34.3

webpack 5.88.2

webpack-cli 4.10.0

react ^18.0.0

react-dom ^18.0.0

packages/configuration-builder/package.json

@phosphor-icons/react 2.0.15

@react-aria/i18n 3.8.1

@react-aria/numberfield 3.7.0

@react-stately/numberfield 3.6.0

@vanilla-extract/css 1.12.0

@vanilla-extract/recipes 0.5.0

i18next 22.5.1

react 18.2.0

react-dom 18.2.0

react-i18next 12.3.1

react-router-dom 6.16.0

ts-pattern 3.3.5

@react-types/numberfield 3.5.0

@tsconfig/vite-react 2.0.1

@types/react 18.2.21

@types/react-dom 18.2.7

@typescript-eslint/eslint-plugin 6.5.0

@typescript-eslint/parser 6.5.0

@vanilla-extract/dynamic 2.0.3

@vanilla-extract/sprinkles 1.6.1

@vanilla-extract/vite-plugin 3.8.2

@vitejs/plugin-react 4.0.4

eslint 8.48.0

eslint-plugin-react-hooks 4.6.0

eslint-plugin-react-refresh 0.4.3

typescript 5.1.3

vite 4.5.3

vite-plugin-checker 0.6.2

packages/website/package.json

@babel/core 7.22.20

@babel/generator 7.22.15

@babel/parser 7.22.16

@babel/preset-typescript 7.22.15

@babel/standalone 7.22.20

@babel/traverse 7.23.2

@docusaurus/core 2.0.1

@docusaurus/preset-classic 2.0.1

@docusaurus/theme-common 2.0.1

@easyops-cn/docusaurus-search-local 0.35.0

@mdx-js/react 1.6.22

assert 2.0.0

buffer 6.0.3

clsx 1.2.1

docusaurus-plugin-react-docgen-typescript 1.1.0

playroom 0.32.1

prettier 2.8.8

prism-react-renderer 1.3.5

process 0.11.10

react 18.2.0

react-docgen-typescript 2.2.2

react-dom 18.2.0

react-markdown 8.0.7

@babel/types 7.22.19

@docusaurus/module-type-aliases 2.0.1

@docusaurus/theme-classic 2.0.1

@docusaurus/theme-live-codeblock 2.0.1

@docusaurus/types 2.0.1

@phosphor-icons/react 2.0.15

@tsconfig/docusaurus 1.0.6

@types/babel__generator 7.6.8

@types/babel__standalone 7.1.7

@types/babel__traverse 7.20.1

@types/node 18.17.14

@types/react 18.2.21

@typescript-eslint/parser 5.62.0

@vanilla-extract/sprinkles 1.6.1

eslint-config-react-app 7.0.1

lint-staged 13.3.0

raw-loader 4.0.2

typescript 4.9.5

webpack 5.88.2

terraform

terraform/provider.tf

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

	className={clsx(
	menu,
	bentoSprinkles({
	boxShadow: elevation,
	borderRadius: dropdownConfig.radius,
	})
	)}

buildo / bento-design-system Goto Github PK

bento-design-system's Introduction

Bento DS

bento-design-system's People

Contributors

Stargazers

Watchers

Forkers

bento-design-system's Issues

Description of the bug

Playroom reproduction

Version

What browsers are you seeing the problem on?

Description of the bug

Playroom reproduction

Version

What browsers are you seeing the problem on?

Discussed in #286

Discussed in #367

Description of the bug

How to reproduce

Playroom reproduction

Version

What browsers are you seeing the problem on?

Description of the bug

Playroom reproduction

Version

What browsers are you seeing the problem on?

Description of the bug

Playroom reproduction

Version

What browsers are you seeing the problem on?

Description

Description of the bug

Playroom reproduction

Version

What browsers are you seeing the problem on?

Description of the bug

Playroom reproduction

Version

What browsers are you seeing the problem on?

Awaiting Schedule

Open

Ignored or Blocked

Detected dependencies

Recommend Projects

Recommend Topics

Recommend Org