Indicate null value for bool-input

[marktaipan-cvisionai]

Category Feature Request

Problem Currently the bool-input element has the same appearance for both a null attribute and a False attribute.

Request Make the both the Yes/No values gray, darken the inner circle, and make the circle positioned in the center when the bool attribute value is null.

[marktaipan-cvisionai]

Proposed visual state change and state diagram

[vanivi]

Test Procedure and Scenarios:

1. Testing for the 'null' Value Test Steps:

• Locate the radio button element.
• Confirm that the attribute value is set to 'null'.

Expected Results:

• The attribute value should be 'null' when no value is selected. It should be the default value.
• The radio button should be positioned in the center of the slider (between 'yes' and 'no').
• The radio button color should be gray.
• The background color of the slider should be dark gray.

3. Testing for the 'true' or 'false' Values Test Steps:

• Locate the radio button element.
• Click on it to set the attribute value from 'null' to 'true' i.e. Yes
• Click on it again to set the attribute value from 'true' to 'false' i.e. No

Expected Results for 'true':

• The radio button should be positioned on the left.
• The radio button color should be white.
• The background color of the slider should be purple.

Expected Results for 'false':

• The radio button should be positioned on the right.
• The radio button color should be gray.
• The background color of the slider should be dark gray.

3. Testing for Toggle Between Values Test Steps:

• Click on the radio button to change the value from 'null' to 'true' or 'false'.
• Observe the changes in the radio button position and color.

Expected Result:

• When toggling from 'null' to 'true', the radio button should move to the left and color should change to white, and the background color should turn purple.
• When toggling from 'true' to 'false', the radio button should move to the right, change color to gray, and the background color should turn dark gray.
• Toggle from 'false' to 'true' and notice if the color and position of the radio button changes back to the 'true' value.