RFC: Component specs- opened state for dropdowns and pickers

[TeyaVes]

With the creation of the Component specifications , I’ve stumbled upon a couple of question marks and I wanted to hear your opinion about them. We have currently created specs for around 60 components and this is their first version so any changes, feedback and comments are more than welcomed.

Now straight to the questions:

1. Opened/Expanded state

Currently all component specs are explicitly exporting states and options, e.g

const states = [
    States.hover,
    States.focus,
    States.active,
    States.selected,
    States.disabled
];

const options = {
    size: [ Size.small, Size.medium, Size.large ],
    rounded: [ Roundness.small, Roundness.medium, Roundness.large, Roundness.full ],
    fillMode: [ FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link ],
    themeColor: [
        ThemeColor.base,
        ThemeColor.primary,
        ThemeColor.secondary,
        ThemeColor.tertiary,
        ThemeColor.success,
        ThemeColor.warning,
        ThemeColor.error,
        ThemeColor.info,
        ThemeColor.light,
        ThemeColor.dark,
        ThemeColor.inverse
    ],
};

However, we also have components, such as the dropdowns and the pickers which have popups hidden by default. When they are expanded, the popups are displayed. We should add the popup rendering as part of the component’s spec, but shall we count the OPENED state as part of the other states- hover, focus, etc. or it should come as a prop (as currently implemented)?

2. Animation containers

Another question related to the popup of the dropdowns and pickers is whether the animation container and the child-animation container element should be added to the specs or just the Popup element (as it’s currently implemented) ? We are currently trying not to overcomplicate the specs, but if you feel that these elements should be present, we’ll add them.

@telerik/kendo-dev-leads , @telerik/kendo-front-end, @telerik/theme-builder-pro-team

[Iankodj]

Here are my thoughts on the topic:

1. Opened/Expanded state

I see that we have an Active state and if there is no visual difference between Opened/Expanded and Active we might avoid adding one more state and use the Active one instead. Checking various sources, the main purpose of an Active state for such UI components is exactly to distinguish the state when the popup is opened/expanded. Unless there is specific need to visually distinguish Active and Opened state.

Additionally, I checked the Figma design that we have for the DateTimePicker adn DropDownList and there is no Active state specifically provided so I think we can use it for the purpose to flag the open/expanded state.

https://www.figma.com/file/3fta3SPx6nJMPTUcHTKmNI/Telerik-%26-Kendo-UI-Kit-Default-2.3-(UNPUBLISHED)?node-id=190%3A476&t=gT98YYd90flbI3rV-1

https://www.figma.com/file/3fta3SPx6nJMPTUcHTKmNI/Telerik-%26-Kendo-UI-Kit-Default-2.3-(UNPUBLISHED)?node-id=593%3A12315&t=gT98YYd90flbI3rV-1

Of course, if we have a technical need for an Opened state we should also consider adding one in the spec (e.g., we have it already in a suite implemented).

2. Animation containers

In my opinion, that entirely depends on the use case of the animation container and to be brief:

• Yes we need it in the spec if:

  • There is something customizable in terms of TB Pro and styles;
  • If this should be definitely part of the reference rendering and it should be strictly tested for compatibility with the UI components;
  • It comes with CSS animations and requires specific class names;

• No we should avoid it in the spec if:

  • The DOM element is optional and required only in specific cases;
  • There is no CSS animation, styles or states that depend on the particular DOM element;

[dtopalov]

As far as Active/Opened/Expanded is concerned, I think that "Opened" conveys most clearly the actual state and meaning. "Active" might be a bit confusing, as most of these components are interactive when focused (and not opened) - the end user can change the value using the keyboard etc., whereas using "Opened" cannot bring any ambiguity. "Expanded" on the other hand seems more suitable for accordion-like components such as the PanelBar or ExpansionPanel.