Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DatePicker] Fix multimonth layout in Firefox #3330

Merged
merged 3 commits into from Sep 28, 2020
Merged

[DatePicker] Fix multimonth layout in Firefox #3330

merged 3 commits into from Sep 28, 2020

Conversation

dfmcphee
Copy link
Contributor

WHY are these changes introduced?

Fixes #3325 and unblocks https://github.com/Shopify/web/pull/32054

Screen Shot 2020-09-27 at 3 33 05 PM

WHAT is this pull request doing?

It adds a wrapping div around each month table so that the flex layout gets correctly calculated before showing the popover.

This is what it looks like now:

Screen Shot 2020-09-28 at 10 29 51 AM

Screen Shot 2020-09-28 at 10 29 41 AM

How to 馃帺

馃枼 Local development instructions
馃棐 General tophatting guidelines
馃搫 Changelog guidelines

Copy-paste this code in playground/Playground.tsx: 
import React, {useState, useCallback} from 'react';

import {Page, Button, Popover, DatePicker, Select, Stack} from '../src';
import {CalendarMinor} from '@shopify/polaris-icons';

export function Playground() {
  const [popoverActive, setPopoverActive] = useState(true);

  const togglePopoverActive = useCallback(
    () => setPopoverActive((popoverActive) => !popoverActive),
    [],
  );

  const activator = (
    <Button icon={CalendarMinor} onClick={togglePopoverActive} disclosure>
      Today
    </Button>
  );

  const [{month, year}, setDate] = useState({month: 1, year: 2018});
  const [selectedDates, setSelectedDates] = useState({
    start: new Date('Wed Feb 07 2018 00:00:00 GMT-0500 (EST)'),
    end: new Date('Mon Mar 12 2018 00:00:00 GMT-0500 (EST)'),
  });

  const handleMonthChange = useCallback(
    (month, year) => setDate({month, year}),
    [],
  );

  return (
    <Page title="Playground">
      <Popover
        active={popoverActive}
        activator={activator}
        onClose={togglePopoverActive}
        fluidContent
      >
        <Popover.Pane fixed>
          <Popover.Section>
            <Stack vertical>
              <Select label="Date range" />
              <DatePicker
                month={month}
                year={year}
                onChange={setSelectedDates}
                onMonthChange={handleMonthChange}
                selected={selectedDates}
                multiMonth
                allowRange
              />
            </Stack>
          </Popover.Section>
        </Popover.Pane>
      </Popover>
    </Page>
  );
}

馃帺 checklist

  • Tested on mobile
  • Tested on multiple browsers
  • Tested for accessibility
  • Updated the component's README.md with documentation changes
  • Tophatted documentation changes in the style guide
  • For visual design changes, pinged one of @鈥奌YPD, @鈥妋irualves, @鈥妔arahill, or @鈥妑y5n to update the Polaris UI kit

@github-actions
Copy link
Contributor

github-actions bot commented Sep 28, 2020 •
edited

馃煛 This pull request modifies 4 files and might impact 6 other files. This is an average splash zone for a change, remember to tophat areas that could be affected.

Details:
All files potentially affected (total: 6)
馃搫 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

馃帹 src/components/DatePicker/DatePicker.scss (total: 6)

Files potentially affected (total: 6)

馃З src/components/DatePicker/DatePicker.tsx (total: 5)

Files potentially affected (total: 5)

馃З src/components/DatePicker/components/Month/Month.tsx (total: 6)

Files potentially affected (total: 6)

kyledurand
kyledurand approved these changes Sep 28, 2020
View reviewed changes
Copy link
Contributor

@kyledurand kyledurand left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me 馃憤

@alex-page alex-page mentioned this pull request Sep 28, 2020
Closed
6 tasks
@dfmcphee dfmcphee merged commit 2e7aba2 into master Sep 28, 2020
@dfmcphee dfmcphee deleted the datepicker-layout-fix branch September 28, 2020 17:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kyledurand kyledurand kyledurand approved these changes

@alex-page alex-page alex-page approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

DatePicker layout broken in certain situations
3 participants
@dfmcphee @kyledurand @alex-page