bcrumbs / reactackle Goto Github PK

Due to mouse events bug in react we should add pointer-events: none; to the disabled components as it causes bugs in other components's work.

I spent a minute or two and found several accessibility issues with the components immediately, for example:

• not trapping tab navigation in dialogs
• no aria attributes on checkboxes
• missing outline/active styles on checkboxes, buttons, etc.
• arrow buttons don't change Select dropdown choices
• focusing other elements doesn't close custom select dropdowns

This signals to me that you folks haven't done much with accessibility (that's fine, few have). Or maybe you're just saving that work for later (good luck, that usually doesn't go well 😑).

I don't have time to do a full audit, and the amount of code that needs to change is probably pretty considerable. So I'm opening this issue to point you to a document that can help you dive deeper into accessibility.

https://www.w3.org/TR/wai-aria-practices-1.1/

I'd just encourage you to spend a day studying this document, then implement the proper attributes and behavior to create a more accessible web. If your components aren't highly accessible, you've only done half the job of a library like this 🤗

We already have all this variations, thanks to PropTypes. So instead of manually write snapshot test case for each prop, which is unmaintainable and unreliable, we can just generate it with tools like react-docgen.

In the current version, AutoPosition can calculate its position only according to window.

I propose add a prop virtualizeOptionList to Select Box. If virtualizeOptionList set true, then rendering using react-virtualized or a similar approach. It's very nice for large options list.

On showOption change, it would be helpful to know if options list is shown. It's useful for changing the state of another component.

proposed by @Konstantin-Z

Ex. - props.icon in Button

keyUp/keyDown - change option
enter, space - select option, open option list

Ex. defaultProps in Tabs - now we can't parse such props as DefaultLinkComponent in example:

const defaultProps = {
  linkComponent: DefaultLinkComponent,
};

https://github.com/styled-components/jest-styled-components

I want to see component in one click in sidebar menu.

As an alternative we can use babel-preset-env instead of es201x presets and add babel-polyfill.

1. Make mouse following optional. In this case tooltip can be shown by hovering or focusing parent component & positioned with AutoPosition component. Hide tooltip on blur.
2. Add possibility to add more complex content to the tooltip.

Look at Icon prop here

At now Card background can be changed only by Theme.

TextField type=‘password' doesn't work:

1. Password isn't hidden behind dots
2. Eye icon doesn't appear

Options in the snippet not match the data in autocomplete

This is inconvenient for users which use component with keyboard

1. IconFontAwesome is now a default option for all our components, so we should replace it with custom icons.
2. FInd out how to separate IconLibrary and IconFontAwesome without duplication of styles.

Probable alternative to the current font-awesome: https://gorangajic.github.io/react-icons/index.html

Currently we can't customize Button's Icon appearance throught the Theme

Add enterHandling flag that define should we press focused button on enter key press.
Add focusedButton prop that determine which button to focus.
Remove onEnterKeyPress prop.

Hi guys.
Here is the complain with a bit of tips that may help :)
From what I can see now, those components styles are impossible to override using
Button.extend styled-components API. It's fine for something sophisticated like Checkboxes and other stuff, but for things that can be easily extend this way (Buttons, Inputs, Forms etc), I think it's very important.
Also styled(Button)won't work too, since you don't pass down className to the core component (in this case Button itself).
For things like styling of nested elements you can use something like labelStyles props where you can inject compiled CSS chunk via css function from styled-components.
And then import them at the bottom of the Label this way.

export const Label =styled.label`
  ${props => props.css}
`;

So you can override its properties without any className hooks, like labelClass prop so you pass it to label and then inject it like

const NewForm = styled(Form).attrs({
  labelClass: "overriden-form-label"
})`
  & .overriden-form-label {
    font-size: 20px;
  }
`

This flexibility is VERY important :)
Hope my suggestions will help with that.

For now icon is the same for TextField type='password' with visible and hidden password.

Test issue for GitHub Projects testing

Make it possible to access reactackle channel through link

One of options https://github.com/rauchg/slackin

Consider support more sources. Ex. https://material.io/icons/

Check every component for compatibility issues with React 16 beta

We have correct support but need to add missing attributes for:

• date
• datetime-local
• email
• month
• number
• password
• search
• tel
• text
• url
• week

We have correct support but need to add missing attributes and styling for:

• file
• range
• color
• hidden