flex button #2078

giladgray · 2018-02-03T02:36:07Z

Changes proposed in this pull request:

pt-button-base() is inline flex row
⚠️ Button renders text and children inside .pt-fill container
- vertical buttons automatically align left and push rightIcon to right side!
- loading easily hides this container without needing to wrap children!
Button now supports multiple lines of text, but will only wrap if forced to by layout constraints (like max-width)
add alignText prop to Button and ButtonGroup (and examples)

Reviewers should focus on:

new align prop: play with it in both ButtonGroup JS examples

to streamline testing of states

- vertical buttons automatically align left and push rightIcon to right side! - loading easily hides this container without needing to wrap children!

blueprint-bot · 2018-02-03T02:39:11Z

fix row margin when large, right icon spacing in CSS API

Preview: documentation | landing | table

llorca · 2018-02-03T03:36:06Z

packages/core/src/components/button/abstractButton.tsx

+     * to the appropriate side. `icon` and `rightIcon` will be pushed to either side.
+     * @default "center"
+     */
+    align?: "left" | "center" | "right";


😍 😍 😍

this conflicts somewhat with the NavbarGroup align prop -- here, you are referring to the alignment of content while for NavbarGroup (as well as most design tools), align refers to the component's alignment in its container. I suggest renaming this to textAlignment or alignText

mmm yes good catch @adidahiya! i'll go with alignText

llorca · 2018-02-03T03:36:49Z

packages/core/src/components/button/buttonGroup.tsx

                [Classes.LARGE]: large,
+                [Classes.MINIMAL]: minimal,


would prefer not to add tangential new props in this PR.
i plan to add modifier props across the board after 2.0 (non-breaking)

llorca · 2018-02-03T03:37:26Z

packages/docs-app/src/examples/core-examples/buttonGroupExample.tsx

        fill: false,
+        iconOnly: false,
        large: false,
        minimal: false,


small modifier in examples would be neat

ButtonGroup doesn't have a small prop.
let's wait on that, i want to add modifier props everywhere

llorca

🔥 🔥

spotted a couple of problems with buttons in input groups:

regular size has an icon size issue:

large size has both an icon size and height issue:

blueprint-bot · 2018-02-03T05:36:00Z

let flex figure out heights of numeric-input buttons 👌

Preview: documentation | landing | table

adidahiya · 2018-02-05T04:27:01Z

packages/core/src/components/button/abstractButton.tsx

+     * to the appropriate side. `icon` and `rightIcon` will be pushed to either side.
+     * @default "center"
+     */
+    align?: "left" | "center" | "right";


this conflicts somewhat with the NavbarGroup align prop -- here, you are referring to the alignment of content while for NavbarGroup (as well as most design tools), align refers to the component's alignment in its container. I suggest renaming this to textAlignment or alignText

adidahiya · 2018-02-05T04:34:11Z

otherwise lgtm

blueprint-bot · 2018-02-05T19:29:54Z

align => alignText, add more button classes

Preview: documentation | landing | table

…button

blueprint-bot · 2018-02-05T21:46:59Z

Merge branch 'develop' of github.com:palantir/blueprint into gg/flex-button

Preview: documentation | landing | table

Gilad Gray added 10 commits February 2, 2018 16:29

sweet pt-flex-container mixin

7f6fca4

break margin logic into default, last

71030fe

add "Icons only" switch to button and button group examples

06f3476

to streamline testing of states

pt-button-base() is inline flex row

5902e4b

remove button margins (applied by flex mixin now) and fix icon-only

666d664

Button renders text and children inside .pt-fill container

00291df

- vertical buttons automatically align left and push rightIcon to right side! - loading easily hides this container without needing to wrap children!

multiline and alignment support in styles

1067052

add align prop to Button and ButtonGroup

bd44590

add AlignmentSelect to ButtonGroup examples

788f97b

fix row margin when large, right icon spacing in CSS API

4e51013

giladgray requested review from llorca and adidahiya February 3, 2018 02:36

llorca reviewed Feb 3, 2018

View reviewed changes

llorca suggested changes Feb 3, 2018

View reviewed changes

giladgray added the Type: refactor label Feb 3, 2018

Gilad Gray added 3 commits February 2, 2018 21:29

fix buttons in input group

1ccd10f

control-group uses pt-flex-container (already used flex)

a4e4b67

let flex figure out heights of numeric-input buttons 👌

3e84b00

llorca approved these changes Feb 3, 2018

View reviewed changes

adidahiya suggested changes Feb 5, 2018

View reviewed changes

align => alignText, add more button classes

7d51281

giladgray force-pushed the gg/flex-button branch from ff00e9d to 7d51281 Compare February 5, 2018 19:25

adidahiya approved these changes Feb 5, 2018

View reviewed changes

Merge branch 'develop' of github.com:palantir/blueprint into gg/flex-…

6d47583

…button

giladgray changed the base branch from flex-containers to develop February 5, 2018 21:42

giladgray merged commit bbb3da4 into develop Feb 5, 2018

giladgray deleted the gg/flex-button branch February 5, 2018 21:48

llorca mentioned this pull request Feb 5, 2018

Refactor buttons, input groups and others into a 3-column flex layout #1425

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

flex button #2078

flex button #2078

giladgray commented Feb 3, 2018 •

edited

Loading

blueprint-bot commented Feb 3, 2018

llorca Feb 3, 2018

adidahiya Feb 5, 2018

giladgray Feb 5, 2018

llorca Feb 3, 2018

giladgray Feb 3, 2018

llorca Feb 3, 2018 •

edited

Loading

giladgray Feb 3, 2018

llorca left a comment •

edited by giladgray

Loading

blueprint-bot commented Feb 3, 2018

adidahiya Feb 5, 2018

adidahiya commented Feb 5, 2018

blueprint-bot commented Feb 5, 2018

blueprint-bot commented Feb 5, 2018

flex button #2078

flex button #2078

Conversation

giladgray commented Feb 3, 2018 • edited Loading

Changes proposed in this pull request:

Reviewers should focus on:

blueprint-bot commented Feb 3, 2018

fix row margin when large, right icon spacing in CSS API

llorca Feb 3, 2018

Choose a reason for hiding this comment

adidahiya Feb 5, 2018

Choose a reason for hiding this comment

giladgray Feb 5, 2018

Choose a reason for hiding this comment

llorca Feb 3, 2018

Choose a reason for hiding this comment

giladgray Feb 3, 2018

Choose a reason for hiding this comment

llorca Feb 3, 2018 • edited Loading

Choose a reason for hiding this comment

giladgray Feb 3, 2018

Choose a reason for hiding this comment

llorca left a comment • edited by giladgray Loading

Choose a reason for hiding this comment

blueprint-bot commented Feb 3, 2018

let flex figure out heights of numeric-input buttons 👌

adidahiya Feb 5, 2018

Choose a reason for hiding this comment

adidahiya commented Feb 5, 2018

blueprint-bot commented Feb 5, 2018

align => alignText, add more button classes

blueprint-bot commented Feb 5, 2018

Merge branch 'develop' of github.com:palantir/blueprint into gg/flex-button

giladgray commented Feb 3, 2018 •

edited

Loading

llorca Feb 3, 2018 •

edited

Loading

llorca left a comment •

edited by giladgray

Loading