--- name: FlexTab description: An advanced, flexible tabs/tab manager user_stories: - As a user I would like to see a list of tabs so I can toggle between content - As a user I would like the option to rename a tab - As a user I would like the option to re-order the tabs using drag/drop - As a user I would like the option to add new tabs to the list - As a user I would like the option to have a dropdown menu on my tabs so I can perform custom actions about that tab - As a user if I have more tabs than the container can fit, I would like my tabs to be a small carousel that I can use to toggle left/right to see hidden tabs - As a developer I would like to style my tabs - As a developer I would like to replace my tab containers screens: "" workflow: "" test_plan: [] components: - name: FlexTab type: Components description: An advanced, flexible tabs/tab manager behaviors: "" exists: "No" package: "No" schema: - name: name type: string description: The name of the tab list schema_type: prop - name: tabs type: "Array<{ id:string, name:string, caption:string, icon:string, isActive:string, customAction:() => void, style: React.CSSProperties() }>" description: The list of tabs to show schema_type: prop - name: enableTabDropdowns type: boolean description: Whether or not the tabs have a dropdown menu of actions schema_type: prop - name: enableContextMenu type: boolean description: Whether or not the user can trigger the tab action dropdown via right-click schema_type: prop - name: tabActions type: "Array<{ id:string, label:string, icon:string, onSelect: () => void }>" description: The list of actions that are avaiable for each tab to take (will show in the dropdown) schema_type: prop - name: canRename type: boolean description: Whether or not the tabs can be renamed schema_type: prop - name: canDrag type: boolean description: Whether or not the tabs can be dragged/re-ordered schema_type: prop - name: overflow type: enum(HIDDEN, CAROUSEL) description: The action to take when there are more tabs than the container permits schema_type: prop - name: canAdd type: boolean description: Whether or not an add button is showing that allows the creation of more tabs schema_type: prop - name: componentWrapper type: JSX.Element description: The component to use (instead of the default) to wrap each tab item schema_type: prop - name: style type: React.CSSProperties description: The style to apply to the tab container schema_type: prop - name: tabComponent type: JSX.Element description: The component to use (instead of the default) to replace each tab item schema_type: prop - name: vertical type: boolean description: Whether the tabs should appear vertically or not schema_type: prop - name: onTabSwitch() type: "() => void" description: Triggers when the tab is switched schema_type: prop - name: onTabRename() type: "() => void" description: Triggers when the tab is renamed schema_type: prop - name: onTabDelete() type: "() => void" description: Triggers when the tab is deleted schema_type: prop - name: onTabCreate() type: "() => void" description: Triggers when a tab is created schema_type: prop - name: switchTab() type: "() => void" description: Switches the tab from one to another schema_type: method tests: - it: Should render the component in the dom type: Integration - it: Should render a list of tabs in the dom that number the same as the number of tabs in the tabs array prop type: Integration - it: Should render each tab with a caption that matches the tab item associated with that tab in the tabs array prop type: Integration - it: Should render each tab with an icon (if one is present) that matches the tab item associated with that tab in the tabs array prop type: Integration - it: Should render the tab as "active" it the tab in the tabs array prop has the isActive property set to true type: Integration - it: Should render a dropdown of actions where the number of actions match the number of items in the tabActions prop type: Integration - it: Should render a dropdown of actions on each tab if the enableTabDropdowns prop is set to true type: Integration - it: Should render a dropdown of actions that are activated on right-click if the enableContextMenu prop is set to true type: Integration - it: Should not permit renaming if the canRename prop is false type: Integration - it: Should not permit re-ordering if the canDrag prop is false type: Integration - it: Should not permit adding new tabs if the canAdd prop is false type: Integration - it: Should render the tabs as a carousel when the number of tabs exceed the number that can fit on the screen type: Integration - it: Should render the tabs normally with the overflow tabs hidden if the overflow prop is set to HIDDEN type: Integration - it: Should render the component in the componentWrapper prop if one is provided type: Integration - it: Should render the component in the tabComponent prop if one is provided type: Integration - it: Should render the same number of tabComponent props as the amount of tabs in the tabs array prop type: Integration - it: Should render the tabs as vertical if the vertical prop is set to true type: Integration - it: (Events) Should trigger the onTabSwitch() event when the tab is switched type: Integration - it: (Events) Should trigger the onTabRename() event when the tab is renamed type: Integration - it: (Events) Should trigger the onTabDelete() event when the tab is deleted type: Integration - it: (Events) Should trigger the onTabCreate() event when a tab is created type: Integration - it: (Events) Should trigger the onSelect() action in the tab action prop if the tab dropdown action is selected type: Integration - it: (Methods) Should switch the tab from one to another type: Integration - it: (Hooks) Should trigger the onComponentRender("FlexTabs") plugin hook when the component is being rendered type: Integration - it: (Hooks) Should trigger the onListItems("TabList") when the tab list is being generated type: Integration - it: (Hooks) Should trigger the onListItems("TabActions") plugin hook when the tab actions are being generated type: Integration - it: (Hooks) Should trigger the onEventTrigger("TabSwitch") plugin hook when a tab is switched type: Integration - it: (Hooks) Should trigger the onEventTrigger("TabRename") plugin hook when a tab is renamed type: Integration - it: (Hooks) Should trigger the onEventTrigger("TabDelete") plugin hook when a tab is deleted type: Integration - it: (Hooks) Should trigger the onEventTrigger("TabCreate") plugin hook when a tab is created type: Integration database: [] api: []