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.

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

Already on GitHub? Sign in to your account

[FormLayout] min-width added to Item only when in Group. #650

Merged
merged 1 commit into from
Nov 21, 2018

Conversation

dleroux
Copy link
Contributor

@dleroux dleroux commented Nov 20, 2018

WHY are these changes introduced?

Resolves https://github.com/Shopify/web/issues/4902

There's a min-width set on FormLayout Items t

hat is used for wrapping of items when inside a group. In the side column however that min-width is too wide.

WHAT is this pull request doing?

Adding the min-width to items when in groups only.

Before After
Content from cell 1 Content from cell 2
formgroupmaxwidth-b4 formgroupmaxwidth
screen shot 2018-11-20 at 10 12 07 am screen shot 2018-11-20 at 9 46 00 am

How to 🎩

  1. Below is the Polaris-React Playground
  2. yarn build-consumer web to 🎩 in web
Copy-paste this code in playground/Playground.tsx:
import * as React from 'react';
import {Page, FormLayout, TextField} from '@shopify/polaris';

interface State {}

export default class Playground extends React.Component<never, State> {
  render() {
    return (
      <Page title="Playground">
        <FormLayout>
          <FormLayout.Group>
            <TextField label="Length" onChange={() => {}} />
            <TextField label="Width" onChange={() => {}} />
            <TextField label="Height" onChange={() => {}} />
            <TextField label="Unit" onChange={() => {}} />
          </FormLayout.Group>
          <FormLayout.Group condensed>
            <TextField label="Length" onChange={() => {}} />
            <TextField label="Width" onChange={() => {}} />
            <TextField label="Height" onChange={() => {}} />
            <TextField label="Unit" onChange={() => {}} />
          </FormLayout.Group>
        </FormLayout>
      </Page>
    );
  }
}

🎩 checklist

@BPScott BPScott temporarily deployed to polaris-react-pr-650 November 20, 2018 15:22 Inactive
@@ -29,6 +24,14 @@ $item-min-size: rem(220px);
flex: 1 1 $item-min-size;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Opted to keep the flex-basis as part of the Item to minimize the change.

@dleroux dleroux changed the title [WIP] [FormLayout] moving min-width added to Item only when in Group. [WIP] [FormLayout] min-width added to Item only when in Group. Nov 20, 2018
@dleroux dleroux force-pushed the max-width-form-group branch from c5edd61 to 8b15012 Compare November 20, 2018 15:29
@BPScott BPScott temporarily deployed to polaris-react-pr-650 November 20, 2018 15:29 Inactive
@dleroux dleroux force-pushed the max-width-form-group branch from 8b15012 to 1579b00 Compare November 20, 2018 15:30
@dleroux dleroux changed the title [WIP] [FormLayout] min-width added to Item only when in Group. [FormLayout] min-width added to Item only when in Group. Nov 20, 2018
Copy link
Member

@AndrewMusgrave AndrewMusgrave left a comment

Choose a reason for hiding this comment

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

🎩

}

.condensed & {
flex-basis: (0.5 * $item-min-size);
Copy link
Member

Choose a reason for hiding this comment

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

Why .5? Should we save this to a variable?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was like this so I opted not to touch it. It's only used once so I don't see an issue with it. Do you?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think this is fine as is. I think this pretty clearly communicates that it is half the item min size.

Copy link
Contributor

@danrosenthal danrosenthal Nov 21, 2018

Choose a reason for hiding this comment

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

We do the same thing with * -1 to make a number negative. We don't add variables for that

@dleroux dleroux merged commit b0d2eb7 into master Nov 21, 2018
@danrosenthal danrosenthal temporarily deployed to production December 4, 2018 19:16 Inactive
@kaelig kaelig deleted the max-width-form-group branch December 10, 2018 23:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants