Decrease the number of dropdowns

[owiecc]

In many contexts a dropdown is not the best choice. If the default choice list is very short, buttons would be better in my opinion. As an example: direction of a yield sign.

A direction can be chosen with just one click and reversed also with one click.

[tyrasd]

This can be implemented with the type=radio field, similar to this example:

This would be possible to do for any combo field that has "customValues": false and not too many options.

PS: I like the idea for the more compact UI, but that would be for a later step (the editor can choose whichever way to render the existing radio fields depending on the number of options, length of labels, etc).

[matkoniecz]

Note that in meantime new option appeared: "both": "Both / All"

@FloEdelmann are you interested in scanning repo for "type": "combo", fields where option count is really low? (you made some scripts like that before, obviously feel free to ignore this ping - if you are note interested just ignore it or let me know)

[matkoniecz]

New UI can be tested at #2081

I am curious is it better. Will take more space, and with three options it may be less obviously superior.

[owiecc]

Wouldn't modern CSS allow to style the radio buttons as labels, as in my original picture? I do like the radio buttons HTML elements because they are semantically right for the job.

[matkoniecz]

I am not sure is it going to be a clear improvement where there are three options, not two

[matkoniecz]

Wouldn't modern CSS allow to style the radio buttons as labels, as in my original picture? I do like the radio buttons HTML elements because they are semantically right for the job.

my plan is to go through iD presets, apply radio type where it is a clear improvement - and then move this issue back to iD repo where styling can be changes to radio-type fields with few entries

I think it is better than specifying exact form of interface in iD schema builder

but first, lets see whether #2081 will be accepted (comments, testing are welcome)

[matkoniecz]

And if this goes through then https://github.com/openstreetmap/id-tagging-schema/blob/main/data/fields/direction_vertex_dual.json would be next to test.

[FloEdelmann]

@matkoniecz I quickly adapted one of my preexisting scripts:

combo2radio.js

#!/usr/bin/env zx

// NOTE: uses https://github.com/google/zx and has to be called from id-tagging-schema root directory

const fieldJsonFiles = await glob('./data/fields/**/*.json', {
    gitignore: true,
    absolute: false,
})

const files = {}

for (const file of fieldJsonFiles) {
    const field = JSON.parse(fs.readFileSync(file, 'utf-8'))

    if (field.type !== 'combo' || field.customValues) {
        continue
    }
    const optionsCount = field.strings?.options
        ? Object.keys(field.strings.options).length
        : (field.options?.length ?? 0)

    if (optionsCount === 0 || optionsCount > 9) {
        continue
    }

    files[optionsCount] ??= []
    files[optionsCount].push(file)
}

console.log(files)

These are the results:

Click to expand

