app/components/projects/settings/project_custom_field_sections/custom_field_row_component.html.erb
<%=
component_wrapper do
flex_layout(align_items: :center, justify_content: :space_between, classes: 'op-project-custom-field', data: {
test_selector: "project-custom-field-#{@project_custom_field.id}"
}) do |custom_field_container|
custom_field_container.with_column(flex_layout: true) do |title_container|
title_container.with_column(pt: 1, mr: 2) do
render(Primer::Beta::Text.new) do
@project_custom_field.name
end
end
title_container.with_column(pt: 1, mr: 2, data: { test_selector: "custom-field-type" } ) do
render(Primer::Beta::Text.new(font_size: :small, color: :subtle)) do
@project_custom_field.field_format.capitalize
end
end
if @project_custom_field.required?
title_container.with_column(pt: 1) do
render(Primer::Beta::Label.new(scheme: :attention, size: :medium)) do
t("label_required")
end
end
end
end
# py: 1 quick fix: prevents the row from bouncing as the toggle switch currently changes height while toggling
custom_field_container.with_column(py: 1, mr: 2) do
# buggy currently:
# small variant + status_label_position: :start leads to a small bounce while toggling
# behavior can be seen on primer's viewbook as well -> https://view-components-storybook.eastus.cloudapp.azure.com/view-components/lookbook/inspect/primer/alpha/toggle_switch/small
# quick fix: don't display loading indicator which is causing the bounce
render(Primer::Alpha::ToggleSwitch.new(
src: toggle_project_settings_project_custom_fields_path(
project_custom_field_project_mapping: {
project_id: @project.id,
custom_field_id: @project_custom_field.id
}
),
csrf_token: form_authenticity_token,
data: { 'turbo-method': :put, 'turbo-stream': true,
test_selector: "toggle-project-custom-field-mapping-#{@project_custom_field.id}" },
checked: active_in_project?,
enabled: !@project_custom_field.required?, # required fields cannot be disabled
size: :small,
status_label_position: :start,
classes: "op-primer-adjustments__toggle-switch--hidden-loading-indicator",
))
end
end
end
%>