Skip to content

Add missing item type #4273

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

Open
wants to merge 16 commits into
base: latest
Choose a base branch
from
Open

Add missing item type #4273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
f1eabf4
Add missing item type
TatuLund Apr 28, 2025
b8cae14
Update menu-bar-basic.tsx
TatuLund Apr 28, 2025
1f80b88
Update menu-bar-icons.tsx
TatuLund Apr 28, 2025
74353af
Update menu-bar-overflow.tsx
TatuLund Apr 28, 2025
2ec9970
Update menu-bar-right-aligned.tsx
TatuLund Apr 28, 2025
e1e820f
Update menu-bar-tooltip.tsx
TatuLund Apr 28, 2025
a1afed8
Update menu-bar-open-on-hover.tsx
TatuLund Apr 28, 2025
c8fd585
Update menu-bar-internationalization.tsx
TatuLund Apr 28, 2025
21fb2ee
Update menu-bar-icon-only.tsx
TatuLund Apr 28, 2025
a230d80
Update menu-bar-drop-down.tsx
TatuLund Apr 28, 2025
465f936
Update menu-bar-dividers.tsx
TatuLund Apr 28, 2025
d465a39
Update menu-bar-disabled.tsx
TatuLund Apr 28, 2025
4631df2
Update menu-bar-custom-styling.tsx
TatuLund Apr 28, 2025
31f237f
Update menu-bar-combo-buttons.tsx
TatuLund Apr 28, 2025
3a53e2e
Update menu-bar-checkable.tsx
TatuLund Apr 28, 2025
98d6152
Merge branch 'latest' into menu-bar-item-type
manolo Apr 28, 2025
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
2 changes: 1 addition & 1 deletion frontend/demo/component/menubar/react/menu-bar-basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ function Example() {
// tag::snippet[]
const selectedItem = useSignal<MenuBarItem | undefined>(undefined);

const items = [
const items: Array<MenuBarItem> = [
{ text: 'View' },
{ text: 'Edit' },
{
Expand Down
3 changes: 2 additions & 1 deletion frontend/demo/component/menubar/react/menu-bar-checkable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,15 @@ import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-lin
import { useSignal } from '@vaadin/hilla-react-signals';
import {
MenuBar,
type MenuBarItem,
type MenuBarItemSelectedEvent,
type SubMenuItem,
} from '@vaadin/react-components/MenuBar.js';

function Example() {
useSignals(); // hidden-source-line
// tag::snippet[]
const items = useSignal([
const items = useSignal<Array<MenuBarItem>>([
{
text: 'Options',
children: [{ text: 'Save automatically', checked: true }, { text: 'Notify watchers' }],
Expand Down
4 changes: 2 additions & 2 deletions frontend/demo/component/menubar/react/menu-bar-combo-buttons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { Icon } from '@vaadin/react-components/Icon.js';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';

function Example() {
// tag::snippet[]
const items = [
const items: Array<MenuBarItem> = [
{ text: 'Save' },
{
component: <Icon icon="vaadin:chevron-down" aria-label="Other save options" />,
Expand Down
4 changes: 2 additions & 2 deletions frontend/demo/component/menubar/react/menu-bar-custom-styling.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';

function Example() {
// tag::snippet[]
const items = [
const items: Array<MenuBarItem> = [
{ text: 'View', className: 'bg-primary text-primary-contrast' },
{ text: 'Edit' },
{
Expand Down
4 changes: 2 additions & 2 deletions frontend/demo/component/menubar/react/menu-bar-disabled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';

function Example() {
// tag::snippet[]
const items = [
const items: Array<MenuBarItem> = [
{ text: 'View' },
{ text: 'Edit', disabled: true },
{
Expand Down
4 changes: 2 additions & 2 deletions frontend/demo/component/menubar/react/menu-bar-dividers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';

function Example() {
// tag::snippet[]
const items = [
const items: Array<MenuBarItem> = [
{
text: 'Share',
children: [
Expand Down
4 changes: 2 additions & 2 deletions frontend/demo/component/menubar/react/menu-bar-drop-down-indicators.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';

function Example() {
const items = [
const items : Array<MenuBarItem> = [
{ text: 'View' },
{ text: 'Edit' },
{
Expand Down
4 changes: 2 additions & 2 deletions frontend/demo/component/menubar/react/menu-bar-drop-down.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';

function Example() {
// tag::snippet[]
const items = [
const items: Array<MenuBarItem> = [
{
text: 'John Smith',
children: [
Expand Down
4 changes: 2 additions & 2 deletions frontend/demo/component/menubar/react/menu-bar-icon-only.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { Icon } from '@vaadin/react-components/Icon.js';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';

function createItem(iconName: string, ariaLabel: string) {
return <Icon icon={`vaadin:${iconName}`} aria-label={ariaLabel} />;
}

function Example() {
// tag::snippet[]
const items = [
const items: Array<MenuBarItem> = [
{ component: createItem('eye', 'View') },
{ component: createItem('pencil', 'Edit') },
{
Expand Down
4 changes: 2 additions & 2 deletions frontend/demo/component/menubar/react/menu-bar-icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { Icon } from '@vaadin/react-components/Icon.js';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';

function createItem(iconName: string, text: string, isChild = false) {
const iconStyle: React.CSSProperties = {
Expand All @@ -26,7 +26,7 @@ function createItem(iconName: string, text: string, isChild = false) {

function Example() {
// tag::snippet[]
const items = [
const items: Array<MenuBarItem> = [
{
component: createItem('share', 'Share'),
children: [
Expand Down
4 changes: 2 additions & 2 deletions frontend/demo/component/menubar/react/menu-bar-internationalization.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MenuBar, type MenuBarI18n } from '@vaadin/react-components/MenuBar.js';
import { MenuBar, type MenuBarI18n, MenuBarItem } from '@vaadin/react-components/MenuBar.js';

function Example() {
const items = [
const items: Array<MenuBarItem> = [
{ text: 'View' },
{ text: 'Edit' },
{
Expand Down
4 changes: 2 additions & 2 deletions frontend/demo/component/menubar/react/menu-bar-open-on-hover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';

function Example() {
// tag::snippet[]
const items = [
const items: Array<MenuBarItem> = [
{ text: 'View' },
{ text: 'Edit' },
{
Expand Down
4 changes: 2 additions & 2 deletions frontend/demo/component/menubar/react/menu-bar-overflow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';
import { SplitLayout } from '@vaadin/react-components/SplitLayout.js';

function Example() {
// tag::snippet[]
const items = [
const items: Array<MenuBarItem> = [
{ text: 'View' },
{ text: 'Edit' },
{
Expand Down
4 changes: 2 additions & 2 deletions frontend/demo/component/menubar/react/menu-bar-right-aligned.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';

function Example() {
const items = [
const items: Array<MenuBarItem> = [
{ text: 'View' },
{ text: 'Edit' },
{
Expand Down
4 changes: 2 additions & 2 deletions frontend/demo/component/menubar/react/menu-bar-tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import '@vaadin/icons';
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
import React from 'react';
import { Icon } from '@vaadin/react-components/Icon.js';
import { MenuBar } from '@vaadin/react-components/MenuBar.js';
import { MenuBar, MenuBarItem } from '@vaadin/react-components/MenuBar.js';
import { Tooltip } from '@vaadin/react-components/Tooltip.js';

function createItem(iconName: string) {
Expand All @@ -11,7 +11,7 @@ function createItem(iconName: string) {

function Example() {
// tag::snippet[]
const items = [
const items: Array<MenuBarItem> = [
{ component: createItem('eye'), tooltip: 'View' },
{ component: createItem('pencil'), tooltip: 'Edit' },
{ component: createItem('folder'), tooltip: 'Move' },
Expand Down