Buttons 8: Connect frontend with view button classes

[distantnative]

Description

• Merge Buttons 1: basic Panel\Ui component classes #6539
• Merge Buttons 2: k-view-button component #6540
• Merge Buttons 3: Panel area buttons extension #6541
• Merge Buttons 4: View button PHP classes #6542
• Merge Buttons 5: Use k-view-button for view buttons #6543
• Merge Buttons 7: Backend classes for core view buttons #6545

Summary of changes

• Connect new backend classes with frontend
• Integrate in Panel\Model classes
• Exclude area buttons configs from code coverage

Changelog

Features

• Define custom view buttons in your blueprints or config
• Custom Panel are buttons extension

Docs

As with the previous PR, view buttons can be defined by names in a model blueprint or for all views in the config.

Define custom button in config

However, one can now even define whole buttons by setting an array instead of a name string. The array consist of a component key (optional, if omitted k-view-button will be used) and a props array.

Via config:

'panel' => [
	'viewButtons' => [
		'site' => [
			'preview',
			'a' => [
				'props' => [
					'icon'   => 'heart',
					'text'   => 'Kosmos',
					'theme'  => 'purple-icon',
					'target' => '_blank',
					'link'   => 'https://getkirby.com'
				]
			],
			'b-dropdown' => [
				'props' => [
					'icon'     => 'info',
					'text'     => 'Info',
					'dropdown' => 'my/dropdown/route'
				]
			],
			'c-component' => [
				'component' => 'my-custom-component',
				'props' => [
					'foo' => 'bar'
				]
			]
		]
	]
]

Shorthand for only props

If you don't pass a component-props definition, you can also just pass the props on their own, being then applied to k-view-button:

'panel' => [
	'viewButtons' => [
		'site' => [
			'a' => [
				'icon'   => 'heart',
				'text'   => 'Kosmos',
				'theme'  => 'purple-icon',
				'target' => '_blank',
				'link'   => 'https://getkirby.com'
			]
		]
	]
]

Define custom button in a blueprint

This also works in blueprints:

buttons:
  - preview
  - settings
  foo:
      text: Foo

Reusable buttons: Panel area buttons extension

If you do not want to define just one button via the config, but reuse it (or even ship it as part of your plugin), you have to add them to the Panel area extension:

Kirby::plugin('custom/buttons', [
	'areas' => [
		'todos' => function () {
			return [
				'buttons' => [
					'todos.add' => function () {
						return [
							'props' => [
								'icon'   => 'add',
								'dialog' => 'todos/create'
							]
						];
					}
				]
			];
		}
	]
]);

You have the same options for your return value: full component-props array or just props on top-level. In addition, you can also return directly a Kirby\Panel\Ui\Button\ViewButton object.

See Kirby\Panel\Ui\Button\ViewButton properties for available props options (also for array notation).

Ready?

• In-code documentation (wherever needed)
• Unit tests for fixed bug/feature
• Tests and CI checks all pass

For review team

• Add lab and/or sandbox examples (wherever helpful)
  • View button via config.php sandbox#8
• Add changes & docs to release notes draft in Notion

[distantnative]

The missing code coverage is about the existing view config. I would suggest to ignore it here and rather tackle refactoring and testing the views separately.

[bastianallgeier]

I love how the different pieces are coming together. This is really pushing us in a great new direction with backend and frontend integrations.