Skip to content

Dimensions Panel: Add new ToolsPanel component and update spacing supports #32392

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
aaronrobertshaw merged 50 commits into from
Aug 10, 2021
Merged

Dimensions Panel: Add new ToolsPanel component and update spacing supports #32392

Changes from 1 commit
Commits
Show all changes
50 commits
Select commit Hold shift + click to select a range
795fe99
Add utils to spacing supports to check or reset values
aaronrobertshaw May 31, 2021
dfb1403
Draft block support panel
aaronrobertshaw May 31, 2021
0cb9f82
Update spacing hook to use new block support panel
aaronrobertshaw May 31, 2021
1b23fad
Update block support panel to handle false children
aaronrobertshaw Jun 1, 2021
2487805
Conditionally display spacing block support controls
aaronrobertshaw Jun 1, 2021
696070f
Draft README for BlockSupportPanel
aaronrobertshaw Jun 1, 2021
03c87c4
Make block supports panel handle filtered children
aaronrobertshaw Jun 1, 2021
5fa856f
Add initial tests for block supports panel
aaronrobertshaw Jun 1, 2021
7fb7e8a
Add story for block support panel
aaronrobertshaw Jun 1, 2021
62d7895
Rename spacing support to dimensions
aaronrobertshaw Jun 2, 2021
5f7b39f
Rename spacing support to dimensions in FSE
aaronrobertshaw Jun 2, 2021
db0c413
Update GlobalStyles dimensions panel
aaronrobertshaw Jun 2, 2021
dd015b0
Add means to handle default controls in block support panel
aaronrobertshaw Jun 4, 2021
659a79e
Change default controls display in block supports panel
aaronrobertshaw Jun 7, 2021
213d250
Make default controls still show after reset all
aaronrobertshaw Jun 7, 2021
a96dc35
Change back to default controls always displaying
aaronrobertshaw Jun 9, 2021
481ea39
Tweak panel to make it a little more generic
aaronrobertshaw Jun 23, 2021
0d75ba7
Simplify progressive disclosure panel state
aaronrobertshaw Jul 8, 2021
ffedb61
Add progressive disclosure panel item component
aaronrobertshaw Jul 8, 2021
ae4a3b2
Update dimensions global style sidebar panel
aaronrobertshaw Jul 8, 2021
e7a89ea
Update docs and comments after restructure
aaronrobertshaw Jul 12, 2021
07420bc
Update panel story with new item component
aaronrobertshaw Jul 12, 2021
9ec400f
Update tests to handle new panel item component
aaronrobertshaw Jul 12, 2021
a4d96b0
Clean new style objects after resetting spacing values
aaronrobertshaw Jul 21, 2021
17bd1b6
Disable default control menu items when they have no value
aaronrobertshaw Jul 22, 2021
4e33e6c
Add test for disabling default control menu items
aaronrobertshaw Jul 22, 2021
3609b5a
Add cleanEmptyObject to dimensions resetAll
aaronrobertshaw Jul 27, 2021
5746e25
Switch panel to grid layout for future multi-column layout
aaronrobertshaw Jul 27, 2021
c8d96ee
Tweak defaults for controls spacing in progressive disclosure panel
aaronrobertshaw Jul 28, 2021
7c22312
Fix Global Styles sidebar panel styling
aaronrobertshaw Jul 28, 2021
dbaa31c
Handle cases where panel item's inner element returns null
aaronrobertshaw Jul 29, 2021
8f196bc
Correct component name in readme
aaronrobertshaw Jul 30, 2021
76a2b8d
Update readme with experimental alert and improved prop format
aaronrobertshaw Jul 30, 2021
224c0ea
Fix menuItem child filtering using Children util.
aaronrobertshaw Jul 30, 2021
8343c9b
Accurately name the ProgressiveDisclosurePanelItem in tests
aaronrobertshaw Jul 30, 2021
6068bec
Initial pass at restructuring component
aaronrobertshaw Jul 30, 2021
48388f5
Rename title component and props to header
aaronrobertshaw Jul 30, 2021
92bcf52
Change progressive panel items to register themselves
aaronrobertshaw Aug 2, 2021
a624202
Change menu item selection state to enum
aaronrobertshaw Aug 2, 2021
eaad38e
Improve tests and rename to ToolsPanel
aaronrobertshaw Aug 3, 2021
8a7df11
Refactor panel context to be consistent with other components
aaronrobertshaw Aug 3, 2021
ccee3ac
Extract menu states to utils
aaronrobertshaw Aug 3, 2021
f2851b6
Fix caching of block attributes via callbacks stored in ToolsPanel state
aaronrobertshaw Aug 4, 2021
3d7e73c
Move execution of panel item callbacks into the item on menu toggle
aaronrobertshaw Aug 4, 2021
ed518fd
Convert to styled components and connect to context system
aaronrobertshaw Aug 5, 2021
f9411d1
Limit component.js files to presentation
aaronrobertshaw Aug 5, 2021
8218467
Switch approach back to being able to hide default controls
aaronrobertshaw Aug 6, 2021
70d7275
Tweak storybook entry for ToolsPanel
aaronrobertshaw Aug 6, 2021
d7bb353
Highlight experimental nature of component in story title
aaronrobertshaw Aug 10, 2021
c18dcda
Fix typo
aaronrobertshaw Aug 10, 2021
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
Handle cases where panel item's inner element returns null
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Jul 29, 2021
commit dbaa31c8fc583dcc77ac0da8a70d4a8cda2f8fec
2 changes: 1 addition & 1 deletion packages/components/src/progressive-disclosure-panel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const PanelContext = createContext( {} );

