Patternfly-react: PF4 Alert: React does not recognize the `variantLabel` prop on a DOM element.

Created on 12 Feb 2020  路  4Comments  路  Source: patternfly/patternfly-react

Using the Alert component injects variantLabel prop to the alert action. This prop is only accepted by the AlertActionCloseButton and other AlerAction components.

There are two possible solutions to this

  1. Stop enforcing AlertActionCloseButton (and others) to be used as the action component by stopping cloning the action and injection of additional props. Let the consumers take care of accessibility. This would be a preferred option IMO because we can actually use component composition.
  2. Instead of using type node for the actions, make the action a render function and pass these additional props as a innerProps or something. Then the dev could take these accessibility props and apply them correctly.
  3. Remove the action prop from the alert and replace it by onClose (and others for other alert action components) prop. The only accepted components are AlertAction*. Customization of the action is pointless and we only need the actions.

Line of code responsible: https://github.com/patternfly/patternfly-react/blob/master/packages/patternfly-4/react-core/src/components/Alert/Alert.tsx#L85

PF4 bug

All 4 comments

@tlabaj can you look at this issue and prioritize it? It is kinda pressing issue, because whenever we show toast notification we receive error in dev tools that the variantLabel prop is not recognised.

@seanforyou23 I converted t#2847 to an epic and added this issue to the epic. I will create issues for the other components as well.

@Hyperkid123 @karelhala This issue has been investigated by @seanforyou23 and he has a PR up. The fix would be considered a breaking change and we have it scheduled for our 2020.04 milestone.

Was this page helpful?
0 / 5 - 0 ratings