Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-39478

Select box / Dropdown component

    XMLWordPrintable

Details

    • indian, arctic

    Description

      User Interactions

      • Clicking toggles the open/closed state of the menu
      • Menu sizes to reasonable default height, scroll to handle large numbers of items
      • Menu must position itself to bottom-left corner of dropdown when open
      • Support keyboard accessibility (space-bar to open; arrow up/down, page up/down, home/end keys to navigate through options, spacebar or enter to select, esc to dismiss, mousewheel)

      Developer Options

      • Supply array of items for display
      • Allow for a default selection
      • Customize display of items with any text desired
        • Stretch goal: allow for custom React component to be used
      • Handlers for onChange

      Attachments

        Activity

          Ascending order - Click to sort in descending order
          cliffmeyers Cliff Meyers created issue -
          cliffmeyers Cliff Meyers made changes -
          Field Original Value New Value
          Epic Link JENKINS-35741 [ 171657 ]
          cliffmeyers Cliff Meyers made changes -
          Description Ideally we should cover all the bases like Bootstrap has http://getbootstrap.com/css/#forms

          For example, components for:
          * Form component
          * Checkbox
          * Checkbox list
          * Radio list
          * Radio
          * Text input with label
          ** Small
          ** Medium
          ** Large
          * Text Area
          * Selects

          In Scope
          * Make components and styles for these
          * Disabled is 40% opacity for both control and label
          * Label always appears above text input           		Dropdown component
          - Clicking toggles the open/closed state of the menu
          - Menu must position itself to bottom-left corner of dropdown
          - Support keyboard accessibility (space-bar to open, arrow keys to navigate through options)
          cliffmeyers Cliff Meyers made changes -
          Labels blueocean-imported jdl jdl
          cliffmeyers Cliff Meyers made changes -
          Assignee Josh McDonald [ sophistifunk ] Cliff Meyers [ cliffmeyers ]
          cliffmeyers Cliff Meyers made changes -
          Description Dropdown component
          - Clicking toggles the open/closed state of the menu
          - Menu must position itself to bottom-left corner of dropdown
          - Support keyboard accessibility (space-bar to open, arrow keys to navigate through options)           		*User Interactions*
          - Clicking toggles the open/closed state of the menu
          - Menu sizes to reasonable default height, scroll to handle large numbers of items
          - Menu must position itself to bottom-left corner of dropdown when open
          - Support keyboard accessibility (space-bar to open, arrow keys to navigate through options)

          *Developer Options*
          * Supply array of items for display
          * Allow for a default selection
          * Customize display of items with any text desired
          ** Stretch goal: allow for custom React component to be used
          * Handlers for onChange
          cliffmeyers Cliff Meyers made changes -
          Sprint indian [ 126 ]
          cliffmeyers Cliff Meyers made changes -
          Status Open [ 1 ] In Progress [ 3 ]
          cliffmeyers Cliff Meyers made changes -
          Description *User Interactions*
          - Clicking toggles the open/closed state of the menu
          - Menu sizes to reasonable default height, scroll to handle large numbers of items
          - Menu must position itself to bottom-left corner of dropdown when open
          - Support keyboard accessibility (space-bar to open, arrow keys to navigate through options)

          *Developer Options*
          * Supply array of items for display
          * Allow for a default selection
          * Customize display of items with any text desired
          ** Stretch goal: allow for custom React component to be used
          * Handlers for onChange           		*User Interactions*
          - Clicking toggles the open/closed state of the menu
          - Menu sizes to reasonable default height, scroll to handle large numbers of items
          - Menu must position itself to bottom-left corner of dropdown when open
          - Support keyboard accessibility (space-bar to open, arrow keys to navigate through options, spacebar or enter to select)

          *Developer Options*
          * Supply array of items for display
          * Allow for a default selection
          * Customize display of items with any text desired
          ** Stretch goal: allow for custom React component to be used
          * Handlers for onChange
          cliffmeyers Cliff Meyers made changes -
          Description *User Interactions*
          - Clicking toggles the open/closed state of the menu
          - Menu sizes to reasonable default height, scroll to handle large numbers of items
          - Menu must position itself to bottom-left corner of dropdown when open
          - Support keyboard accessibility (space-bar to open, arrow keys to navigate through options, spacebar or enter to select)

          *Developer Options*
          * Supply array of items for display
          * Allow for a default selection
          * Customize display of items with any text desired
          ** Stretch goal: allow for custom React component to be used
          * Handlers for onChange           		*User Interactions*
          - Clicking toggles the open/closed state of the menu
          - Menu sizes to reasonable default height, scroll to handle large numbers of items
          - Menu must position itself to bottom-left corner of dropdown when open
          - Support keyboard accessibility (space-bar to open, up/down arrow keys to navigate through options, spacebar or enter to select)

          *Developer Options*
          * Supply array of items for display
          * Allow for a default selection
          * Customize display of items with any text desired
          ** Stretch goal: allow for custom React component to be used
          * Handlers for onChange
          cliffmeyers Cliff Meyers made changes -
          Description *User Interactions*
          - Clicking toggles the open/closed state of the menu
          - Menu sizes to reasonable default height, scroll to handle large numbers of items
          - Menu must position itself to bottom-left corner of dropdown when open
          - Support keyboard accessibility (space-bar to open, up/down arrow keys to navigate through options, spacebar or enter to select)

          *Developer Options*
          * Supply array of items for display
          * Allow for a default selection
          * Customize display of items with any text desired
          ** Stretch goal: allow for custom React component to be used
          * Handlers for onChange           		*User Interactions*
          - Clicking toggles the open/closed state of the menu
          - Menu sizes to reasonable default height, scroll to handle large numbers of items
          - Menu must position itself to bottom-left corner of dropdown when open
          - Support keyboard accessibility (space-bar to open, up/down arrow keys to navigate through options, spacebar or enter to select, esc to dismiss)

          *Developer Options*
          * Supply array of items for display
          * Allow for a default selection
          * Customize display of items with any text desired
          ** Stretch goal: allow for custom React component to be used
          * Handlers for onChange
          cliffmeyers Cliff Meyers made changes -
          Description *User Interactions*
          - Clicking toggles the open/closed state of the menu
          - Menu sizes to reasonable default height, scroll to handle large numbers of items
          - Menu must position itself to bottom-left corner of dropdown when open
          - Support keyboard accessibility (space-bar to open, up/down arrow keys to navigate through options, spacebar or enter to select, esc to dismiss)

          *Developer Options*
          * Supply array of items for display
          * Allow for a default selection
          * Customize display of items with any text desired
          ** Stretch goal: allow for custom React component to be used
          * Handlers for onChange           		*User Interactions*
          - Clicking toggles the open/closed state of the menu
          - Menu sizes to reasonable default height, scroll to handle large numbers of items
          - Menu must position itself to bottom-left corner of dropdown when open
          - Support keyboard accessibility (space-bar to open; arrow up/down, page up/down, home/end keys to navigate through options, spacebar or enter to select, esc to dismiss, mousewheel)

          *Developer Options*
          * Supply array of items for display
          * Allow for a default selection
          * Customize display of items with any text desired
          ** Stretch goal: allow for custom React component to be used
          * Handlers for onChange
          jamesdumay James Dumay made changes -
          Sprint indian [ 126 ] indian, arctic [ 126, 131 ]
          cliffmeyers Cliff Meyers added a comment -

          PR to refactor core "popover" logic into FloatingElement so it can be used in other components via composition: https://github.com/jenkinsci/jenkins-design-language/pull/109

          cliffmeyers Cliff Meyers added a comment - PR to refactor core "popover" logic into FloatingElement so it can be used in other components via composition: https://github.com/jenkinsci/jenkins-design-language/pull/109
          cliffmeyers Cliff Meyers added a comment -

          PR so the positioning is pluggable: https://github.com/jenkinsci/jenkins-design-language/pull/111

          cliffmeyers Cliff Meyers added a comment - PR so the positioning is pluggable: https://github.com/jenkinsci/jenkins-design-language/pull/111
          jamesdumay James Dumay made changes -
          Status In Progress [ 3 ] In Review [ 10005 ]
          cliffmeyers Cliff Meyers made changes -
          Resolution Fixed [ 1 ]
          Status In Review [ 10005 ] Resolved [ 5 ]
          brody Brody Maclean made changes -
          Attachment Buttons.png [ 34841 ]
          brody Brody Maclean added a comment -

          Updated Dropdown / Select Box at bottom

          Zeplin https://zpl.io/20uAgw

          brody Brody Maclean added a comment - Updated Dropdown / Select Box at bottom Zeplin https://zpl.io/20uAgw

          People

            cliffmeyers Cliff Meyers
            cliffmeyers Cliff Meyers
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: