Expectations

Is there a way to get access to sketch, illustrator, etc files? We would love to be able to give our designers the components we want to use to build out user flows!

Reality

I cant find any online through the Zendesk design site.

Steps to Reproduce

n/a

-->

Fine Print

• Component:
• Version:
• Browsers: all

Expectations

Computer should remain responsive when UI using the Dots loader is displayed

Reality

Computer slows down with chrome hitting >70% CPU on 2016 MBP.

Steps to Reproduce

• Go to https://garden.zendesk.com/react-components/loaders/#dots (keep this tab in the foreground)
• Open the Chrome Task Manager and wait a few seconds

Suggestion

Consider implementing the animation using CSS animations or SMIL rather than React.

Fine Print

• Component: Dots Loader
• Browsers: Chrome on macOS

This is a nice project 👏

It would be ace if you could include the ES6 modules in the exported assets and reference them in the package.json file.

That would make it possible to use the ES6 module directly in other projects, rather than relying on only the commonjs version.

Expectations

When opening this opening the menu in the inline search example in this section https://garden.zendesk.com/react-components/menus/#menucontainer the page scrolls in different ways depending on the browser. I expect the main page to not scroll at all.

Reality

Chrome running the styleguide locally:

Firefox running the https://garden.zendesk.com/react-components/menus/#menucontainer example:

When running https://garden.zendesk.com/react-components/menus/#menucontainer in Chrome I get a quick flicker that I wasn't able to capture with a gif.

Steps to Reproduce

1. Open the inline search example

Fine Print

• Component: menus
• Browsers: all

Expectations

TabPanel component should accept all <div> props.

Reality

It does not apply valid div props, such as data-test-id etc.

Steps to Reproduce

1. Go to the Tab component style guide and add a data-foo="something" attribute to a TabPanel component.
2. Inspect the rendered element in the DOM and see that it does not have the attributed on it.

Fine Print

• Component: TabPanel
• Browsers: all

Expectations

Trying to use the Anchor component from react-buttons:

const { Anchor } = require( '@zendeskgarden/react-buttons')

Reality

I get a parse error due to Anchor trying to require a raw SVG file:

ParseError: Unexpected token
line 1
place-picker/node_modules/@zendeskgarden/svg-icons/src/12/new-window-stroke.svg

Looking at the distributed file (node_modules/@zendeskgarden/react-buttons/dist/index.js) I see:

module.exports = require("@zendeskgarden/svg-icons/src/12/new-window-stroke.svg");

My understanding is that the zendeskgarden build process is supposed to use SVGR to turn the raw SVG into React components, but somehow a require of raw SVG made it into the dist file?

Or is there some build step I'm missing here?

Fine Print

• Component: buttons
• Version: 3.9.0
• Browsers: all

Expectations

No warnings or errors in console.

Reality

Styled components warning in console due to numerous react-textfields components

Functions as object-form attrs({}) keys are now deprecated and will be removed in a future version of styled-components. Switch to the new attrs(props => ({})) syntax instead for easier and more powerful composition. The attrs key in question is "className" on component "Label".

Steps to Reproduce

1. yarn start CRA with form element from zendesk garden
2. check console
3. see errors

Fine Print

• Component: react-textfields - Label, Input, Button__StyledButton, TextGroup
• Version: 3.8.3
• Browsers: all

Bug description

Wrong keyframes are used by react-components. It probably comes from css minification.

2 different packages will declare different keyframes, but during minification, keyframes names will be replaced by a, b, c, ...

The result is that keyframes overlap between packages, and a component from package x will be associated animations from package y if the names overlap and styles of package y are imported last.

Steps to Reproduce

In my case, the Modal component uses the keyframe b declared in the react-select module instead of the keyframe b declared in its own module (react-modal).

• Create a component using a modal and import the modal styles first, and select styles last.
• See the animation placing briefly the modal on bottom of the page

Expectations

I expect menu hover/focus styling to track with my mouse. If I hover over items, I expect them to get focus styling. Once my mouse is no longer focusing on that item, I expect it to lose focus styling. I expect the most recently used input type to take control of the menu (e.g. if I am focusing, and I start using the keyboard, I expect the keyboard to take over from where the mouse was. If the mouse exits the menu area, but the menu is still open, and I start using the keyboard, I expect the highlighting to start from the top of the menu).

Basically I expect the same behavior present in native menus.

