feature(contextSelector): add context selector component #1288

christiemolloy · 2019-01-23T16:55:35Z

close #133

patternfly-build · 2019-01-23T16:58:34Z

Deploy preview for pf-next ready!

Built with commit fc90d48

https://deploy-preview-1288--pf-next.netlify.com

srambach · 2019-01-23T18:33:03Z

Two things on a quick initial look -

The clear X is scrunched up to the edge; is this correct behavior?
Looks like the search button is missing (white on white) in dark mode.

christiemolloy · 2019-01-23T18:36:38Z

@srambach thanks! Those issues relate to the input group component that I used. I can create an issue to fix those.

srambach · 2019-01-23T18:42:49Z

src/patternfly/components/ContextSelector/context-selector-menu-menu.hbs

@@ -0,0 +1,7 @@
+<ul class="pf-c-context-selector__menu-menu{{#if context-selector-menu-menu--modifier}} {{context-selector-menu-menu--modifier}}{{/if}}"


Instead of pf-c-context-selector__menu-menu, could it be called pf-c-context-selector__menu-list to be a little less like Little Caesar's Pizza Pizza? 🤣

mcarrano · 2019-01-23T19:42:26Z

When I open this in Firefox, the input group is overlapping its container.

Interestingly, in Chrome the spacing I see is different from @srambach and actually looks OK.

mcoker · 2019-01-23T19:54:34Z

src/patternfly/components/ContextSelector/context-selector.scss

+  align-items: center;
+  justify-content: space-between;
+  min-width: var(--pf-c-context-selector__toggle--MinWidth);
+  min-width: 100%;


why are there 2 min-widths?

no idea, keeping the second one

mcoker · 2019-01-23T19:55:07Z

src/patternfly/components/ContextSelector/context-selector.scss

+    margin-left: var(--pf-c-context-selector__toggle-icon--MarginLeft);
+  }
+
+  .pf-c-context-selector__toggle-text {


if you put a ton of text in here, it just makes the button wider and doesn't truncate.

awesome added a max-width

mcoker · 2019-01-23T19:58:03Z

src/patternfly/components/ContextSelector/examples/context-selector-example.hbs

@@ -0,0 +1,145 @@
+{{#> context-selector id="context-selector-collapsed-example" context-selector--label-text="My Project"}}


I don't think the label text and toggle text should match... I'm not sure how to handle this though. The label might read something like "Selected project"?

going to go with that

mcoker · 2019-01-23T19:59:19Z

src/patternfly/components/ContextSelector/docs/code.md

+| `.pf-c-context-selector__menu-input` | `<div>` | Initiates a container for the input group. |
+| `.pf-c-context-selector__menu-menu` | `<ul>` | Initiaties an unordered list of menu items that sits under the input container. |
+| `.pf-c-context-selector__menu-menu-item` | `<li>` | Initiaties a menu item. |
+| `.pf-m-expanded.` | `.pf-c-context-selector` | Modifies for the expanded state. |


christiemolloy · 2019-01-24T22:21:47Z

@mcoker made updates here, I can't seem to fix the issue that @mcarrano bought up about the input-group overflowing only in firefox :(

mcoker · 2019-01-25T16:32:34Z

src/patternfly/components/ContextSelector/context-selector.scss

+  --pf-c-context-selector__toggle--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
+  --pf-c-context-selector__toggle--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-context-selector__toggle--MinWidth: var(--pf-global--target-size--MinWidth);


doesn't look like this is used

mcoker

🥳

matthewcarleton · 2019-01-25T17:48:12Z

src/patternfly/components/ContextSelector/context-selector.scss

+  --pf-c-context-selector__menu-list-item--disabled--Color: var(--pf-global--Color--dark-200);
+  --pf-c-context-selector__menu-list-item--disabled--BackgroundColor: transparent;
+
+


can you add @extend %pf-t-light; and remove the transparent backgrounds on lines 12 and 61. This will fix the theme issue.

…-next into iss133

patternfly-build · 2019-01-25T19:04:32Z

🎉 This PR is included in version 1.0.161 🎉

The release is available on:

Your semantic-release bot 📦🚀

christiemolloy added 3 commits January 22, 2019 16:41

feature(contextSelector): add context selector component

f3c42ca

updates as at 22 jan

f2c766c

updates

bd2bbe6

christiemolloy requested review from matthewcarleton and mcoker January 23, 2019 16:56

christiemolloy requested a review from mcarrano January 23, 2019 17:24

srambach reviewed Jan 23, 2019

View reviewed changes

mcoker reviewed Jan 23, 2019

View reviewed changes

updates based on review

f7776a1

min-width:0; to input-group text/textarea so it will shrink

d79752a

mcoker reviewed Jan 25, 2019

View reviewed changes

christiemolloy and others added 8 commits January 25, 2019 11:38

update

e9f1c24

feature(contextSelector): add context selector component

9f5b755

updates as at 22 jan

e38cf21

updates

aeda84a

updates based on review

a1d7884

min-width:0; to input-group text/textarea so it will shrink

fe1e1bc

update

48cbff9

update a11y threshold

d6e3e6f

mcoker force-pushed the iss133 branch from 53860d9 to d6e3e6f Compare January 25, 2019 16:44

mcoker approved these changes Jan 25, 2019

View reviewed changes

matthewcarleton reviewed Jan 25, 2019

View reviewed changes

christiemolloy added 3 commits January 25, 2019 13:04

Merge branch 'iss133' of https://github.com/christiemolloy/patternfly…

fbf8308

…-next into iss133

matts review

6f2deef

fix mc

fc90d48

matthewcarleton merged commit 7183a80 into patternfly:master Jan 25, 2019

mcoker mentioned this pull request Jan 30, 2019

Add Context Selector component patternfly/patternfly-react#1293

Closed

		@@ -0,0 +1,7 @@
		<ul class="pf-c-context-selector__menu-menu{{#if context-selector-menu-menu--modifier}} {{context-selector-menu-menu--modifier}}{{/if}}"

		@@ -0,0 +1,145 @@
		{{#> context-selector id="context-selector-collapsed-example" context-selector--label-text="My Project"}}

	\| `.pf-m-expanded.` \| `.pf-c-context-selector` \| Modifies for the expanded state. \|
	\| `.pf-m-expanded` \| `.pf-c-context-selector` \| Modifies for the expanded state. \|

		--pf-c-context-selector__menu-list-item--disabled--Color: var(--pf-global--Color--dark-200);
		--pf-c-context-selector__menu-list-item--disabled--BackgroundColor: transparent;

feature(contextSelector): add context selector component #1288

feature(contextSelector): add context selector component #1288

Uh oh!

Conversation

christiemolloy commented Jan 23, 2019

Uh oh!

patternfly-build commented Jan 23, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

srambach commented Jan 23, 2019

Uh oh!

christiemolloy commented Jan 23, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mcarrano commented Jan 23, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

christiemolloy commented Jan 24, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

patternfly-build commented Jan 25, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

patternfly-build commented Jan 23, 2019 •

edited

Loading