Skip to content

react-combobox: remove ComboButton component#23492

Merged
smhigley merged 2 commits intomicrosoft:masterfrom
smhigley:remove-combobutton
Jun 13, 2022
Merged

react-combobox: remove ComboButton component#23492
smhigley merged 2 commits intomicrosoft:masterfrom
smhigley:remove-combobutton

Conversation

@smhigley
Copy link
Copy Markdown
Contributor

In moving to a slots-based approach for Combobox/Dropdown, we talked about removing the ComboButton/ComboInput components in favor of directly putting the button/input and icon slots on the main Combobox/Dropdown components themselves. This has a few benefits:

  • We don't export components that cannot be used on their own
  • Slots in Combobox/Dropdown are low-level, and there are no nested slots
  • It simplifies the package a fair amount
  • Makes typings easier

You can see where this change fits into the full combo/dropdown update in this PR: #22906

@smhigley smhigley requested a review from a team as a code owner June 10, 2022 17:11
@github-actions github-actions bot added this to the June Project Cycle Q2 2022 milestone Jun 10, 2022
@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Jun 10, 2022

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-combobox
Combobox
61.494 kB
21.019 kB
60.74 kB
20.81 kB
-754 B
-209 B

🤖 This report was generated against 0d4794d3924d648c788993e087a48dd45fe10a1b

@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci bot commented Jun 10, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2aca10a:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@size-auditor
Copy link
Copy Markdown

size-auditor bot commented Jun 10, 2022

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 0d4794d3924d648c788993e087a48dd45fe10a1b (build)

const useStyles = makeStyles({
root: {},
root: {
...shorthands.border('1px', 'solid', 'transparent'),
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Should 1px be replaced with one of the strokeWidth* tokens?

Copy link
Copy Markdown
Contributor Author

@smhigley smhigley Jun 10, 2022

Choose a reason for hiding this comment

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

probably :D. Do you mind if I make a separate PR for the style changes? This one makes it look like that's a change, but it's just a copy/paste of the ComboButton styles

*/
const useStyles = makeStyles({
root: {},
root: {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The root slot is a div which has a default display value of block but all our input controls have a default display value of inline (or inline-block, inline-flex, etc).

Should this slot have display: inline-block set to make it consistent with other input controls?

@smhigley smhigley merged commit b6c902b into microsoft:master Jun 13, 2022
@@ -203,14 +211,14 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLBu
onTriggerBlur?.(event);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

These should be also renamed, right? (I mean onTriggerBlur, onTriggerClick and onTriggerKeyDown)

nit: but we can also do:

state.button.onBlur = useMergedEventCallbacks(
  state.button.onBlur,
  React.useCallback((event: React.FocusEvent<HTMLButtonElement>) => {
    if (!ignoreTriggerBlur.current) {
      setOpen(event, false);
    }
    ignoreTriggerBlur.current = false;
  }, [])
);

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.

6 participants