Change Details

As a DS designer and developer, I want to have a new Date input component available, so users can query for dates in the Simple Query Builder. {F34119195} **ACs** [] The Date input component is implemented according to the [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=7000%3A9060 | Figma specs]] and follows the behavior and accessibility principles defined in the [[ https://docs.google.com/presentation/d/1GB9WcQDQDYaf_kr0RvuaAuadKLPRytdcZ1vL78N2vx0/edit?ts=60212551#slide=id.gafe759320e_2_36 | component documentation *MISSING* ]]. [] The Date input component uses the "Input with preview". This component is made out of an input which behavior matches that of a text input component, and a preview which style matched the OptionsMenu. [] The Date input is documented in Storybook according to the specifications (see below) **States** * Same as input + an active state that displays the menu. **Storybook:** This component has its own pages in Storybook, included under a new section called "Wikibase Components" ([[ https://docs.google.com/document/d/1loENZ13z5s_Nes4exm5Z9d5S3PnR7F_0brv5azQ5XB4/edit | see structure ]]): [] A //Basic// page including controls: they allow users to enter custom text to replace the default label, and make the component disabled [] An //All/ page including the error and warning states for **Notes:** * The "base" or core component that gives shape to the date input (and will be reused with other inputs for different data types) is an "input with preview" component that should be documented under the "Input" section in Storybook.

As a DS designer and developer, I want to have a new Date input component available, so users can query for dates in the Simple Query Builder. {F34119195} **ACs** [] The Date input component is implemented according to the [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=7000%3A9060 | Figma specs]] and follows the behavior and accessibility principles defined in the [[ https://docs.google.com/presentation/d/1GB9WcQDQDYaf_kr0RvuaAuadKLPRytdcZ1vL78N2vx0/edit?ts=60212551#slide=id.gafe759320e_2_36 | component documentation *MISSING* ]]. [] The Date input component uses the "Input with preview". This component is made out of an input which behavior matches that of a text input component, and a preview which style matched the OptionsMenu. [] The Date input is documented in Storybook according to the specifications (see below) **States** * Same as input + an active state that displays the menu. **Storybook:** This component has its own pages in Storybook, included under a new section called "Wikibase Components" ([[ https://docs.google.com/document/d/1loENZ13z5s_Nes4exm5Z9d5S3PnR7F_0brv5azQ5XB4/edit | see structure ]]): [] A //Basic// page including controls: they allow users to enter custom text to replace the default label, and make the component disabled [] An //All/ page including the error and warning states **Notes:** * The "base" or core component that gives shape to the date input (and will be reused with other inputs for different data types) is an "input with preview" component (see T275758) that should be documented under the "Input" section in Storybook.

As a DS designer and developer, I want to have a new Date input component available, so users can query for dates in the Simple Query Builder. {F34119195} **ACs** [] The Date input component is implemented according to the [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=7000%3A9060 | Figma specs]] and follows the behavior and accessibility principles defined in the [[ https://docs.google.com/presentation/d/1GB9WcQDQDYaf_kr0RvuaAuadKLPRytdcZ1vL78N2vx0/edit?ts=60212551#slide=id.gafe759320e_2_36 | component documentation *MISSING* ]]. [] The Date input component uses the "Input with preview". This component is made out of an input which behavior matches that of a text input component, and a preview which style matched the OptionsMenu. [] The Date input is documented in Storybook according to the specifications (see below) **States** * Same as input + an active state that displays the menu. **Storybook:** This component has its own pages in Storybook, included under a new section called "Wikibase Components" ([[ https://docs.google.com/document/d/1loENZ13z5s_Nes4exm5Z9d5S3PnR7F_0brv5azQ5XB4/edit | see structure ]]): [] A //Basic// page including controls: they allow users to enter custom text to replace the default label, and make the component disabled [] An //All/ page including the error and warning states for **Notes:** * The "base" or core component that gives shape to the date input (and will be reused with other inputs for different data types) is an "input with preview" component (see T275758) that should be documented under the "Input" section in Storybook.