export const usePanelContext = () => useContext( PanelContext );

const isMenuItem = ( item ) => item.type === ProgressiveDisclosurePanelItem;
const isMenuItem = ( item ) => item?.type === ProgressiveDisclosurePanelItem;

const ProgressiveDisclosurePanel = ( props ) => {
Copy link
Member

@jorgefilipecosta jorgefilipecosta Jul 6, 2021

Choose a reason for hiding this comment

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

Following the case described in the testing instructions:
image
image

Padding can be toggle on and toggled off without anything visible besides the check appearing. I guess when padding has no value and given that it is a default clicking on padding should be disabled and the check should not appear.

Copy link
Contributor Author

@aaronrobertshaw aaronrobertshaw Jul 7, 2021

Choose a reason for hiding this comment

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

I agree with you that this is confusing. It was raised previously, and again when the behaviour was reverted to an earlier state when trying to nail down how the panel should behave.

I'd still like to see us come up with a better user experience here. An earlier suggestion was to disable a default control's menu item if it had been reset. It would be re-enabled once the default control's value was adjusted/set again. Another option could be to have multiple states for each menu item. Something like:

There would be three menu item states:

  1. No or hidden icon. Control is not shown and has no value.
  2. Eye or check icon. Control is shown but has no value.
  3. Check or reset/clear icon. Control is shown and has a value.

Open to suggestions.

@jasmussen Do you have any thoughts now some time has passed since we last looked at this?

Copy link
Contributor

@jasmussen jasmussen Jul 7, 2021

Choose a reason for hiding this comment

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

I still think we should look for the simplest possible solution for the first version of this and then get a better feel in practice for how much of a problem this is.

Could we just remove the padding control if it's empty and you uncheck it? De-select and reselect the block and it's back, still empty. That's sort of what the prototype does, even if it isn't explicitly explored.

Since I've sent you on so many wild chases on this one, I'd appreciate @mtias thoughts, as I know he worked on the initial prototype also.

Copy link
Contributor Author

@aaronrobertshaw aaronrobertshaw Jul 7, 2021

Choose a reason for hiding this comment

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

We did explore having default controls be removed when deselected. Essentially, they were only displayed by default on the initial selection or re-selection of the block. This made their behaviour more consistent with other controls and did simplify the code as well.

Whatever we decide here will be easy enough to work into the other updates and great suggestions Jorge has given.

const { children, className, label: menuLabel, resetAll, title } = props;
Expand Down