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.

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

Remove/update m-form-field modifiers #8384

Merged
merged 1 commit into from
May 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion cfgov/hmda/jinja2/hmda/hmda-explorer-controls.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
content-l__col-1-2">
<div class="o-form__group">
<fieldset class="o-form__fieldset">
<div class="m-form-field m-form-field__select">
<div class="m-form-field">
<label class="a-label a-label--heading" for="id_geo">
Geographic area
</label>
Expand Down
2 changes: 1 addition & 1 deletion cfgov/jinja2/rural-or-underserved/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ <h1>Rural and underserved areas tool</h1>
<h2>
Check status of properties for loans extended in
<small class="u-inline-select">
<div class="m-form-field m-form-field__select">
<div class="m-form-field">
<label class="u-visually-hidden"
for="year">
Year of loan
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ <h2 class="affording-loans-choices__about">About your estimated payment</h2>
<div data-state-based-visibility="expenses-monthly-budget">
<h2>2. See if the monthly payment fits in an average monthly budget for this <span data-state-based-visibility="no-program-selected">school</span><span data-state-based-visibility="program-is-selected">program</span>'s salary and region</h2>

<div class="m-form-field m-form-field__select">
<div class="m-form-field">
<label class="a-label a-label--heading" for="expenses__region">
What part of the US do you plan to live in after graduation?
</label>
Expand Down
2 changes: 1 addition & 1 deletion cfgov/privacy/jinja2/privacy/disclosure-consent-form.html
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ <h2>Supporting documentation (optional)</h2>
{% endfor %}
<h3>Select files to attach</h3>
<p>Please select up to 6 files. The total file size must not exceed 6MB. We accept all image files, including .jpg, .png, .pdf, .gif and .eps.</p>
<div class="m-form-field m-form-field__file-input">
<div class="m-form-field m-form-field--file-input">
<!-- Actual hidden file upload component. -->
<label>
<input class="u-hidden" multiple type="file" name="supporting_documentation" id="supporting_documentation">
Expand Down
2 changes: 1 addition & 1 deletion cfgov/privacy/jinja2/privacy/privacy-styles.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
#mail-target.open {
display: block;
}
.m-form-field__file-input{
.m-form-field--file-input{
margin-top: 1.5em;
margin-bottom: -1em;
}
Expand Down
2 changes: 1 addition & 1 deletion cfgov/privacy/jinja2/privacy/records-access-form.html
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ <h2>Supporting documentation (optional)</h2>
{% endfor %}
<h3>Select files to attach</h3>
<p>Please select up to 6 files. The total file size must not exceed 6MB. We accept all image files, including .jpg, .png, .pdf, .gif and .eps.</p>
<div class="m-form-field m-form-field__file-input">
<div class="m-form-field m-form-field--file-input">
<!-- Actual hidden file upload component. -->
<label>
<input class="u-hidden" multiple type="file" name="supporting_documentation" id="supporting_documentation">
Expand Down
2 changes: 1 addition & 1 deletion cfgov/retirement_api/jinja2/retirement_api/claiming.html
Original file line number Diff line number Diff line change
Expand Up @@ -910,7 +910,7 @@ <h3 id="retirement-selector-label">
{{ _("(This will not affect your Social Security account or eligibility and it will not begin an application.)") }}
</small>
</p>
<div class="m-form-field m-form-field__select">
<div class="m-form-field">
<div class="a-select">
<select id="retirement-age-selector" aria-labelledby="retirement-selector-label">
<option value="">{{ _("Choose age") }}</option>
Expand Down
2 changes: 1 addition & 1 deletion cfgov/tccp/jinja2/tccp/includes/filter_form.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{%- import 'v1/includes/molecules/notification.html' as notification -%}

{%- macro render_field(field, field_type) -%}
<div class="m-form-field m-form-field__{{ field_type }}">
<div class="m-form-field{{ ' m-form-field--checkbox' if field_type == 'checkbox' }}">
{# Checkboxes render the label after the input. #}
{% if field_type == "checkbox" -%}
{{ field }}
Expand Down
4 changes: 2 additions & 2 deletions cfgov/tccp/jinja2/tccp/landing_page.html
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ <h2>
<form action="." method="get">

<div class="o-form__group">
<div class="m-form-field m-form-field__select">
<div class="m-form-field">
<label
class="a-label a-label--heading"
for="{{ form.credit_tier.id_for_label}}"
Expand All @@ -104,7 +104,7 @@ <h2>
</div>

<div class="o-form__group">
<div class="m-form-field m-form-field__select">
<div class="m-form-field">
<label
class="a-label a-label--heading"
for="{{ form.location.id_for_label}}"
Expand Down
2 changes: 1 addition & 1 deletion cfgov/unprocessed/css/molecules/file-input.less
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.m-form-field__file-input {
.m-form-field--file-input {
position: relative;
display: grid;
grid-template-columns: auto auto 1fr;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ function makeSelectFilterDOM(options, chartNode, filter) {
)[0];

const wrapper = document.createElement('div');
wrapper.className = 'filter-wrapper m-form-field m-form-field__select';
wrapper.className = 'filter-wrapper m-form-field';
wpears marked this conversation as resolved.
Show resolved Hide resolved

const label = document.createElement('label');
label.className = 'a-label a-label--heading';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
========================================================================== #}

{% macro _filter_selectable(type, label_text, id, name, value, required=None, group=None) %}
<li class="m-form-field m-form-field__{{ type }}">
<li class="m-form-field m-form-field--{{ type }}">
<input class="a-{{ type }}"
type="{{ type }}"
value="{{ value }}"
Expand Down
6 changes: 3 additions & 3 deletions cfgov/v1/jinja2/v1/includes/organisms/mortgage-chart.html
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ <h3 class="u-mb30">Filter by location to display trends</h3>
</div>
</fieldset>
<fieldset class="content-l__col content-l__col-1-2">
<div class="m-form-field m-form-field__select mp-line-chart-select-container u-mb30" id="mp-line-chart-state-container" style="display:none">
<div class="m-form-field mp-line-chart-select-container u-mb30" id="mp-line-chart-state-container" style="display:none">
<label class="a-label" for="mp-line-chart-state"><h4 id="mp-state-dropdown-title">Select state</h4></label>
<div class="a-select">
<select id="mp-line-chart-state">
Expand Down Expand Up @@ -123,7 +123,7 @@ <h3 class="u-mb30">Filter by location to display trends</h3>
States are only listed if their non-metro area has sufficient data.
</p>
</div>
<div class="m-form-field m-form-field__select mp-line-chart-select-container" id="mp-line-chart-metro-container" style="display:none">
<div class="m-form-field mp-line-chart-select-container" id="mp-line-chart-metro-container" style="display:none">
<label class="a-label" for="mp-line-chart-metro"><h4>Select metro area</h4></label>
<div class="a-select">
<select id="mp-line-chart-metro">
Expand All @@ -137,7 +137,7 @@ <h3 class="u-mb30">Filter by location to display trends</h3>
target="_blank" rel="noopener noreferrer">Learn why.</a>
</p>
</div>
<div class="m-form-field m-form-field__select mp-line-chart-select-container u-mb30" id="mp-line-chart-county-container" style="display:none">
<div class="m-form-field mp-line-chart-select-container u-mb30" id="mp-line-chart-county-container" style="display:none">
<label class="a-label" for="mp-line-chart-county"><h4>Select county</h4></label>
<div class="a-select">
<select id="mp-line-chart-county">
Expand Down
10 changes: 5 additions & 5 deletions cfgov/v1/jinja2/v1/includes/organisms/mortgage-map.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ <h3 class="u-mb30">Choose location to display on the map</h3>
</div>
</fieldset>
<fieldset class="content-l__col content-l__col-1-2">
<div class="m-form-field m-form-field__select mp-map-select-container" id="mp-map-state-container">
<div class="m-form-field mp-map-select-container" id="mp-map-state-container">
<label class="a-label" for="mp-map-state"><h4>Select state to zoom</h4></label>
<div class="a-select">
<select id="mp-map-state">
Expand Down Expand Up @@ -102,15 +102,15 @@ <h3 class="u-mb30">Choose location to display on the map</h3>
</select>
</div>
</div>
<div class="m-form-field m-form-field__select mp-map-select-container" id="mp-map-metro-container" style="display:none">
<div class="m-form-field mp-map-select-container" id="mp-map-metro-container" style="display:none">
<label class="a-label u-mt30" for="mp-map-metro"><h4>Select metro or non-metro area to highlight</h4></label>
<div class="a-select">
<select id="mp-map-metro">
<option value="" selected>Please select an area</option>
</select>
</div>
</div>
<div class="m-form-field m-form-field__select mp-map-select-container" id="mp-map-county-container" style="display:none">
<div class="m-form-field mp-map-select-container" id="mp-map-county-container" style="display:none">
<label class="a-label u-mt30" for="mp-map-county"><h4>Select county to highlight</h4></label>
<div class="a-select">
<select id="mp-map-county" disabled>
Expand All @@ -122,7 +122,7 @@ <h3 class="u-mb30">Choose location to display on the map</h3>
<fieldset class="content-l">
<h4 class="u-mt30">Select month and year to display</h4>
<div class="content-l__col content-l__col-1-2 u-m0">
<div class="m-form-field m-form-field__select" id="mp-map-month-container">
<div class="m-form-field" id="mp-map-month-container">
<label class="a-label u-mb15" for="mp-map-month">Month</label>
<div class="a-select">
<select id="mp-map-month">
Expand All @@ -143,7 +143,7 @@ <h4 class="u-mt30">Select month and year to display</h4>
</div>
</div>
<div class="content-l__col content-l__col-1-2">
<div class="m-form-field m-form-field__select" id="mp-map-year-container">
<div class="m-form-field" id="mp-map-year-container">
<label class="a-label u-mb15" for="mp-map-year">Year</label>
<div class="a-select">
<select id="mp-map-year">
Expand Down
Loading