Single Select invalid format

Atlassian Ecosystem Design
1

Hi,
Is there any reason for the Single Select invalid color is different than the field text color?
And I can’t set the invalid message either.

Thanks, Carlos.

2

Carlos, Would you mind sharing the code?

3

This code establishes the same error (with the message) in the two fields:

'use strict';

import React from "react";

import {FieldText} from "@atlaskit/field-text";
import {StatelessSelect} from "@atlaskit/single-select";
import Button from "@atlaskit/button";

class TestFormats extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            textValue: '',
            isInvalid: false,
            invalidMessage: 'Error message'
        }
    }

    render() {
        return (<div>
            <FieldText
                shouldFitContainer={true}
                label="Text Field"
                isInvalid={this.state.isInvalid}
                invalidMessage={this.state.invalidMessage}
                onChange={(ev) => {
                    this.setState({textValue: ev.target.value})
                }}
            />
            <StatelessSelect
                shouldFitContainer={true}
                label="Select Field"
                isInvalid={this.state.isInvalid}
                invalidMessage={this.state.invalidMessage}
                items={[{items: []}]}
            />

            <div style={{display: 'flex', justifyContent: 'space-around', padding: 10}}>
                <Button onClick={() => this.setState({isInvalid: false})}>Ok</Button>
                <Button onClick={() => this.setState({isInvalid: true})}>Error</Button>
            </div>

        </div>)
    }

}

export default TestFormats;

The colors of the errors are different.
And when you click the error icon, in the text field you get the error but in the select nothing is happened.

I’m trying to add screenshots but the upload is not working

1 Like
4

Looks like field-text is using v5 or field-base (the component that handles the focus ring and invalid states) whereas single-select is still on v2.

I’ve raised Log in with Atlassian account to track this.