Reality

Mouse can leave the menu area, but items are still highlighted. This is also true if you focus a disabled item; the hover state remains on the last focused item.

Steps to Reproduce

1. Use a Garden menu, observe hover/focus treatments

Fine Print

• Component: Menus
• Browsers: all

Expectations

I expected TextField to conditonally render children, with the possibility to also render null if nothing is returned (from a ternary for example):

  <InputWrapper>
            <TextField disabled={disabled}>
                <Label htmlFor={name}>{label}</Label>
                {hint !== null && <Hint>{hint}</Hint>}
                <ZendeskInput
                    name={name}
                    validation={validationState}
                    {...props}
                />
                // Could render null:
                {validationState === "error" && (
                    <Message validation={"error"}>MES</Message>
                )}
                {message !== null && <Message>{message}</Message>}
            </TextField>
        </InputWrapper>

Reality

This throws an error:
Unhandled Rejection (TypeError): Cannot read property 'type' of null

I now use a current workaround by rendering a empty element when false.

Steps to Reproduce

Passing null as child to TextField causes this error

Fine Print

• Component: TextField
• Browsers: Chrome

Expectations

Reality

Steps to Reproduce

Fine Print

• Component:
• Version:
• Browsers: all

The Select examples from the Styleguide should render on React 15.6.

Reality

Uncaught Error: FieldContainer.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

