Skip to content

Use internal context system to apply toolbar variant to toolbar dropdowns #51154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ciampo merged 19 commits into from
Jun 8, 2023
Merged

Use internal context system to apply toolbar variant to toolbar dropdowns #51154

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
a11b1ce
DropdownMenu: read variant from context
ciampo May 31, 2023
2e4d820
Toolbar: do not set `variant` prop on popover (rely on context system…
ciampo May 31, 2023
e66a239
Use named export for better storybook doc generation
ciampo May 31, 2023
ea25c42
Provide context value in more toolbar components
ciampo Jun 1, 2023
69576a0
Hook Dropdown into context system, update DropdownMenu and CircularOp…
ciampo Jun 1, 2023
46d70de
Remove toolbar variant popover prop where the context system can be u…
ciampo Jun 1, 2023
fa9892c
Add comment where the context system currently doesn't work
ciampo Jun 1, 2023
1937f31
Use placement prop instead of legacy "position" prop
ciampo Jun 1, 2023
a1b00c7
Add some temporary TODO comments
ciampo Jun 1, 2023
1cecd36
Set toolbar variant for Dropdown in the context system
ciampo Jun 1, 2023
b40411e
Remove explicit variant prop from block alignment matrix control
ciampo Jun 1, 2023
adcd28c
Toolbar: Only set context in the top-level component
ciampo Jun 6, 2023
d3b23ce
Remove `toolbar` variant from instances using `Dropdown`
ciampo Jun 6, 2023
1863132
Simplify Dropdown implementation
ciampo Jun 6, 2023
599f846
Tidy up types
ciampo Jun 6, 2023
40adcd6
Remove toolbar variant storybook example for Popover
ciampo Jun 6, 2023
9ca6589
CHANGELOG
ciampo Jun 6, 2023
59d21e0
Complete renaming internal type
ciampo Jun 6, 2023
af98989
Remove duplicate hardcoded classnames(already added by context connexct)
ciampo Jun 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Provide context value in more toolbar components
  • Loading branch information
@ciampo
ciampo committed Jun 7, 2023
commit ea25c4257bd93b6834e521014af0262f82fbf2a2
5 changes: 5 additions & 0 deletions packages/components/src/toolbar/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export const CONTEXT_SYSTEM_VALUE = {
DropdownMenu: {
variant: 'toolbar',
},
};
52 changes: 29 additions & 23 deletions packages/components/src/toolbar/toolbar-group/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@ import { useContext } from '@wordpress/element';
/**
* Internal dependencies
*/
import { ContextSystemProvider } from '../../ui/context';
import ToolbarButton from '../toolbar-button';
import ToolbarGroupContainer from './toolbar-group-container';
import ToolbarGroupCollapsed from './toolbar-group-collapsed';
import ToolbarContext from '../toolbar-context';
import { CONTEXT_SYSTEM_VALUE } from '../constants';

/**
* Renders a collapsible group of controls
Expand Down Expand Up @@ -81,33 +83,37 @@ function ToolbarGroup( {

if ( isCollapsed ) {
return (
<ToolbarGroupCollapsed
label={ title }
controls={ controlSets }
className={ finalClassName }
children={ children }
{ ...props }
/>
<ContextSystemProvider value={ CONTEXT_SYSTEM_VALUE }>
<ToolbarGroupCollapsed
label={ title }
controls={ controlSets }
className={ finalClassName }
children={ children }
{ ...props }
/>
</ContextSystemProvider>
);
}

return (
<ToolbarGroupContainer className={ finalClassName } { ...props }>
{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>
controlSet.map( ( control, indexOfControl ) => (
<ToolbarButton
key={ [ indexOfSet, indexOfControl ].join() }
containerClassName={
indexOfSet > 0 && indexOfControl === 0
? 'has-left-divider'
: null
}
{ ...control }
/>
) )
) }
{ children }
</ToolbarGroupContainer>
<ContextSystemProvider value={ CONTEXT_SYSTEM_VALUE }>
<ToolbarGroupContainer className={ finalClassName } { ...props }>
{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>
controlSet.map( ( control, indexOfControl ) => (
<ToolbarButton
key={ [ indexOfSet, indexOfControl ].join() }
containerClassName={
indexOfSet > 0 && indexOfControl === 0
? 'has-left-divider'
: null
}
{ ...control }
/>
) )
) }
{ children }
</ToolbarGroupContainer>
</ContextSystemProvider>
);
}

Expand Down
18 changes: 11 additions & 7 deletions packages/components/src/toolbar/toolbar-item/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ import warning from '@wordpress/warning';
/**
* Internal dependencies
*/
import { ContextSystemProvider } from '../../ui/context';
import ToolbarContext from '../toolbar-context';
import { CONTEXT_SYSTEM_VALUE } from '../constants';

function ToolbarItem(
{
Expand Down Expand Up @@ -46,13 +48,15 @@ function ToolbarItem(
}

return (
<BaseToolbarItem
{ ...accessibleToolbarState }
{ ...allProps }
as={ Component }
>
{ children }
</BaseToolbarItem>
<ContextSystemProvider value={ CONTEXT_SYSTEM_VALUE }>
<BaseToolbarItem
{ ...accessibleToolbarState }
{ ...allProps }
as={ Component }
>
{ children }
</BaseToolbarItem>
</ContextSystemProvider>
);
}

Expand Down
9 changes: 1 addition & 8 deletions packages/components/src/toolbar/toolbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,7 @@ import {
WordPressComponentProps,
ContextSystemProvider,
} from '../../ui/context';

// TODO: swap the legacy `DropdownMenu` with the new version of the component
// once it's stable
const CONTEXT_SYSTEM_VALUE = {
DropdownMenu: {
variant: 'toolbar',
},
};
import { CONTEXT_SYSTEM_VALUE } from '../constants';

function UnforwardedToolbar(
{
Expand Down