new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Shopify Polaris · all subjects

patterns

64 notes in this subject, read out of this brain and free to use. This is page 2 of 2.

Single date example implementation

This example shows how to implement the single date pattern. A TextField with a calendar icon serves as the activator for a Popover containing a Card with a DatePicker component. The TextField displays the selected date in ISO format (YYYY-MM-DD). The DatePicker is controlled with month, year, and selected date state. Clicking the input opens the popover; selecting a date sets it and closes the popover. The code is: ```javascript function DatePickerExample() { function nodeContainsDescendant(rootNode, descendant) { if (rootNode === descendant) { return true; } let parent = descendant.parentNode; while (parent != null) { if (parent === rootNode) { return true; } parent = parent.parentNode; } return false; } const [visible, setVisible] = useState(false); const [selectedDate, setSelectedDate] = useState(new Date()); const [{month, year}, setDate] = useState({ month: selectedDate.getMonth(), year: selectedDate.getFullYear(), }); const formattedValue = selectedDate.toISOString().slice(0, 10); const datePickerRef = useRef(null); function isNodeWithinPopover(node) { return datePickerRef?.current ? nodeContainsDescendant(datePickerRef.current, node) : false; } function handleInputValueChange() { console.log('handleInputValueChange'); } function handleOnClose({relatedTarget}) { setVisible(false); } function handleMonthChange(month, year) { setDate({month, year}); } function handleDateSelection({end: newSelectedDate}) { setSelectedDate(newSelectedDate); setVisible(false); } useEffect(() => { if (selectedDate) { setDate({ month: selectedDate.getMonth(), year: selectedDate.getFullYear(), }); } }, [selectedDate]); return ( <BlockStack inlineAlign="center" gap="400"> <Box minWidth="276px" padding={{xs: 200}}> <Popover active={visible} autofocusTarget="none" preferredAlignment="left" fullWidth preferInputActivator={false} preferredPosition="below" preventCloseOnChildOverlayClick onClose={handleOnClose} activator={ <TextField role="combobox" label={'Start date'} prefix={<Icon source={CalendarIcon} />} value={formattedValue} onFocus={() => setVisible(true)} onChange={handleInputValueChange} autoComplete="off" /> } > <Card ref={datePickerRef}> <DatePicker month={month} year={year} selected={selectedDate} onMonthChange={handleMonthChange} onChange={handleDateSelection} /> </Card> </Popover> </Box> </BlockStack> ); } ```

Single date pattern use cases

Use the single date pattern when merchants need to schedule an event on a specific day (such as setting a visibility date for a new online store page or an estimated arrival date for a shipment) or input memorable dates to forms (such as entering a birthdate).

Single date pattern components

The single date pattern uses the Card, DatePicker, Popover, and TextField components.

Single date pattern label guidance

Labels for date inputs should simply depict the task at hand, whether that be a start date, end date, start time, or similar task-specific designation.

Give your agent this brain