frontify / fondue Goto Github PK

The docs for the MenuItem show a onClick prop:
https://arcade-components.frontify.com/?path=/docs/components-menu-item--menu-item

But when I try to use it, it doesn't work. How do I use the MenuItem with a callback function?

Reproduction:
https://codesandbox.io/s/menuitem-frontify-arcade-2-0-0-3jet0z

Spellcheck is a common annoyance with search and filter components where it is expected to only type incomplete queries to filter data as a user types. The behaviour may vary in browsers, here’s I’m reporting it specifically for Safari.

Disabling spellcheck might require spellcheck="false" or React’s version of it spellCheck={false}. It would be great to either get direct access to the component (merging attributes) or extend the API by adding another prop such as "spellcheck".

Reproduction:
https://codesandbox.io/s/silly-bash-0elz8

When passing a <Button> as trigger prop to a Flyout the trigger gets wrapped in a pseudo button element with -webkit-appearance: button. This means, that if the render prop has a border radius, e.g. as seen in the standard <Button>, that there will be a visual glitch where the wrapping div shows a visible background color at the corners:

I think the following variant needs some design tweaks to its hover state. I’d suggest to use a darker gray, but not invert the colors.

Style:
Primary

Emphasis:
None

Goal:
I want to decorate a <Button> component (with icon prop) with a tooltip. A native title would be fine, a <Tooltip> even better. Are there any examples for that?

Something like that:

Problem:
I’d like to add a title attribute to a <Button>, but there’s no prop and other attributes aren’t merged. There’s aria-label, but this won’t show a little native tooltip when hovering over the button. A tooltip prop would be handy, but composition would work too. :)

I have a use case for Popper where I need to size the Reference element to take up the available space (width: 100%).

Unfortunately, that element is wrapped in a div with tw-fit which takes over control and changes the intended layout, also restricting any change.

I wonder if that class is necessary and if yes, if there might be a prop like in other components (fit, hug, etc.) to provide control over that.

https://github.com/Frontify/fondue/blob/c4925163b561eb4746c6b57cad5cff4204d43685/src/components/Popper/Popper.tsx#LL77C19-L77C20

It seems like the z-index of the Action Menu should be bumped up to avoid collision with other elements. Attached two screenshots of a component we are currently building.

Both the AssetInput actions as well as the LinkChooser actions have a z-index of 20. This needs to be higher in my opinion.

I’m missing the ability to control text overflow with Text components. For example, I might want to use “ellipsis” or control the “white-space”, “word-wrap”, etc. depending on the content and context.

While the Text component’s API could expose all these CSS properties as props, it could also just merge style or className props to allow for fine control via Tailwind, inline styles, or custom CSS.

Reproduction @2.0.0
https://codesandbox.io/s/text-overflow-frontify-arcade-2-0-0-bj2p9

I’m trying to use the Flyout component, but I’m a bit lost looking at the docs on Storybook.

This is example code:

<ut
  decorator={<Tl />}
  onClose={function noRefCheck(){}}
  onOpenChange={function noRefCheck(){}}
  title="Header title"
  trigger={<Q onClick={function noRefCheck(){}}>Button</Q>}
>
  <p className="tw-text-center tw-py-8">
    Fun with Flyouts and Buttons!
  </p>
</ut>

As far as I understand, I can pass in a component via the trigger prop.

When I do that, that component is wrapped in a <div type="button"> but when I click it, nothing happens.

I see that there’s a onClick prop, but it’s not clear what the callback looks like because Storybook seems to mess up the example code :(

The issue with the example code applies to all examples, but so far I’ve been able to figure it out, except for this one :D

I’d appreciate any help! Thanks!

I’m trying to use a TextInput and only want to get the value when the user presses "enter".

I would expect to listen to the onChange event. Unexpectedly, onChange fires on every key press. I figured out that React goes against web standards here. 🤦‍♂️

I then looked into the source code for the TextInput and noticed that there’s a onEnterPressed callback prop that I can use. It works, but the return value is inconsistent with the onChange callback prop.

onChange: returns value
onEnterPressed: returns SyntheticBaseEvent

It would be nice if both callback props would behave similar. :)