{
  '2': [
    './data/fields/direction_clock.json',
    './data/fields/direction_vertex_dual.json',
    './data/fields/dog_yes.json',
    './data/fields/incline_steps.json',
    './data/fields/recycling_type.json',
    './data/fields/side.json',
    './data/fields/stop.json',
    './data/fields/lift_gate/type.json',
    './data/fields/piste/grooming_hike.json',
    './data/fields/plant/method/solar.json',
    './data/fields/plant/method/waste.json'
  ],
  '3': [
    './data/fields/baby_feeding.json',
    './data/fields/crossing.json',
    './data/fields/diplomatic.json',
    './data/fields/direction_vertex.json',
    './data/fields/dock.json',
    './data/fields/junction_line.json',
    './data/fields/leaf_type_singular.json',
    './data/fields/location_pool.json',
    './data/fields/organic.json',
    './data/fields/ramp.json',
    './data/fields/second_hand.json',
    './data/fields/structure_power.json',
    './data/fields/takeaway.json',
    './data/fields/visibility.json',
    './data/fields/aerialway/access.json',
    './data/fields/camera/type.json',
    './data/fields/cycle_barrier/installation.json',
    './data/fields/holding_position/type.json',
    './data/fields/internet_access/fee.json',
    './data/fields/orientation/orientation_parking.json',
    './data/fields/piste/grooming_downhill.json',
    './data/fields/siren/type.json',
    './data/fields/surveillance/type.json',
    './data/fields/survey_point/purpose.json',
    './data/fields/traffic_sign/direction.json',
    './data/fields/traffic_signals/direction.json',
    './data/fields/volcano/status.json',
    './data/fields/volcano/type.json',
    './data/fields/aerialway/summer/access.json',
    './data/fields/generator/method/hydro.json',
    './data/fields/plant/method/hydro.json',
    './data/fields/railway/signal/direction.json',
    './data/fields/seamark/beacon_lateral/colour.json'
  ],
  '4': [
    './data/fields/basin.json',
    './data/fields/camp_site.json',
    './data/fields/ceremonial_gate.json',
    './data/fields/departures_board.json',
    './data/fields/direction_cardinal-US-CA-NZ.json',
    './data/fields/display.json',
    './data/fields/dog.json',
    './data/fields/electrified.json',
    './data/fields/fire_mains.json',
    './data/fields/fire_service_inlet.json',
    './data/fields/leaf_cycle_singular.json',
    './data/fields/leaf_type.json',
    './data/fields/network_bicycle.json',
    './data/fields/network_foot.json',
    './data/fields/network_horse.json',
    './data/fields/pump.json',
    './data/fields/reservation.json',
    './data/fields/service_rail.json',
    './data/fields/switch.json',
    './data/fields/tunnel_combo.json',
    './data/fields/addr/interpolation.json',
    './data/fields/fire_hydrant/position.json',
    './data/fields/fire_hydrant/type.json',
    './data/fields/kerb/kerb_barrier.json',
    './data/fields/railway/signal_box.json',
    './data/fields/toilets/disposal.json',
    './data/fields/traffic_signals/sound.json',
    './data/fields/seamark/beacon_lateral/system.json',
    './data/fields/seamark/buoy_lateral/system.json'
  ],
  '5': [
    './data/fields/bollard.json',
    './data/fields/cai_scale-IT.json',
    './data/fields/cycle_barrier.json',
    './data/fields/fire_sprinkler.json',
    './data/fields/internet_access.json',
    './data/fields/leaf_cycle.json',
    './data/fields/military_service.json',
    './data/fields/mooring.json',
    './data/fields/service.json',
    './data/fields/telecom.json',
    './data/fields/tracktype.json',
    './data/fields/bath/type.json',
    './data/fields/crane/type.json',
    './data/fields/crossing/barrier.json',
    './data/fields/crossing/markings-BG.json',
    './data/fields/crossing/markings-PL.json',
    './data/fields/crossing/markings_yes-BG.json',
    './data/fields/crossing/markings_yes-PL.json',
    './data/fields/piste/difficulty_nordic.json',
    './data/fields/piste/grooming_nordic.json',
    './data/fields/mtb/scale/imba.json',
    './data/fields/railway/signal/position.json'
  ],
  '6': [
    './data/fields/bicycle_parking.json',
    './data/fields/consulate.json',
    './data/fields/flashing_lights.json',
    './data/fields/horse_scale.json',
    './data/fields/kerb.json',
    './data/fields/nudism.json',
    './data/fields/smoking.json',
    './data/fields/tee_disc_golf.json',
    './data/fields/trail_visibility.json',
    './data/fields/usage_rail.json',
    './data/fields/usage_waterway.json',
    './data/fields/water_source.json',
    './data/fields/crossing/markings-DE-AT-CH.json',
    './data/fields/crossing/markings_yes-DE-AT-CH.json',
    './data/fields/piste/grooming.json',
    './data/fields/mtb/scale/uphill.json',
    './data/fields/seamark/beacon_lateral/category.json'
  ],
  '7': [
    './data/fields/access_simple.json',
    './data/fields/community_centre.json',
    './data/fields/house.json',
    './data/fields/sac_scale.json',
    './data/fields/substance.json',
    './data/fields/transformer.json',
    './data/fields/mtb/scale.json',
    './data/fields/piste/difficulty.json',
    './data/fields/piste/difficulty_downhill.json',
    './data/fields/piste/difficulty_skitour.json',
    './data/fields/roller_coaster/track.json',
    './data/fields/windings/configuration.json'
  ],
  '8': [
    './data/fields/bridge_combo.json',
    './data/fields/content.json',
    './data/fields/embassy.json',
    './data/fields/smoothness.json',
    './data/fields/seamark/buoy_lateral/colour.json'
  ],
  '9': [
    './data/fields/board_type.json',
    './data/fields/castle_type.json',
    './data/fields/social_facility.json'
  ]
}

[FloEdelmann]

Wouldn't modern CSS allow to style the radio buttons as labels, as in my original picture?

See @tyrasd's comment:

I like the idea for the more compact UI, but that would be for a later step (the editor can choose whichever way to render the existing radio fields depending on the number of options, length of labels, etc).

And regarding your mockup: I find it hard to discern which option is selected and which one is unselected. A mitigation for that could be e.g. keeping the radio buttons inside the buttons.