[Menu] Flexify menu items #1136

llorca · 2017-05-23T18:34:53Z

Fixes #984

Changes proposed in this pull request:

Use flex for menu items for better truncation.

Should menu items truncate or wrap by default?

Screenshots

Menu items no longer truncate by default:

Menu items with buttons still work but no longer truncate:

For perfectly truncated one-liner menu items, a new class is now required for the menu item text itself (span.pt-menu-item-text):

blueprint-bot · 2017-05-23T18:41:54Z

Update Classes.ts and usage

Preview: documentation | table
Coverage: core | datetime

giladgray

definitely going to need to add some docs about this... the MenuItem API is unchanged as it automatically wraps text in this element, but we should note the HTML change somewhere

giladgray · 2017-05-23T19:04:04Z

packages/core/src/components/menu/menuItem.tsx

-                {labelElement}
-                {this.props.text}
+                <span className={Classes.MENU_ITEM_TEXT}>{this.props.text}</span>
+                {label != null && <span className={Classes.MENU_ITEM_LABEL}>{label}</span>}


in this codebase, we prefer to use ternary condition ? <el /> : undefined instead of boolean coercion.

giladgray · 2017-05-23T19:05:11Z

NOTE: this PR targets the feature/2.0 branch to allow for breaking changes.

blueprint-bot · 2017-05-23T19:14:17Z

Proper ternary

Preview: documentation | table
Coverage: core | datetime

…vigator (#1146)

* Don't show regions that aren't in the table * Add more tests, name variables * Fix indent * Update indentation

* Don't close popover if only the time changed * Add unit tests * Fix logic that's causing broken test * Oops, delete .only * Write a failing test for an edge-case * Fix the failing test * Clarify the boolean logic * Change !== to !=

* move empty content check from Tooltip to Popover * remove now unused things * add empty content option to Popover example

…#1102)

- Put dialog example first (_finally_...) - Document the default behavior correctly (`inline={false}` by default)

…place (#1154) * Clean up navbar styles, rename pages * Add sidebar to hold toggles eventually * Add toggle for ghost cells * Add toggle for 'Show focus cell', with slight refactors * Enable context menu * Enable full-table selection * Enable multiple selections * Enable row and column selection * Enable row and column resizing * Enable row and column reordering * Show column menus * Enable column name editing * Show inline, better styles * Change row and column counts * Make sidebar scrollable * Show row and column headers loading * Show row headers * Enable most features by default * Increase default row count * Show cells loading * Enable cell selection * Enable cell editing * Enable zebra striping * Custom regions * Better styles * Focus style control * Sync focus style on componentDidMount too

- Upgrade to Chai 4.0 to get includeDeepMembers assertion - Remove tests that were mostly tautological and relied on old lenient APIs

…component (#1140) * Write AbstractHeader and AbstractHeaderCell * Refactor RowHeader to extend from AbstractHeader * Move IColumnHeaderRenderer into columnHeader.tsx * Extend IHeaderProps in ColumnHeader * Refactor ColumnHeader to extend from AbstractHeader * Refactor {Row,Column}HeaderCell to extend from AbstractHeaderCell * Fix lint * Respond to self-CR feedback * Various cleanups - Reorder protected methods alphabetically - Delete unneeded onResizeGuide from IColumnHeaderProps - Rename handleDoubleClick to handleResizeHandleDoubleClick * Write abstractHeader2.tsx using composition this time * Use AbstractHeader2 in ColumnHeader2 and RowHeader2 * Make AbstractHeaderCell a component, not a superclass * Delete old inheritance-approach files * Fix file path references * Fix bug: pass classname to AbstractHeaderCell * Rename *2.tsx to *.tsx * Respond to self CR * Respond to Adi CR feedback * Rename to Header and HeaderCell * Spread props * Spread props in header cell components * Oops, add 'from'

* Rename perf.html, make it the home page for the table preview * Change page titles * Fix lint

…false (#1171) * Have focused cell follow selection if allowMultipleSelection=false * Add test * Fix broken test

* Move focus cell to (0,0) on FULL_TABLE selection * Add test

* Row => Rows * Fix name renderFocuStyleSelectMenu => renderFocusStyleSelectMenu * Fix console errors * Reorder stuff in the sidebar * Rename multi-selection option * Respond to Gilad CR feedback

Add support for a portal classname from the react context

* initial TagInput implementation * docs + polish * tests! sufficient coverage 👍 * move code to subdirectory, use "fake" names * add Tag active prop and .pt-active style support * left/right arrows to navigate through tags list and remove _any_ (not just last) * fix lint * refactor keyboard logic and introduce NONE constant * set explicit width to break long words * notes, remove commented code * 🌳 remove logs * rename dir to tag-input * add docs about keyboard interactions

…1239) * Have EditableCell fully control value in child EditableText * Respond to CR feedback * Add test

cmslewis · 2017-06-19T17:15:50Z

@llorca what's the story on this PR?

llorca · 2017-06-19T17:46:19Z

@cmslewis I suspect it hasn't been looked at because it's not a priority. It's ready to go though, there's one question I want feedback on (see description) and I still need full review over code/docs/approach.

* Add cell-content menu, refactor * Change cell content based on selection * Add option for long text * Delete 'Fill with random text' option * Use Utils.times instead of for loop * CR feedback * Respond to CR feedback * More CR feedback * Add basic truncation * Add default value for zebra striping to fix warning * Add select menu for truncated popover mode * Move to switch statement * Fix lint * Clearer [title] tooltip message * Show disabled child elements in sidebar, use Classes everywhere

* Add Utils.some * [Temporary] Change feature flags in Table example * Add new classes for reorder handle * Add ignoredSelector prop to DragSelectable * Add preliminary styles for reorder handle * Add reorder handle to column interaction bar * Ignore reorder handle selector * Reorder handle works * Renable drag-reordering on rows * Delete commented code * Show column grab cursor only over reorder handle * Move selection only if it existed before reorder * Don't disable drage selection for column headers * Different handle colors on :hover and :active * Delete console.logs * Select clicked handle's column if not selected * Reenable old reordering interaction if useInteractionBar={false} * Delete reorderHandle.tsx, put Orientation back in resizeHandle.tsx * Code cleanups * Rename to isEntireCellTargetReorderable * Delete orientation.ts * Have Header apply the TABLE_HEADER_REORDERABLE class * Reply to CR feedback * Fix tests * Write new tests, fix bug * Add deprecation warning to HeaderCell#isReorderable * Fix lint * Fix deprecation version * Fix deprecation message

`<thead>` can only have `<tr>` elements as children: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead

* Rename existing store * Add new store for dense grid * Column reordering works * Move column-reorder handling into store * Row reordering works * Fix bug with row-count changing, clean up code * Fix row and column counts * Delete commented code * Fix column-count updating * Have column names reorder along with column content * Fix editing of column names * Fix description for setOrderedColumnKeys * Fix row insertion

* passes all Tag props to its onRemove handler * PR feedback, renamed argument for clarity * Fixes lint

* Adds focus cell tab and enter microinteraction behavior * Comments, refactor common code * Add tests

* Add Utils.some * [Temporary] Change feature flags in Table example * Add new classes for reorder handle * Add ignoredSelector prop to DragSelectable * Add preliminary styles for reorder handle * Add reorder handle to column interaction bar * Ignore reorder handle selector * Reorder handle works * Renable drag-reordering on rows * Delete commented code * Show column grab cursor only over reorder handle * Move selection only if it existed before reorder * Don't disable drage selection for column headers * Different handle colors on :hover and :active * Delete console.logs * Select clicked handle's column if not selected * Reenable old reordering interaction if useInteractionBar={false} * Delete reorderHandle.tsx, put Orientation back in resizeHandle.tsx * Code cleanups * Rename to isEntireCellTargetReorderable * Delete orientation.ts * Have Header apply the TABLE_HEADER_REORDERABLE class * Reply to CR feedback * Fix tests * Write new tests, fix bug * Add deprecation warning to HeaderCell#isReorderable * Fix lint * Fix deprecation version * Fix deprecation message * Add reorderable example to site-docs

* Prepare Release 1.21.0 * [Table] Add docs about reorderable content (#1271) * Add Utils.some * [Temporary] Change feature flags in Table example * Add new classes for reorder handle * Add ignoredSelector prop to DragSelectable * Add preliminary styles for reorder handle * Add reorder handle to column interaction bar * Ignore reorder handle selector * Reorder handle works * Renable drag-reordering on rows * Delete commented code * Show column grab cursor only over reorder handle * Move selection only if it existed before reorder * Don't disable drage selection for column headers * Different handle colors on :hover and :active * Delete console.logs * Select clicked handle's column if not selected * Reenable old reordering interaction if useInteractionBar={false} * Delete reorderHandle.tsx, put Orientation back in resizeHandle.tsx * Code cleanups * Rename to isEntireCellTargetReorderable * Delete orientation.ts * Have Header apply the TABLE_HEADER_REORDERABLE class * Reply to CR feedback * Fix tests * Write new tests, fix bug * Add deprecation warning to HeaderCell#isReorderable * Fix lint * Fix deprecation version * Fix deprecation message * Add reorderable example to site-docs

* Add failing test * Use basic for loop to fix text * Change describe.only => describe

* Add and wire up the onVisibleCellsChange prop * Add tests * Invoke callback when grid changes also * Fix lint, tests * Expose rowIndices and columnIndices instead of four params * Add logger switch to table example * Fix lint * Fix lint again * Response to CR feedback

cmslewis · 2017-06-27T18:18:38Z

@llorca the optimal approach to me is to widen the menu to fit each item on one line provided there's enough horizontal space. But for a simple default, I'd prefer to see the full list item with line wrapping.

cmslewis

Approving the code changes, but looks like we should still add documentation about the change before merging.

llorca · 2017-06-27T21:35:18Z

Docs added ✅

blueprint-bot · 2017-06-27T21:41:22Z

Add docs about new `pt-menu-item-text` class

Preview: documentation | table
Coverage: core | datetime

llorca · 2017-06-27T21:49:54Z

Messed up branching -- gonna open a new PR. Sorry!

Flexify menu items

48d6eaa

llorca requested a review from giladgray May 23, 2017 18:34

Update Classes.ts and usage

4eac68d

llorca requested a review from adidahiya May 23, 2017 18:36

giladgray suggested changes May 23, 2017

View reviewed changes

giladgray added the Type: breaking change label May 23, 2017

Antoine Llorca and others added 2 commits May 23, 2017 12:07

Proper ternary

ba16fd0

replaced and added new icons (#1135)

e560a3c

llorca requested a review from giladgray May 23, 2017 19:16

lucasray and others added 18 commits May 23, 2017 16:43

fixes confusing typo in DateInput deprecation notice (#1139)

5a1dd3e

Declare Table children as union type for TS 2.3 support (#1144)

b00b1d2

Fix lint error on master (#1145)

9411a29

Set autoComplete='off' on NumericInput, DateInput, DateRangeInput, Na…

f47cb37

…vigator (#1146)

[Table] Don't show regions that aren't in the table (#1122)

10b1f58

* Don't show regions that aren't in the table * Add more tests, name variables * Fix indent * Update indentation

disable empty Popover (#1149)

69a05ef

* move empty content check from Tooltip to Popover * remove now unused things * add empty content option to Popover example

move icons font before keyword in $pt-font-family (#1150)

a399f51

[Table] Use width of popover dots when calculating whether to show it (…

a6765f4

…#1102)

Fixup dialog component docs (#1152)

3a3debd

- Put dialog example first (_finally_...) - Document the default behavior correctly (`inline={false}` by default)

Prepare Release v1.18.0 (#1151)

bf9560f

Expose click event in Tabs2 onChange handler (#1157)

d0c6972

- Upgrade to Chai 4.0 to get includeDeepMembers assertion - Remove tests that were mostly tautological and relied on old lenient APIs

[Table] Make Table playground the default home page (#1164)

0d0c87c

* Rename perf.html, make it the home page for the table preview * Change page titles * Fix lint

[Table] Have focused cell follow selection if allowMultipleSelection=…

afe2f62

…false (#1171) * Have focused cell follow selection if allowMultipleSelection=false * Add test * Fix broken test

[Table] Move focus cell to (0,0) on FULL_TABLE selection (#1172)

2fe81ad

* Move focus cell to (0,0) on FULL_TABLE selection * Add test

[Table] Fix typos, console errors, etc. (#1160)

d8e38c7

* Row => Rows * Fix name renderFocuStyleSelectMenu => renderFocusStyleSelectMenu * Fix console errors * Reorder stuff in the sidebar * Rename multi-selection option * Respond to Gilad CR feedback

jrafidi and others added 6 commits June 16, 2017 11:13

Portal context class (#1244)

6a94537

Add support for a portal classname from the react context

Change context property name (#1245)

0f685e7

Move new Portal error message to errors.ts (#1247)

3fcb252

Update names in icons.json (#1248)

49b91ac

[Table] Have EditableCell fully control value in child EditableText (#…

ab63974

…1239) * Have EditableCell fully control value in child EditableText * Respond to CR feedback * Add test

cmslewis and others added 10 commits June 20, 2017 15:19

Do not propagate event if correctly handling empty list (#1256)

aa6e690

Fix example pt-table documentation (#1265)

a40cc3d

`<thead>` can only have `<tr>` elements as children: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead

[Core] Adds additional arg to Tag onRemove handler (#1267)

4de5af0

* passes all Tag props to its onRemove handler * PR feedback, renamed argument for clarity * Fixes lint

[Table] Adds focus cell tab and enter microinteraction behavior (#1251)

c59c83e

* Adds focus cell tab and enter microinteraction behavior * Comments, refactor common code * Add tests

Use safeInvoke for Tag#onRemove (#1269)

c4b0584

llorca mentioned this pull request Jun 26, 2017

[Labs] New MultiSelect component #1275

Merged

2 tasks

cmslewis added 2 commits June 27, 2017 10:52

[Table] Improve Utils.times(...) to work with huge numbers (#1282)

030b654

* Add failing test * Use basic for loop to fix text * Change describe.only => describe

cmslewis approved these changes Jun 27, 2017

View reviewed changes

Antoine Llorca added 2 commits June 27, 2017 11:46

Merge remote-tracking branch 'origin/master' into al/menu-flex2

88ded0c

Add docs about new pt-menu-item-text class

49cbcb9

llorca closed this Jun 27, 2017

llorca deleted the al/menu-flex2 branch June 27, 2017 21:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Menu] Flexify menu items #1136

[Menu] Flexify menu items #1136

Uh oh!

llorca commented May 23, 2017 •

edited

Loading

Uh oh!

blueprint-bot commented May 23, 2017

Uh oh!

giladgray left a comment

Uh oh!

giladgray May 23, 2017

Uh oh!

giladgray commented May 23, 2017

Uh oh!

blueprint-bot commented May 23, 2017

Uh oh!

cmslewis commented Jun 19, 2017

Uh oh!

llorca commented Jun 19, 2017

Uh oh!

cmslewis commented Jun 27, 2017

Uh oh!

cmslewis left a comment

Uh oh!

llorca commented Jun 27, 2017

Uh oh!

blueprint-bot commented Jun 27, 2017

Uh oh!

llorca commented Jun 27, 2017

Uh oh!

Uh oh!

[Menu] Flexify menu items #1136

[Menu] Flexify menu items #1136

Uh oh!

Conversation

llorca commented May 23, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Fixes #984

Changes proposed in this pull request:

Screenshots

Uh oh!

blueprint-bot commented May 23, 2017

Update Classes.ts and usage

Uh oh!

giladgray left a comment

Choose a reason for hiding this comment

Uh oh!

giladgray May 23, 2017

Choose a reason for hiding this comment

Uh oh!

giladgray commented May 23, 2017

Uh oh!

blueprint-bot commented May 23, 2017

Proper ternary

Uh oh!

cmslewis commented Jun 19, 2017

Uh oh!

llorca commented Jun 19, 2017

Uh oh!

cmslewis commented Jun 27, 2017

Uh oh!

cmslewis left a comment

Choose a reason for hiding this comment

Uh oh!

llorca commented Jun 27, 2017

Uh oh!

blueprint-bot commented Jun 27, 2017

Add docs about new `pt-menu-item-text` class

Uh oh!

llorca commented Jun 27, 2017

Uh oh!

Uh oh!

llorca commented May 23, 2017 •

edited

Loading