Usage right now:

onChange={(value) => {
  // → value
}}
onEnterPressed={(event) => {
 // → event.target.value
}}

If the content of a Flyout has overflow, the scroll behavior is odd. It happens when you reach the top or bottom of the container. It’s difficult to see in the compressed GIF, but I've added a reproduction.

AFAIK, it’s related to Safari on macOS. Chrome is fine, but the scroll behavior isn’t ideal either.

Reproduction @ 9.1.0
https://codesandbox.io/s/flyout-frontify-arcade-9-1-0-detoif

When the items prop of the Breadcrumb component changes its value, React crashes with the following error:

Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

This is most likely because useRef is used inside the rendering which will result in different amount/order of hooks.

Reproduction

The reproduction shows:

• Breadcrumbs with initial state
• useEffect changes the state → error

https://codesandbox.io/s/breadcrumbs-tabindex-frontify-arcade-2-3-0-forked-c0vklv?file=/src/App.js

Using the spacing prop on a Stack component has no visual effect. A class is correctly applied, e.g. tw-gap-small, but there’s no defined CSS Class that would actually change the value for the gap property.
For reference: https://arcade-components.frontify.com/?path=/docs/foundation-layout-stack--default

Seems as if they aren’t exported?
https://github.com/Frontify/fondue/blob/beta/src/components/Popper/Popper.tsx

export 'PopperPlacement' (imported as 'PopperPlacement') was not found in '@frontify/fondue'

For my use case, I’d like to use Breadcrumbs to display a file path. But I don’t want to use it for navigation. Each item of the breadcrumb has only a label, but no link. It seems unnecessary that each item can receive focus in that case.

Reproduction @2.3.0
https://codesandbox.io/s/breadcrumbs-tabindex-frontify-arcade-2-3-0-vn8s5v?file=/src/App.js

The text items of the Slider component are rendered with z-index: 10.

When implementing the slider in combination with a dialog, the slider text would appear above the dialog.

I tried to fix it with z-index: 1, z-index: 2, … but then had to check what value I had to fight against to find out how to make it work.

I bet there’s a reason for the z-index, but I can imagine that a smaller more sensible value would work, too :)

In 1.0.0, when clicking outside of the Flyout would close it. Clicking the "Close" button would also correctly close the Flyout. In 1.1.0, this behavior has changed and the Flyout does not close anymore. This is also happening on Storybook. Is this a regression or intended API change, so that the close behavior needs to be configured / opt-in?

Reproduction

✅ 1.0.0
https://codesandbox.io/s/flyout-frontify-arcade-1-0-0-r7t23

❌ @1.1.0
https://codesandbox.io/s/flyout-frontify-arcade-1-1-0-b6on6

Changing between checked/unchecked state causes layout changes.
The unchecked state has a border, while the checked state doesn’t.

Solution:

• use consistent border width in both states, e.g. by using a transparent border for the checked state

Repro:
https://beta-fondue-components.frontify.com/?path=/docs/components-checkbox--docs

When using Badges with Icons, the vertical alignment of the icons could be improved. Right now, the icons are hanging too low. Could be fixed by changing the styles of the span that wraps the SVG :)

https://github.com/Frontify/arcade/blob/main/src/components/Badge/Badge.tsx#L66

fondue doesn't call onClose when pressing Escape.
the modal remains in the dom and only changes the opacity to 0.

"@frontify/fondue": "12.0.0-beta.227"

Hey! Saw you were using react-aria/stately. Awesome and thank you so much. I hope you don't mind, but I was perusing the components you've built and noticed that the Checkbox has a few accessibility violations in the storybook.
https://fondue-components.frontify.com/?path=/story/components-checkbox--checkbox

