buildo / bento-design-system Goto Github PK
View Code? Open in Web Editor NEWA customizable and extensible Design System framework for React.js projects
Home Page: https://www.bento-ds.com
License: MIT License
A customizable and extensible Design System framework for React.js projects
Home Page: https://www.bento-ds.com
License: MIT License
Like Chip, but using the semantic tokens.
The Figma component is not yet ready.
The number field component is missing on bento.buildo.io
No response
v0.13.6
No response
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
.
Disclosure's icon size should be configurable, for consistency
The name "style" of the attribute in
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/style-prop-object.md
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?
Thank you in advance!
Enabling isMulti
on SelectField without passing a value broke the component
No response
0.11.4
Chrome
The select component is present in Bento, but it's not visible in the "Components" section on the Bento website.
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 | ✅ | ✅ |
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)
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
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.
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)
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):
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.
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.
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.
ModalContext was basically used to conditionally set z-index, but now we’re refactored away that approach so ModalContext is useless now.
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
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.
Some components (Link
, ButtonLink
, Navigation
and Breadcrumb
, that I've seen so far) don't perform their action when clicked.
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?
As discussed, it would be convenient for fields to expose an autoFocus
prop. I would add it to:
Implementation notes:
autoFocus
prop to the native browser componentForm
I would use the same approach as Modal
and wrap the children in a <FocusScope autoFocus={props.autoFocus}>
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
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
Radio group control background should be Background/Primary instead of transparent.
0.11.4
Chrome, Safari, Firefox, Edge
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.
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
No response
0.12.0
Chrome, Safari, Firefox, Edge
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
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:
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
Warning
These dependencies are deprecated:
Datasource | Name | Replacement PR? |
---|---|---|
npm | @types/testing-library__jest-dom |
|
npm | @vanilla-extract/babel-plugin |
These updates are awaiting their schedule. Click on a checkbox to get an update now.
@types/react
, @types/react-dom
, eslint-plugin-react-hooks
, react
, react-dom
, react-is
)@storybook/addon-actions
, @storybook/addon-essentials
, @storybook/addon-links
, @storybook/addon-themes
, @storybook/builder-vite
, @storybook/preview-api
, @storybook/react
, @storybook/react-vite
, @storybook/test
, @storybook/types
, storybook
)@typescript-eslint/eslint-plugin
, @typescript-eslint/parser
)@babel/core
, @babel/generator
, @babel/parser
, @babel/preset-env
, @babel/preset-react
, @babel/preset-typescript
, @babel/standalone
, @babel/types
)@docusaurus/core
, @docusaurus/module-type-aliases
, @docusaurus/preset-classic
, @docusaurus/theme-classic
, @docusaurus/theme-common
, @docusaurus/theme-live-codeblock
, @docusaurus/types
)@floating-ui/core
, @floating-ui/dom
, @floating-ui/react-dom
, @floating-ui/utils
)@testing-library/dom
, @testing-library/react
)@typescript-eslint/eslint-plugin
, @typescript-eslint/parser
)@docusaurus/core
, @docusaurus/module-type-aliases
, @docusaurus/preset-classic
, @docusaurus/theme-classic
, @docusaurus/theme-common
, @docusaurus/theme-live-codeblock
, @docusaurus/types
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@react-aria/breadcrumbs
, @react-aria/button
, @react-aria/calendar
, @react-aria/checkbox
, @react-aria/datepicker
, @react-aria/dialog
, @react-aria/focus
, @react-aria/i18n
, @react-aria/interactions
, @react-aria/label
, @react-aria/link
, @react-aria/menu
, @react-aria/numberfield
, @react-aria/overlays
, @react-aria/progress
, @react-aria/radio
, @react-aria/separator
, @react-aria/slider
, @react-aria/ssr
, @react-aria/switch
, @react-aria/textfield
, @react-aria/tooltip
, @react-aria/utils
, @react-aria/visually-hidden
, @react-stately/calendar
, @react-stately/checkbox
, @react-stately/datepicker
, @react-stately/menu
, @react-stately/numberfield
, @react-stately/overlays
, @react-stately/radio
, @react-stately/slider
, @react-stately/toggle
, @react-stately/tooltip
, @react-types/breadcrumbs
, @react-types/button
, @react-types/calendar
, @react-types/datepicker
, @react-types/link
, @react-types/menu
, @react-types/numberfield
, @react-types/overlays
, @react-types/radio
, @react-types/shared
, @react-types/slider
, @react-types/textfield
)These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.
.devcontainer/Dockerfile
mcr.microsoft.com/vscode/devcontainers/typescript-node 0-16-bullseye
.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/create-github-app-token v1
actions/checkout v4
actions/setup-node v4
JS-DevTools/npm-publish v3
JS-DevTools/npm-publish v3
slackapi/slack-github-action v1.24.0
slackapi/slack-github-action v1.24.0
package.json
husky 8.0.3
turbo 1.10.13
pnpm >=6
pnpm 7.33.7
@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.22
@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
@types/react-table 7.7.20
@vanilla-extract/css 1.13.0
@vanilla-extract/dynamic 2.1.2
@vanilla-extract/recipes 0.5.5
@vanilla-extract/sprinkles 1.6.3
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.1.7
@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.4
@testing-library/jest-dom 6.5.0
@testing-library/react 14.3.1
@testing-library/react-hooks 8.0.1
@testing-library/user-event 14.5.2
@types/lodash.orderby 4.6.9
@types/lodash.pick 4.4.9
@types/react 18.2.21
@types/react-dom 18.2.7
@types/react-input-mask 3.0.5
@types/react-is 18.3.0
@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.10
@vanilla-extract/private 1.0.6
@vanilla-extract/vite-plugin 3.9.5
@vanilla-extract/webpack-plugin 2.3.13
@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.47
prettier 2.8.8
react 18.2.0
react-dom 18.2.0
storybook 8.0.8
style-loader 3.3.4
ts-loader 9.4.4
tsup 7.2.0
typescript 5.1.3
vite 5.3.6
vitest 0.34.6
webpack 5.94.0
webpack-cli 4.10.0
react ^18.0.0
react-dom ^18.0.0
packages/configuration-builder/package.json
@phosphor-icons/react 2.1.7
@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.5
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.1.2
@vanilla-extract/sprinkles 1.6.3
@vanilla-extract/vite-plugin 3.9.5
@vitejs/plugin-react 4.0.4
eslint 8.48.0
eslint-plugin-react-hooks 4.6.0
eslint-plugin-react-refresh 0.4.12
typescript 5.1.3
vite 5.3.6
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.1.7
@tsconfig/docusaurus 1.0.6
@types/babel__generator 7.6.8
@types/babel__standalone 7.1.7
@types/babel__traverse 7.20.6
@types/node 18.19.50
@types/react 18.2.21
@typescript-eslint/parser 5.62.0
@vanilla-extract/sprinkles 1.6.3
eslint-config-react-app 7.0.1
lint-staged 13.3.0
raw-loader 4.0.2
typescript 4.9.5
webpack 5.94.0
terraform/provider.tf
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:
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
No response
0.11.3
Chrome, Safari, Firefox, Edge
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).
Some components are using the default bentoSprinkles
instead of getting them via useSprinkles
. For example
This causes runtime errors if you try to use a custom sprinkle.
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"
No response
0.13.6
Chrome
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:
onPress
event to the menu item, so that its "interactive" style is used (i.e. background style on hover)What we would like to do instead is:
items={[
{ label: "Item1", onPress: () => {...} },
{ label: "Item2", subitems: [...] }
]}
List
component underneath, every item with subitems is converted into a list item with an onPress/[onHover*] that handles the logic to open the submenuMenu
component (only one sub-menu open at a time)ListItem
component to accept hover handlers (onMouseEnter/onMouseLeave?). When passed, they should activate the "interactive" style (same as onPress/href).
SelectField
should allow searching amongst the options.
This should probably be exposed as an optional searchable
prop (false
by default).
Add a hideArrow
prop to the Tooltip component to hide the arrow (default: visible)
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}
/>
No response
0.12.2
No response
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:
TextField
whenever the type
prop is set to "password"
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)Config
, we can add passwordShowIcon
, passwordHideIcon
, and passwordIconSize
to InputConfig
(the default config should provide the default icons and sizes from Figma)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).
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.