feat(TearsheetShell): specify additional floating menu selectors #5092
Conversation
|
DCO Assistant Lite bot All contributors have signed the DCO. |
✅ Deploy Preview for carbon-for-ibm-products ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
I have read the DCO document and I hereby sign the DCO. |
|
@liunate Code looks fine to me. But could you please add a storybook for this to demonstrate the feature? |
…ecify-floating-menus-selectors
liunate
requested review from
elycheea and
IgnacioBecerra
and removed request for
a team
| {`${beenOpen ? 'Reopen' : 'Open'} the ${context.component.displayName}`} | ||
| </Button> |
There was a problem hiding this comment.
I think these part could be rewritten in tidier way like this.
There was a problem hiding this comment.
context.component.componentName is no longer valid, so I replaced it to show the correct component name. In this case here, the TearsheetShell
| ); | ||
| } | ||
|
|
||
| export const FocusOnFloatingMenu = ({ open: _open, ...args }, context) => { |
There was a problem hiding this comment.
Here is the recording showcasing the new property in action.
allow-floating-story.mov
There was a problem hiding this comment.
It works fine in story docs as well
…ecify-floating-menus-selectors
|
Not sure why it failed at the |
|
Looks like something is timing out. I just triggered it to run again |
|
Hey @liunate, you just have one conflict to resolve in |
…ecify-floating-menus-selectors
| @@ -179,6 +181,75 @@ NoAttributesSet.args = { | |||
| }; | |||
|
|
|||
| export const ReturnFocusToOpenButton = ReturnFocusTemplate.bind({}); | |||
| NoAttributesSet.args = { | |||
| ReturnFocusToOpenButton.args = { | |||
There was a problem hiding this comment.
I think this story template specifying the .args was wrong, so I just updated this to ReturnFocusToOpenButton.
|
I just have this PR branch synced again with |
Contributes to #4985
Allow
<TearsheetShell>to focus on elements matching CSS selectors specifiedWhat did you change?
Pass thru and join
<TearsheetShell selectorsFloatingMenus>value to the underlying carbon<ComposedModal selectosFloatingMenus>How did you test and verify your work?
I add the
selectorsFloatingMenusproperty on the one of the story render property inTearsheet.stories.jsxsuch like:Without the
#helloManbeing specified, the opened tearshet does not allow focusing on the input. When the selector is specified, the input can be focused and type inside.