[FLUID-6613] Framework Design Challenge: Expand Button Which Expands Multiple Targets

May 23, 2025 by ADMIN 86 views

[FLUID-6613] Framework Design Challenge: Expand Button Which Expands Multiple Targets

Introduction

In the realm of web development, designing a user interface that is both intuitive and accessible is crucial. The "expand button" is a common UI element that allows users to toggle the visibility of multiple DOM elements. However, implementing this feature in a way that is integral to the design of the framework can be challenging. In this article, we will explore the current implementation of the expand button and discuss the design challenges associated with it.

Current Implementation

The current implementation of the expand button is provided in the following code snippet:

fluid.defaults("fluid.expandButton", {
    gradeNames: "fluid.button",
    // Supplied by integrators. An array of DOM element to expand or collapse.
    domElements: [],
    styles: {
        hiddenOnMobile: "fl-mapviz-hidden-on-mobile"
    },
    model: {
        // The initial state of all panels on the mobile view is collapsed.
        expanded: false
    },
    modelRelay: {
        toggleOnActivate: {
            source: "activate",
            target: "expanded",
            singleTransform: "fluid.transforms.toggle"
        },
        ariaExpanded: {
            source: "expanded",
            target: "dom.container.attrs.aria-expanded",
            func: x => !!x
        }
    },
    modelListeners: {
        expandContent: {
            path: "expanded",
            funcName: "fluid.expandButton.toggleClass",
            args: ["{that}.options.domElements", "{that}.options.styles.hiddenOnMobile", "{that}.model.expanded"]
        }
    }
});

This implementation uses a model relay rule to toggle the visibility of the DOM elements based on the state of the expand button. However, this implementation has a few issues:

The "target" of the model relay rule can only be a single path, which makes it difficult to implement the expand button functionality.
There is no facility in the "old framework" to operate machinery like expanders within the scope of such rules.
The modelRelay target is already a path expression, and there is no clear way to express the idea that an expression should be expanded in order to produce a set of paths.

Design Challenges

The current implementation of the expand button faces several design challenges:

Integral design: The expand button implementation is not integral to the design of the framework, which makes it difficult to maintain and extend.
Model relay rules: The model relay rules used in the implementation are not flexible enough to handle the expand button functionality.
Path expressions: The path expressions used in the implementation are not expressive enough to handle the expand button functionality.

Proposed Solution

To address the design challenges associated with the expand button implementation, we propose the following solution:

Dynamic component: We can use a dynamic component to implement the expand button functionality. The dynamic component can be sourced from the elements and can have a link path that is bound to the model of the expand button.
Recursive context expressions: We can use recursive context expressions to resolve the link path of the dynamic component. This will allow us to express the idea that an expression should be expanded in order to produce a set of paths.
Flavoured inputs: We can use flavoured inputs to provide a more expressive way of specifying the link path of the dynamic component.

Conclusion

In conclusion, the current implementation of the expand button faces several design challenges that make it difficult to maintain and extend. We propose a solution that uses a dynamic component, recursive context expressions, and flavoured inputs to address these challenges. This solution will provide a more integral and expressive way of implementing the expand button functionality.

Additional Context or Notes

Originally filed as FLUID-6613 by Antranig Basman on April 20, 2021.

References

Future Work

Implement the dynamic component: We need to implement the dynamic component that will be used to implement the expand button functionality.
Test the implementation: We need to test the implementation to ensure that it works correctly and meets the requirements.
Refine the design: We need to refine the design of the implementation to make it more integral and expressive.

Acknowledgments

We would like to acknowledge the contributions of Antranig Basman who originally filed the issue FLUID-6613.
[FLUID-6613] Framework Design Challenge: Expand Button Which Expands Multiple Targets - Q&A

Introduction

In our previous article, we discussed the design challenges associated with implementing an expand button that expands multiple targets. We proposed a solution that uses a dynamic component, recursive context expressions, and flavoured inputs to address these challenges. In this article, we will provide a Q&A section to address some of the common questions and concerns related to this issue.

Q&A

Q: What is the current implementation of the expand button?

A: The current implementation of the expand button is provided in the following code snippet:

fluid.defaults("fluid.expandButton", {
    gradeNames: "fluid.button",
    // Supplied by integrators. An array of DOM element to expand or collapse.
    domElements: [],
    styles: {
        hiddenOnMobile: "fl-mapviz-hidden-on-mobile"
    },
    model: {
        // The initial state of all panels on the mobile view is collapsed.
        expanded: false
    },
    modelRelay: {
        toggleOnActivate: {
            source: "activate",
            target: "expanded",
            singleTransform: "fluid.transforms.toggle"
        },
        ariaExpanded: {
            source: "expanded",
            target: "dom.container.attrs.aria-expanded",
            func: x => !!x
        }
    },
    modelListeners: {
        expandContent: {
            path: "expanded",
            funcName: "fluid.expandButton.toggleClass",
            args: ["{that}.options.domElements", "{that}.options.styles.hiddenOnMobile", "{that}.model.expanded"]
        }
    }
});

Q: What are the design challenges associated with the current implementation of the expand button?

A: The current implementation of the expand button faces several design challenges, including:

Integral design: The expand button implementation is not integral to the design of the framework, which makes it difficult to maintain and extend.
Model relay rules: The model relay rules used in the implementation are not flexible enough to handle the expand button functionality.
Path expressions: The path expressions used in the implementation are not expressive enough to handle the expand button functionality.

Q: What is the proposed solution to address the design challenges associated with the expand button implementation?

A: The proposed solution involves using a dynamic component, recursive context expressions, and flavoured inputs to implement the expand button functionality. This solution will provide a more integral and expressive way of implementing the expand button functionality.

Q: How will the dynamic component be implemented?

A: The dynamic component will be implemented using a recursive context expression that resolves the link path of the dynamic component. This will allow us to express the idea that an expression should be expanded in order to produce a set of paths.

Q: What are the benefits of using recursive context expressions and flavoured inputs?

A: Using recursive context expressions and flavoured inputs will provide a more expressive way of specifying the link path of the dynamic component. This will make it easier to implement the expand button functionality and will provide a more integral and expressive way of implementing the expand button functionality.

Q: What are the next steps in implementing the proposed solution?

A: The next steps in implementing the proposed solution involve implementing the dynamic component, testing the implementation, and refining the design of the implementation.

Conclusion

In conclusion, the current implementation of the expand button faces several design challenges that make it difficult to maintain and extend. We proposed a solution that uses a dynamic component, recursive context expressions, and flavoured inputs to address these challenges. This solution will provide a more integral and expressive way of implementing the expand button functionality.