Sandstone QuickGuidePanels doesn't work properly

[javadsalman]

Sand Stone Widghet Error

• [ ] Rendering issue
• [ ] Crash/Exception
• [ ] Console error or warning

Description

The example code snipped of QuickGuidePanels which provided in sandstone samples doesn't work and render and cause to error on terminal

Environment

"@enact/core": "^4.7.8", "@enact/i18n": "^4.7.8", "@enact/sandstone": "^2.7.12", "@enact/spotlight": "^4.7.8", "@enact/ui": "^4.7.8", "@enact/webos": "^4.7.8",

Reproduction Code

import css from './Home.module.less'
import React from 'react'
import QuickGuidePanels from '@enact/sandstone/QuickGuidePanels/QuickGuidePanels';
import Slottable from '@enact/ui/Slottable';

export default function Home(props) {
    return (
        <div className={css.Home}>
            <QuickGuidePanels
                current={0}
                nextButtonVisibility="auto"
                onBack={function noRefCheck(){}}
                onChange={function noRefCheck(){}}
                onClose={function noRefCheck(){}}
                onNextClick={function noRefCheck(){}}
                onPrevClick={function noRefCheck(){}}
                prevButtonVisibility="auto"
                total={0}
                >
                <Slottable>
                    This is Panel 0
                </Slottable>
                <Slottable>
                    <div
                    style={{
                        backgroundColor: 'grey',
                        height: '100%',
                        width: '100%'
                    }}
                    >
                    This is Panel 1
                    </div>
                </Slottable>
                <Slottable aria-label="aria test">
                    This is Panel 2
                </Slottable>
            </QuickGuidePanels>
        </div>
    )
}

Console Error

index.js:1 
 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    at HOC
    at WizardPanelsProvider (http://localhost:8080/main.js:17828:27)
    at I18nContextDecorator (http://localhost:8080/main.js:4471:58)
    at SpotlightContainerDecorator (http://localhost:8080/main.js:22041:35)
    at SpotlightContainerDecoratorAdapter (http://localhost:8080/main.js:22117:7)
    at _class (http://localhost:8080/main.js:28394:7)
    at _class (http://localhost:8080/main.js:28837:7)
    at QuickGuidePanels
    at div
    at Home
    at RenderedRoute (http://localhost:8080/main.js:106594:5)
    at RenderErrorBoundary (http://localhost:8080/main.js:106541:5)
    at DataRoutes (http://localhost:8080/main.js:105163:5)
    at Router (http://localhost:8080/main.js:107218:15)
    at RouterProvider (http://localhost:8080/main.js:104950:5)
    at div
    at div
    at div
    at Layout (http://localhost:8080/main.js:45483:3)
    at div
    at App (http://localhost:8080/main.js:45373:67)
    at div
    at FloatingLayerDecorator (http://localhost:8080/main.js:29788:27)
    at _class (http://localhost:8080/main.js:43673:7)
    at I18nDecorator (http://localhost:8080/main.js:14835:7)
    at I18nDecorator (http://localhost:8080/main.js:4361:24)
    at _class (http://localhost:8080/main.js:22527:7)
    at Skinnable (http://localhost:8080/main.js:36792:26)
    at _class (http://localhost:8080/main.js:14550:7)
    at Decorator (http://localhost:8080/main.js:15337:7)

[juwonjeong]

Hello, Thank you for you question. To use QuickGuidePanels, QuickGuidePanels have to use QuickGuidePanels.Panel for each panel view. So, in your code snippet, please use <QuickGuidePanels.Panel> instead of Slottable

import QuickGuidePanels from '@enact/sandstone/QuickGuidePanels';

export default function Home(props) {
    return (
        <div className={css.Home}>
            <QuickGuidePanels
                current={0}
                nextButtonVisibility="auto"
                onBack={function noRefCheck(){}}
                onChange={function noRefCheck(){}}
                onClose={function noRefCheck(){}}
                onNextClick={function noRefCheck(){}}
                onPrevClick={function noRefCheck(){}}
                prevButtonVisibility="auto"
                total={0}
                >
                <QuickGuidePanels.Panel>
                    This is Panel 0
                </QuickGuidePanels.Panel>
            </QuickGuidePanels>
        </div>
    )
}

[javadsalman]

Hello, Thank you for you question. To use QuickGuidePanels, QuickGuidePanels have to use QuickGuidePanels.Panel for each panel view. So, in your code snippet, please use <QuickGuidePanels.Panel> instead of Slottable

import QuickGuidePanels from '@enact/sandstone/QuickGuidePanels';

export default function Home(props) {
    return (
        <div className={css.Home}>
            <QuickGuidePanels
                current={0}
                nextButtonVisibility="auto"
                onBack={function noRefCheck(){}}
                onChange={function noRefCheck(){}}
                onClose={function noRefCheck(){}}
                onNextClick={function noRefCheck(){}}
                onPrevClick={function noRefCheck(){}}
                prevButtonVisibility="auto"
                total={0}
                >
                <QuickGuidePanels.Panel>
                    This is Panel 0
                </QuickGuidePanels.Panel>
            </QuickGuidePanels>
        </div>
    )
}

Thanks for your response. It worked as you said. But it must fixed on documentation to avoid misleading other developers: https://enactjs.com/sampler/sandstone/?path=/docs/sandstone-quickguidepanels--quick-guide-panels

[seunghoh]

@javadsalman Thank you so much for your report. We will modify the sampler doc code. I will close this issue as resolved.