It returns an array, because FieldContainer.render() (at https://github.com/zendeskgarden/react-components/blame/master/packages/selection/src/containers/FieldContainer.js#L86) calls the anonymous render prop function in SelectField (at https://github.com/zendeskgarden/react-components/blob/master/packages/select/src/elements/SelectField.js#L63-L92) which returns React.Children.map(...).

React.Children.map() returns an array.

For comparison, the TextField's render prop function wraps the array returned by React.children.map() in a <TextGroup>, which avoids this problem. TextField works fine in React 15.6.

Fine Print

• Component: SelectField
• Browsers: all

This is a question, and possibly a feature request.

Why can't we just pass the style overrides to each component directly?

 <ExampleView styles={styleOverrides}>

versus

<ThemeProvider  styles={styleOverrides}>
    <ExampleView>
</ThemeProvider>

I'm new to React so not sure if there is a drawback or limitation that caused you guys to go with the second method. But I don't see why each component can't handle injecting its own style overrides.

So maybe instead of doing this in the code ${props => retrieveTheme(COMPONENT_ID, props)}; it can just be this ${props => props.styles}

Thanks for all the awesome components. Really speeds me up developing Zendesk apps and keep the UI in line with the Zendesk products!

I make use of the loader components, but one thing I'm missing is a progress bar. It would be nice to give the user an impression of progress, instead of only showing a waiting animation. I think you can imagine many use cases, but just to name two:

• When you need to do several (paginated) API calls.
• When you are processing a large number of records.

I think it would be cool if you could set the color (Bootstrap example) and can have an optional label (Bootstrap example). I don't really have a use case for stacked bars and I don't really care if it's animated or not, as long as it will be as good as the other components ;)

Expectations

HTML IDs should not collide. Clicking on a label should reliably focus the input next to it.

Also it should be possible to use different packages at slightly different versions (as long as peer dependencies are satisfied).

Reality

I have a form with some text inputs and checkboxes as siblings. The rendered DOM contains:

<input data-garden-id="textfields.input" data-garden-version="3.3.6"
  ... id="garden-0--input" ... >

...

<input type="checkbox" data-garden-id="checkboxes.input" data-garden-version="3.3.5"
  ... id="garden-0--input" ... >

As you can see, the data-garden-version differs by a patch increment and the id (garden-0--input) clashes.

The root cause seems to be that each package has react-selection as a dependency, and this brings in two copies of IdManager. As the Id Manager uses a module-local variable to keep sequential IDs, this is guaranteed to clash.

Steps to Reproduce

1. Install two versions of textfields and checkbox so that they bring in different versions of react-selection.
2. Put a checkbox (using <Checkbox>) and a text input (using <TextField>) on the same page so they are rendered at the same time.
3. Clicking the label of the second one (in DOM order) will focus the first input.

Suggestions

1. Use UUID
2. Use a different suffix/prefix in the IDs for each package. E.g. garden-0--checkbox-input.
3. Make the ID counter global (window.idCounter?)
4. Put the ID counter in some sort of Provider
   ...

Fine Print

• Component: Checkbox, Textfields, Radio?
• Browsers: all

Expectations

I expect the code examples to be viewable on mobile devices.

Reality

Our styleguide Grid component used in examples isn't mobile responsive. We need to investigate bringing in bootstrap grid or an equivalent for the examples.

Steps to Reproduce

1. Change viewport size

Fine Print

• Component: all Grid usages
• Browsers: all

Expectations

With a param named velocity, I would expect that it would default to 1 and that increasing the number to 2 would double the animation speed — in other words, I expect velocity to scale with frequency and to scale inversely with the period.

Reality

Bigger numbers make it go slower, and the default is 1.05.

Steps to Reproduce

Try it

Suggestions

Either:

• Change the math so that velocity is a multiple of the baseline speed, with a default of 1, where 0 would stop animation and 2 would be twice as fast; or
• Rename the variable. Since positive numbers slow the animation speed, negative numbers speed it up, and 0 has no effect, perhaps slowdown is a good name; or
• Just expose the cycle period directly, allowing consumers to set the time a full animation cycle takes to complete; or
• Remove this parameter and determine speed automatically based on the rendered size (as I understand to be the intended purpose). This option removes freedom but increases consistency.

I tend to think the first, third, and fourth options are the best as they involve the least guesswork and the most intuitive interface

Fine Print

• Component: loaders/dots
• Browsers: all

Expectations

The Modal scroll behavior works the same in Internet Explorer as it does in the other browsers.

Reality

Massive Modal in Chrome

Massive Modal in Internet Explorer

Notice the Header has disappeared. If you scroll up, the Footer will scroll out of view.

Steps to Reproduce

1. Open the Garden React Modal documentation on Internet Explorer
2. Add a bunch of content to the Modal body (enough so that it overflows)
3. Notice that the entire modal scrolls. In other browsers only the body scrolls. This causes IE users to miss content within the Footer

Fine Print

• Component: Modal
• Browsers: Internet Explorer

Expectations

Expecting SelectField drop-down examples to display name value after a selection is made, not key value.

Reality

After a selection is made, the drop-down SelectField examples display the selection's key value versus name value. Users often copy/paste code examples verbatim, so displaying name value would be best.

Steps to Reproduce

1. Go to https://garden.zendesk.com/react-components/select/
2. Go to "Accessibility Message" or "Small Select" example
3. Click on drop-down and select "Item 3"

Key value "item-3" is displayed instead of "Item 3".

Fine Print

• Component: SelectField
• Browsers: all

Currently scrollable tables do not reverse in RTL.

Expectations

Following (this documentation)[https://garden.zendesk.com/react-components/select] I expected to be able to use maxHeight in one of these ways:
<Select maxHeight={'250'} /> or <Select maxHeight={250} />
Doc says:

One of type: string, number

Reality

These syntaxes get ignored by the component. The only one that works is <Select maxHeight={'250px'} />.

Steps to Reproduce

1. Try to implement one of the broken syntaxes
2. Witness that nothing happens
3. Use the other syntax
4. Admire that it works just fine

Implementation ideas:

• Fix Doc
  or
• Add a conversion layer somewhere that ensures the prop value is formatted in a way that's HTML/CSS compliant.

Fine Print

• Component: Select
• Browsers: Chrome (I suspect all)

Expectations

The example of the MultiSelect should not perform an action when ENTER is pressed within an empty input.

Reality

It looks like our example code is invalid in the documentation and performs an action against a tag when the input is empty.

Steps to Reproduce

1. Open the MultiSelect example
2. Open the example and hit ENTER
3. Watch a tag get selected for some reason 🤷‍♂️

Fine Print

• Component: AutoCompleteContainer
• Browsers: all

Expectations

Should work after configuring css modules:

const withCss = require('@zeit/next-css')
module.exports = withCss({
  cssModules: true
})

Reality

Getting CSS compilation error for View components. For the Container components I'm getting Element is not defined error.

Steps to Reproduce

Any next starter with Garden.

Expectations

I showed up, expecting to have my mind blown.
Universal Express, Webpack and React app, trying to use the React components.

Reality

But all I got was this lousy

Steps to Reproduce

1. yarn add @zendeskgarden/react-select
2. import Select from "@zendeskgarden/react-select";
3. Cry

Fine Print

• Component:
• Browser: all
• Environment: Node + Browser

Expectations

We just started trying to use zendeskgarden's react-components and we started with react-menus.
Since it lists react@15 as a peer dependency we weren't expecting to run into compatibility issues.

Reality

Apologies if I'm missing something obvious but here's what I'm getting when adding a <Menu /> component in our application:

Steps to Reproduce

I've managed to reproduce the error with the basic example found in the documentation page:
https://stackblitz.com/edit/react-uadcwt
Upgrading to react@16 fixes the issue so it seems to be related to the version of react in use.

Fine Print

• Component: menus
• Browsers: all

Expectations

I just want to display alerts or notifications. Just like is was described in documentation.
Nothing fancy, no style overriding.

Reality

Notification style is broken. Alert style as well.

Steps to Reproduce

1. add styled-components dependency (v4),
2. create a component to display alert (using Alert or Notification),
3. that's all

https://codesandbox.io/s/v60ryn5007

Fine Print

• Component: Alert, Notification
• Version: latest
• Browsers: all

nb: no issue while using styled-components v3!

Hi there,

Thank you for publishing your UI system that makes use of styled-components. I tried different ones, but they don't look as nice as this one.

I do have some problems with the AutoComplete example however, the examples online are a bit awkward.. Which is a pity because they look very intuitive. I created this issue to hope to get some light shed on my questions, and to make some remarks. If this is not the place to do so, my apologies. The following is mostly regarding the examples, because the API reference overall is pretty clear.

• Is there a specific reason you import from src? ([zendesk-package]/src)
• I believe the first example is broken, it assume most of the code belongs in the render method? Also some imports are missing I believe, like AutocompleteContainer.
• What exactly is the State component? I don't see it imported.
• I saw AutoComplete is inspired by the work of DownShift (on twitter somewhere), what is the benefit of creating a custom version when you still have to implement most of it yourself? Or does it actually use Downshift under the hood?

Expectations

The full area of a text field should be clickable.

Reality

When using FauxInput with MediaInput only the area inside the padding is clickable (only the MediaInput itself).

From the Styleguide example:

Steps to Reproduce

1. Go to the MediaInput example in style guide: https://garden.zendesk.com/react-components/textfields/#mediafigure
2. Start clicking

Fine Print

• Component: react-textfields
• Browsers: all

I am attempting to implement the SelectField component. My code can be found here.

I am receiving the errors below when I click on the select element (all referring to a missing ref property). Is this something I can fix on my end, or an issue with the component itself?

Thank you.

Uncaught Error: Accessibility Error: You must apply the ref prop to your containing element.
    at FocusJailContainer.validateContainerRef (FocusJailContainer.js:59)
    at FocusJailContainer.componentDidMount (FocusJailContainer.js:43)
    at commitLifeCycles (react-dom.development.js:16227)
    at commitAllLifeCycles (react-dom.development.js:17592)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at commitRoot (react-dom.development.js:17788)
    at completeRoot (react-dom.development.js:19240)
    at performWorkOnRoot (react-dom.development.js:19169)
(anonymous) @ FocusJailContainer.js:59
componentDidMount @ FocusJailContainer.js:43
commitLifeCycles @ react-dom.development.js:16227
commitAllLifeCycles @ react-dom.development.js:17592
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:17788
completeRoot @ react-dom.development.js:19240
performWorkOnRoot @ react-dom.development.js:19169
performWork @ react-dom.development.js:19077
performSyncWork @ react-dom.development.js:19051
interactiveUpdates$1 @ react-dom.development.js:19320
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4880
MenuContainer.js:193 Uncaught Error: Accessibility Error: You must apply the `menuRef` prop to the element that contains your menu.
    at MenuContainer.componentDidUpdate (MenuContainer.js:193)
    at commitLifeCycles (react-dom.development.js:16242)
    at commitAllLifeCycles (react-dom.development.js:17592)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at commitRoot (react-dom.development.js:17788)
    at completeRoot (react-dom.development.js:19240)
    at performWorkOnRoot (react-dom.development.js:19169)
    at performWork (react-dom.development.js:19077)
componentDidUpdate @ MenuContainer.js:193
commitLifeCycles @ react-dom.development.js:16242
commitAllLifeCycles @ react-dom.development.js:17592
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:17788
completeRoot @ react-dom.development.js:19240
performWorkOnRoot @ react-dom.development.js:19169
performWork @ react-dom.development.js:19077
performSyncWork @ react-dom.development.js:19051
interactiveUpdates$1 @ react-dom.development.js:19320
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4880
react-dom.development.js:16013 The above error occurred in the <FocusJailContainer> component:
    in FocusJailContainer (created by Context.Consumer)
    in WithTheme(FocusJailContainer) (created by Popper)
    in div (created by Context.Consumer)
    in StyledComponent (created by MenuContainer__MenuWrapper)
    in MenuContainer__MenuWrapper (created by Popper)
    in Portal (created by Popper)
    in Popper (created by MenuContainer)
    in Manager (created by MenuContainer)
    in MenuContainer (created by Context.Consumer)
    in WithTheme(MenuContainer) (created by SelectContainer)
    in SelectContainer (created by Select)
    in Select (created by CategorySelect)
    in div (created by Context.Consumer)
    in StyledComponent (created by SelectGroup)
    in SelectGroup (created by FieldContainer)
    in FieldContainer (created by SelectField)
    in SelectField (created by CategorySelect)
    in CategorySelect (created by Context.Consumer)
    in Connect(CategorySelect) (created by Main)
    in div (created by Main)
    in Main (created by Context.Consumer)
    in Connect(Main)
    in ThemeProvider (created by ThemeProvider)
    in ThemeProvider
    in Provider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:16013
logError @ react-dom.development.js:16049
update.callback @ react-dom.development.js:16950
callCallback @ react-dom.development.js:11312
commitUpdateEffects @ react-dom.development.js:11351
commitUpdateQueue @ react-dom.development.js:11339
commitLifeCycles @ react-dom.development.js:16276
commitAllLifeCycles @ react-dom.development.js:17592
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:17788
completeRoot @ react-dom.development.js:19240
performWorkOnRoot @ react-dom.development.js:19169
performWork @ react-dom.development.js:19077
performSyncWork @ react-dom.development.js:19051
interactiveUpdates$1 @ react-dom.development.js:19320
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4880
react-dom.development.js:16013 The above error occurred in the <MenuContainer> component:
    in MenuContainer (created by Context.Consumer)
    in WithTheme(MenuContainer) (created by SelectContainer)
    in SelectContainer (created by Select)
    in Select (created by CategorySelect)
    in div (created by Context.Consumer)
    in StyledComponent (created by SelectGroup)
    in SelectGroup (created by FieldContainer)
    in FieldContainer (created by SelectField)
    in SelectField (created by CategorySelect)
    in CategorySelect (created by Context.Consumer)
    in Connect(CategorySelect) (created by Main)
    in div (created by Main)
    in Main (created by Context.Consumer)
    in Connect(Main)
    in ThemeProvider (created by ThemeProvider)
    in ThemeProvider
    in Provider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:16013
logError @ react-dom.development.js:16049
update.callback @ react-dom.development.js:16950
callCallback @ react-dom.development.js:11312
commitUpdateEffects @ react-dom.development.js:11351
commitUpdateQueue @ react-dom.development.js:11339
commitLifeCycles @ react-dom.development.js:16276
commitAllLifeCycles @ react-dom.development.js:17592
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:17788
completeRoot @ react-dom.development.js:19240
performWorkOnRoot @ react-dom.development.js:19169
performWork @ react-dom.development.js:19077
performSyncWork @ react-dom.development.js:19051
interactiveUpdates$1 @ react-dom.development.js:19320
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4880
FocusJailContainer.js:59 Uncaught Error: Accessibility Error: You must apply the ref prop to your containing element.
    at FocusJailContainer.validateContainerRef (FocusJailContainer.js:59)
    at FocusJailContainer.componentDidMount (FocusJailContainer.js:43)
    at commitLifeCycles (react-dom.development.js:16227)
    at commitAllLifeCycles (react-dom.development.js:17592)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at commitRoot (react-dom.development.js:17788)
    at completeRoot (react-dom.development.js:19240)
    at performWorkOnRoot (react-dom.development.js:19169)
(anonymous) @ FocusJailContainer.js:59
componentDidMount @ FocusJailContainer.js:43
commitLifeCycles @ react-dom.development.js:16227
commitAllLifeCycles @ react-dom.development.js:17592
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:17788
completeRoot @ react-dom.development.js:19240
performWorkOnRoot @ react-dom.development.js:19169
performWork @ react-dom.development.js:19077
performSyncWork @ react-dom.development.js:19051
interactiveUpdates$1 @ react-dom.development.js:19320
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4880

Expectations

A <ButtonGroup> should never allow focus on more than one item.

Reality

With some amount of effort, you can break focus styling for buttons.

Steps to Reproduce

1. Mouse down on the last button within a <ButtonGroup>
2. Drag off of the button and then mouse up
3. Switch to a new tab and then return

Result: both the first and last button will style with a focus state.

Fine Print

• Component:
• Browsers: all

Expectations

The Garden Button displays a focus shadow when it receives focus as a result of a keyboard interaction, but not when it receives focus as a result of a mouse interaction.

This is accomplished using the KeyboardFocusContainer, which provides a keyboardFocused flag to the render prop.

It is often necessary to add styling to the Garden button, for example to change its background color. In this scenario, it is also necessary to change the color of the focus shadow. One could do this with:

const StyledButton = styled(Button)`
  background-color: red;
  :focus {
    box-shadow: 0 0 0 3px red;
  }
`;

but :focus does not have the same behaviour the actual button, which adds the is-focused class on keyboardFocused || props.focused.

There should be a way for styled buttons to override styling for specific button states, without having to reimplement the logic of how it gets into that state.

Reality

There isn't.

Suggestion

In Button:

class Button {
  ...
  static classNames = ButtonStyles;
}

In StyledButton:

const StyledButton = styled(Button)`
  background-color: red;
  &.${Button.classNames['is-focused']} {
     box-shadow: 0 0 0 3px red;
  }
`;

As CSS Components is also an open source project, class names like 'is-focused' are already a documented part of the Garden public API.

This approach is generic enough to handle all such use cases (other states and other components).

Fine Print

• Component: Buttons, but maybe others?
• Browsers: all

Expectations

Whenever one of our internal components (or external usages) use the withTheme HOC to determine the current RTL locale without a parent ThemeProvider, it should throw an error. When using the styled-components withTheme HOC without the parent ThemeProvider it will fail in a production build only.

We should make it obvious that something is going to break by throwing an error and stoping rendering rather than a console.warn()

Reality

When using a withTheme HOC without a ThemeProvider the user sees a console.warn(). For consumers this isn't immediately identifiable as something that will "break the world".

Steps to Reproduce

1. Use Garden container or element
2. Do not wrap it in a ThemeProvider
3. Do a production build
4. Watch the world 🔥

Fine Print

• Component: all packages using @zendeskgarden/react-theming (everything)
• Browsers: all

Solution

I suggest that we include a context check between our ThemeProvider and withTheme components. This check will throw an error within withTheme if there is no parent ThemeProvider.

@eddiesholl what are your thoughts on this?

Hi,

I want to use this for my project i but i need the trigger to be onclick not hover. and I need the content to be a custom component.

Expectations

I expect the documentation at https://garden.zendesk.com/react-components/theming/#themeprovider to be a valid example of theming a <Notification /> component.

Reality

The "theming key" is invalid and doesn't show a real world theming scenario. We should update the docs to include a "live" example with theming a notification or similar component.

Steps to Reproduce

1. Open the docs

Fine Print

• Component: theming
• Browsers: all

Expectations

It should be possible to create tables where the widths of columns are determined by the content in the cells.

Additionally, the Garden specs call for sticky headers on long tables.

Reality

With the move to flex, all cells are required to have explicit widths. Even when we were using HTML tables, all cells required explicit widths

Suggestion

Use CSS Grid to permit both auto-column-width and sticky headers at the same time.

https://codepen.io/aravindet/pen/WggmWR

Caveats:

• The DOM structure is Table > Cell, there is no DOM element corresponding to a Row. This has implications on how styling is applied.
• To support IE11, each cell requires some inline styling (-ms-grid-row and -ms-grid-column).
• IE11 does not support position:sticky, but sticky headers can be considered a progressive enhancement.

Fine Print

• Component: Tables
• Browsers: all

I am using the react scrollable table and noticed an alignment issues.

The header doesn't line up with the body of the table.
There is a setting on mac os that effects this.

When the setting is on Automatic, the scrollbars are overlaid and do not effect page layout, which is the case in the first screenshot. If they setting is on Always then the scrollbar is present and effects layout:

Hi, If I want to add the zaf client into this app, could you tell me how to do it?

Thanks

Expectations

It should be possible to use the && conditional rendering pattern within Menus.

Reality

Rendering crashes with the following exception:
Uncaught TypeError: Cannot read property 'props' of null

Steps to Reproduce

When conditionally rendering an Item within Menu following the pattern:

<Menu trigger={({ ref }) => <Button innerRef={ref}>Menu</Button>}>
  <Item key="profile">Austin Powers</Item>
  {isAdmin && <Item key="settings">Settings</Item>}
</Menu>;

Rendering crashes when isAdmin is false.

Fine Print

• Component: Menu`
• Browsers: all

Feature Request

There is currently no <Ellipsis /> component which standardizes:

• Text overflow styling
• Allows base tag changes (as prop)
• Applies a title attribute with the string value of the content

This component should live within the @zendeskgarden/react-typography package

Originally requested by @jimmylnb

Fine Print

• Component: @zendeskgarden/react-typography
• Browsers: all

Expectations

The <Range /> component should have a fill color to denote how far a range has been dragged.

Reality

Looks like a regression has occurred where the fill color is no longer being shown.

Steps to Reproduce

1. Visit https://garden.zendesk.com/react-components/ranges/

Fine Print

• Component: Range
• Browsers: Chrome & Safari (Firefox is working)

Expectations

I expect that the option list of the select component doesn't show a scrollbar when there's no need to scroll.

Reality

On Google Chrome I get a scrollbar in the various selects. In Mozilla Firefox and Microsoft Edge everything is as expected.

Steps to Reproduce

This can be experienced at:
https://garden.zendesk.com/react-components/select/
https://codesandbox.io/s/vvz9zm8663

Fine Print

• Component: Select
• Version: 3.5.2
• Browsers: Google Chrome (Windows, Version 72.0.3626.119 (Official Build) (64-bit))

Expectations

When I only use a mouse, focus affordances (shadows, highlights) should not be shown.

Reality

When a menu is shown and then closed by clicking one of the options, the trigger of the menu (typically a button) shows a focus affordance.

Steps to Reproduce

• Go to https://garden.zendesk.com/react-components/menus/
• Click a button to show a menu
• Click a menu item
• If an alert is shown, dismiss it
• The button is focused.

Fine Print

• Component: Menu
• Browsers: all

Expectations

Many packages include high-abstraction "element" implementations for the most common usages.

I would expect that the autocomplete package at minimum have a high-abstraction implementation for the Autocomplete example.

There may also be a need for a MutliSelect abstraction in the future, but it is used less often.

These components would probably have a similar API to the Select and SelectField components.

Reality

There is currently no high-abstraction elements in the @zendeskgarden/react-autocomplete package.

Context

I'm working on a simple implementation of an Autocomplete using Garden's Autocomplete Container

The use case is heavily influenced by the Garden example, however, I'm abstracting away most of the stateful logic and allowing people to use the component via a render prop pattern like so:

      <AutocompleteAdder
        label={`${label}. Menu visible: ${isMenuVisible}`}
        inputValue={inputValue}
        currentValue={currentValue || ''}
        defaultValue={currentValue || defaultValue}
        addItemKey={ADD_ITEM_KEY}
        addItemLabel={'Add new item'}
        onInputChange={this.handleInputChange}
        onOptionSelect={this.handleOptionSelect}
        onMenuVisibilityChange={this.handleMenuVisibilityChange}
      >
        {({ getItemProps, focusedKey }) => (
          <CheckableItemMenu
            menuItems={filterMenuOptions(options, inputValue)}
            selectedKey={selectedKey}
            getItemProps={getItemProps}
            focusedKey={focusedKey}
          />
        )}
      </AutocompleteAdder>

Which winds up looking like this:

Within AutocompleteAdder, a menu is rendered like so:

<MenuView {...menuProps}>
    <MenuItemContainer>{menuRender({ menuProps, getItemProps, focusedKey })}</MenuItemContainer>
    <Separator />
    <AddItem
      {...getItemProps({
        key: addItemKey,
        focused: focusedKey === addItemKey,
      })}
      data-test-id={AUTOCOMPLETE_ADDER_ADD_ITEM}
    >
      {addItemLabel}
    </AddItem>
  </MenuView>

The Problem

React doesn't seem to render things in the order you'd expect it to. In this case, AddItem's getItemProps is called before all of the item's in menuRender. This might be a problem with using the function as a child/ render prop pattern, but in any case it seems we can't rely solely on the React render order for everything. Since keyboard nav ordering is set via the order that getItemProps is called in, this means that AddItem is focused before the other item's, even though they are "on top of" AddItem within the DOM.

Expectations

Since React render ordering is not guaranteed/obvious, I need to be able to specify an ordering for the focusedKeys within _this.indexKeyMap[currentIndex] . Downshift has an example of this here: https://github.com/paypal/downshift/blob/master/src/downshift.js#L789

Reality

Keyboard nav is not compatible with the render prop/ function as a child HOC pattern.

Steps to Reproduce

1. Implement an AutocompleteContainer component uses the render prop pattern (copy and pasting my code into the Garden storyguist example should work)
2. Observe that keyboard nav appears broken, as it jumps to the AddItem before the other items.

Fine Print

• Component: Autocomplete
• Browsers: all

React-Select. This error occur only in ie11 once I click the selectbox element.

Expectations

There are issues with popper.js and jsdom, particularly surrounding the usage of document.createRange.

The fix for this is usually to mock popper.js and/or create a stub for document.createRange.

We use a mock for popper.js in other parts of our codebase, and that seems to fix the issue.

We started seeing this problem again with react-autocomplete. I attempted to fix it the usual way.

Reality

I can't seem to get the errors to go away:

(node:75263) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): TypeError: document.createRange is not a function
(node:75263) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 4): TypeError: document.createRange is not a function

When I attempt to fix it with a document.createRange stub, I then get:

Warning: `NaN` is an invalid value for the `top` css style property.

I've tried all of the solutions here with no luck:

floating-ui/floating-ui#478

Note: I've been clearing the cache, etc. to ensure that wasn't the issue I'm experiencing.

Does react-autocomplete bring in a different version of Popper or something? I'm not sure how to proceed with removing these errors.

Steps to Reproduce

Use react-autocomplete and run Jest tests.

Fine Print

• Component: autocomplete
• Browsers: n/a (Node/Jest)

Expectations

Using our <Dots /> loader is a common use-case within our filterable components, Autocomplete and MultiSelect.

Providing an opinionated placement for the loading/async state would be helpful for consumers.

Original feature request by @sunesimonsen

Fine Print

• Component: @zendeskgarden/react-autocomplete
• Browsers: all

Expectations

When importing MediaInput in a React Component, following this trivial example I expected to get a nice looking fake input with little icons on both sides.

Reality

Instead, I got a lousy Invariant Violation error:

An error has occurred. Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of TestComponent.

Steps to Reproduce

Breaking code from TestComponent:

import React from 'react'
import {MediaInput, FauxInput, MediaFigure } from '@zendeskgarden/react-textfields'
class TestComponent extends React.Component {
  render () {
    return (
      <FauxInput mediaLayout>
        <MediaFigure>hey1</MediaFigure>
        <MediaInput aria-label="Media Input Example" placeholder="Example media input" />
        <MediaFigure>hey2</MediaFigure>
      </FauxInput>
    )
  }
}
export default TestComponent

For context, if I replace just the return part with the following, component loads and displays what I expect:

      <FauxInput mediaLayout>
        <MediaFigure>hey1</MediaFigure>
        <MediaFigure>hey2</MediaFigure>
      </FauxInput>

Fine Print

• Component: MediaInput et. al. from @zendeskgarden/react-textfields
• Browsers: Chrome
• Busted node_modules and recreated it after updating all npm @reactgarden dependencies. Running

Expectations

I expected to be able to import ChevronButton (https://garden.zendesk.com/react-components/buttons/#chevronbutton) from the buttons package.

Reality

I get this error 😢when I try to render this with @zendeskgarden/react-buttons 3.3.10

render() {
    return (
      <ChevronButton>
        sad
      </ChevronButton>
    );
  }

Steps to Reproduce

See Stackblitz Link: https://stackblitz.com/edit/chevron-button?file=MainContent.js

• Add @zendeskgarden/react-buttons 3.3.10
• Import the ChevronButton component and use in your file
• See the error

Fine Print

• Component: Buttons
• Browsers: all

Expectations

Click inside iframes closes the menu:

Reality

It doesn't:

Steps to Reproduce

1. Open a menu
2. Click in an iframe
3. The menu is not closed

Fine Print

• Component: menus
• Browsers: all