Skip to content
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

Jump to bottom

Add experimental ResponsiveBlockControl component #16790

Merged
merged 43 commits into from
Nov 1, 2019
Merged

Add experimental ResponsiveBlockControl component #16790

merged 43 commits into from
Nov 1, 2019

Commits on Oct 30, 2019

  1. Basic component skeleton

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    23807cf View commit details
    Browse the repository at this point in the history

  2. Adds component demo to Group Block

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    95bfae8 View commit details
    Browse the repository at this point in the history

  3. Make toggle control label dynamic and translatable

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    dd64a53 View commit details
    Browse the repository at this point in the history

  4. Adds styles

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    8116762 View commit details
    Browse the repository at this point in the history

  5. Automatically render responsive controls based on default control 

    Continue to allow full customisation of the responsive controls, but by default render the responsive fields using the same markup as the default control. This avoids duplication when consuming the component.
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    4ca0fc5 View commit details
    Browse the repository at this point in the history

  6. Wrap each field group in a fieldset element

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    fe7c77d View commit details
    Browse the repository at this point in the history

  7. Invert toggle and language to be on by default. 

    Addresses points raised in #16790
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    e051305 View commit details
    Browse the repository at this point in the history

  8. Adds initial tests

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    9c6e8b2 View commit details
    Browse the repository at this point in the history

  9. Update tests to resemble how a user interacts with Component

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    f2d1bfc View commit details
    Browse the repository at this point in the history

  10. Add toggle state test

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    aa1ec5f View commit details
    Browse the repository at this point in the history

  11. Update to switch toggle to preceed controls 

    Addresses concern raised in #16790
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    eb5e9ba View commit details
    Browse the repository at this point in the history

  12. Update individual control labels to fully describe control for a11y 

    Address concerns raised in #16790
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    bec9001 View commit details
    Browse the repository at this point in the history

  13. Fixes form ui to improve alignment 

    Addresses #16790 (comment)
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    1907640 View commit details
    Browse the repository at this point in the history

  14. Improves i18n of generated control label 

    Addresses #16790 (comment).

Note that aria-describedby is the correct type of aria role for this use case https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    17eec18 View commit details
    Browse the repository at this point in the history

  15. Improve a11y by leaving DOM intact between state changes.

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    c9c5e08 View commit details
    Browse the repository at this point in the history

  16. Adds aria description to toggle control for improved a11y context

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    eb9c5f3 View commit details
    Browse the repository at this point in the history

  17. Update tests

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    238d541 View commit details
    Browse the repository at this point in the history

  18. Update toggle of responsive controls internal to the component

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    1af87b9 View commit details
    Browse the repository at this point in the history

  19. Adds test for responsiveControlsActive setting prop

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    51b43a6 View commit details
    Browse the repository at this point in the history

  20. Add tests to cover custom labels and custom device sets

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    20a95b4 View commit details
    Browse the repository at this point in the history

  21. Fix to only build default repsonsive controls when necessary

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    a64c2cd View commit details
    Browse the repository at this point in the history

  22. Adds tests to cover rendering of custom responsive controls

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    9926612 View commit details
    Browse the repository at this point in the history

  23. Update to make label component part of component’s internal API 

    Addresses #16790 (comment).

Also updates tests.
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    d210cfe View commit details
    Browse the repository at this point in the history

  24. Adds callback prop to fire when responsive mode state changes 

    Addresses https://github.com/jorgefilipecosta
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    b81e605 View commit details
    Browse the repository at this point in the history

  25. Update to utilise withInstanceId HOC 

    Addresses #16790 (comment)
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    8605087 View commit details
    Browse the repository at this point in the history

  26. Removes unused export 

    This component is now provided by internal API and doesn’t need exposing.

Addresses #16790 (comment)
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    3ac118d View commit details
    Browse the repository at this point in the history

  27. Mark as “experimental” 

    Addresses #16790 (comment)
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    045dd49 View commit details
    Browse the repository at this point in the history

  28. Remove non exposed component API doc

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    b5bfc06 View commit details
    Browse the repository at this point in the history

  29. Extracts label to be a dedicated component

    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    5c9841c View commit details
    Browse the repository at this point in the history

  30. Updates to completely switch out DOM when responsive mode is toggled 

    Please see #16790 (comment)
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    b2bea8c View commit details
    Browse the repository at this point in the history

  31. Update to useCallback to avoid expensive DOM re-renders 

    Addresses #16790 (comment)

See also #16791 (comment)
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    827bb82 View commit details
    Browse the repository at this point in the history

  32. Updates i18n to provide better descriptions for translators 

    Addresses #16790 (comment)
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    059b5a5 View commit details
    Browse the repository at this point in the history

  33. Updates devices list to contain unique non-translatable slug 

    This addresses concern that we need to be able to identify a “size” by a value that does not change due to translations.

See #16790 (comment)
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    ce3be6f View commit details
    Browse the repository at this point in the history

  34. Ensure renderDefault controls render prop has access to device details 

    Addresses #16790 (comment)
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    195aef5 View commit details
    Browse the repository at this point in the history

  35. Begin documentation 

    Incomplete.
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    e821dc9 View commit details
    Browse the repository at this point in the history

  36. Rename “legend” prop to “title” 

    This prop was named based on implementation details. Switching out for more agnostic term.
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    863783c View commit details
    Browse the repository at this point in the history

  37. Fix incorrect usage of _x and replace with translator comments 

    Addresses #16790 (comment)

Noting that this type of comment seems to be undocumented in Gutenberg…
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    8ebbd2c View commit details
    Browse the repository at this point in the history

  38. Update internal nomenclature from “device” to “viewport” 

    This is a small terminology change which could have a big change on the way developers think about repsonsive settings. We shouldn’t be thinking about “devices” but rather “viewports” / screen sizes. We can still present to the user as “devices” but the developer should not be tying layout changes to specific devices (or conceptual groups of devices - eg: “Mobile”).
    @getdave
    getdave committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    64e719f View commit details
    Browse the repository at this point in the history

Commits on Nov 1, 2019

  1. Refactor to make component fully controlled 

    Addresses #16790 (comment) by making the state of the responsive mode controlled by the consuming component. This completes the process of making the component fully controlled.
    @getdave
    getdave committed Nov 1, 2019
    Configuration menu
    Copy the full SHA
    e6aad72 View commit details
    Browse the repository at this point in the history

  2. Adds custom hook useResponsiveBlockControl 

    Attempt to relieve some of the overhead associated with having ResponsiveBlockControl be a fully controlled component. By consuming this hook, a developer can wire up a default handler for toggling responsive mode without having to worry about creating their own useState-based hooks.
    @getdave
    getdave committed Nov 1, 2019
    Configuration menu
    Copy the full SHA
    48529f7 View commit details
    Browse the repository at this point in the history

  3. Revert "Adds custom hook useResponsiveBlockControl" 

    This reverts commit 48529f7.
    @getdave
    getdave committed Nov 1, 2019
    Configuration menu
    Copy the full SHA
    d72e6af View commit details
    Browse the repository at this point in the history

  4. Remove testing implementation in Group Block

    @getdave
    getdave committed Nov 1, 2019
    Configuration menu
    Copy the full SHA
    a46f406 View commit details
    Browse the repository at this point in the history

  5. Docs update

    @getdave
    getdave committed Nov 1, 2019
    Configuration menu
    Copy the full SHA
    15da1b3 View commit details
    Browse the repository at this point in the history