RocketCommunicationsInc / astro

Astro UXDS is a collection of guidelines, patterns and components for designing space-based user interface applications.
https://astrouxds.com
Other
113 stars 25 forks source link

possible bug in RuxInput react component #104

Closed 321github123 closed 2 years ago

321github123 commented 3 years ago

Hi,

When I set “invalid” to “false” in the RuxInput react, the help text appears as error text (red).

image

I modified the sandbox code here

https://astro-components.netlify.app/?path=/story/astro-uxds-patterns-forms-react--page

Code below:

import './styles.css'
import { React, useState } from 'react'
import {
    RuxInput,
    RuxSelect,
    RuxCheckbox,
    RuxCheckboxGroup,
    RuxRadio,
    RuxRadioGroup,
    RuxSlider,
    RuxButton,
    RuxOption,
} from '@astrouxds/react'
export default function App() {
    const [firstName, setFirstName] = useState('')
    const [lastName, setLastName] = useState('')
    const [email, setEmail] = useState('')
    const [countryRegion, setCountryRegion] = useState('United States')
    const [options, setOptions] = useState('')
    const [range, setRange] = useState(50)
    const [things, setThings] = useState([])

    const handleSubmit = (e) => {
        e.preventDefault()
        alert(`
     First Name: ${firstName} \n
     Last Name: ${lastName} \n
     Email: ${email} \n
     Country/Region: ${countryRegion} \n
     Options: ${options} \n
     Things: ${things} \n
     Range: ${range} \n
    `)
    }
    const handleThings = (e) => {
        let arr = things
        arr.push(e.target.value)
        let unique = [...new Set(arr)]
        setThings(unique)
    }
    return (
        <div className="container">
                <div>
                    <RuxInput
                        label="Last Name"
                        value={lastName}
                        help-text='help-text'
                        error-text=''
                        invalid={false}
                    />
                </div>
        </div>
    )
}
micahjones13 commented 3 years ago

Hey there,

Just wanted to give an update that we've identified the issue that is causing the error-text styling to be applied to the help-text when help-text is not an empty string but error-text is. We have a solution and will be implementing it here shortly.

Thanks for bringing this up! I will comment here again when the fix is deployed.

321github123 commented 3 years ago

Thanks for the update!

markacianfrani commented 2 years ago

we've just published 6.0.2 that hotfixes this. let us know if youre still having issues, thanks!