As well as a few that AXE didn't pick up on
No buttons inside a label - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#interactive_content
No nesting of labels - https://www.w3.org/TR/2013/CR-html5-20130806/forms.html#the-label-element (see "Phrasing content, but with no descendant labelable elements unless it is the element's labeled control, and no descendant label elements.)

Hi! I’m using Arcade for the first time and was wondering how to import components from the Foundation, e.g .Heading and Text. I noticed that all other components are exported in package.json but not the Typography Foundation. What’s the recommended approach to use those? Would it make sense to export those, too?

https://github.com/Frontify/arcade/blob/main/package.json

How package.json looks like:

"./components/*": {
    "types": "./dist/src/components/*/index.d.ts",
    "import": "./dist/src/components/*/index.js"
}
...

What I need:

"./components/*": {
    "types": "./dist/src/components/*/index.d.ts",
    "import": "./dist/src/components/*/index.js"
},
"./foundation/*": {
    "types": "./dist/src/foundation/*/index.d.ts",
    "import": "./dist/src/foundation/*/index.js"
},

→ Usage:

import { Heading } from '@frontify/arcade/foundation/typography/Heading';

This is a feature request, that you might already have planned. But I’ll report it anyway: it would be nice to control the overflow of the breadcrumbs. Currently it wraps on a multiple lines which is often a good solution. But in the future these would be useful and make it a more flexible component for many use cases:

• truncate the middle, so that both the start and end of a path are visible
• truncate the end by showing overflowing items in a dropdown

I’ve noticed a glitch that causes unexpected dropdown behavior after choosing an option and then quickly opening the dropdown again.

1. Open the dropdown
2. Choose an option by clicking
3. While the dropdown is closing, click the dropdown to open it

Reproduction @2.3.0
https://codesandbox.io/s/dropdown-open-close-l75rwn

I think it would make sense if the "rounding" prop of a "Button" that only has an "Icon" would result in a circular button. Right now it’s more like an oval.

https://fondue-components.frontify.com/?path=/story/components-button--with-icon&args=rounding:Full

When using a Flyout component with a <Button> trigger, the button appears to be wrapped in another div with additional spacing. That can result in extra spacing that might might not be desired.

In the example, a TextInput is displayed together with a Flyout inside a row. The row has uniform padding on all sides. But because the trigger is wrapped in an element, the padding on the right side is too large. This can be solved by regulating the padding-right of the container, but ideally, the <Button> wouldn’t be wrapped in yet another element :)

Reproduction (2.0.0)
https://codesandbox.io/s/flyout-frontify-arcade-2-0-0-753yb

This issue provides visibility into Renovate updates and their statuses. Learn more

Rate Limited

These updates are currently rate limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency vite to v2.6.3
• chore(deps): update actions/setup-node action to v2

Open

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

• chore(deps): pin dependencies (@cypress/react, @cypress/vite-dev-server, @frontify/eslint-config-react, @rollup/plugin-alias, @rollup/plugin-node-resolve, @storybook/addon-actions, @storybook/addon-essentials, @storybook/addon-links, @storybook/addon-postcss, @storybook/react, @svgr/core, @svgr/plugin-jsx, @svgr/plugin-prettier, @svgr/plugin-svgo, @types/react, @types/react-dom, @vitejs/plugin-react-refresh, autoprefixer, chalk, cross-env, cypress, cypress-real-events, esbuild, eslint, eslint-plugin-jsx-a11y, esno, fast-glob, husky, is-ci, postcss, postcss-cli, postcss-nested, prettier, rimraf, rollup, rollup-plugin-dts, rollup-plugin-esbuild, storybook-builder-vite, storybook-dark-mode, tailwindcss, typescript, vite)
• chore(deps): update storybook monorepo to v6.3.10 (@storybook/addon-actions, @storybook/addon-essentials, @storybook/addon-links, @storybook/react)

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