Skip to content

GitLab

T
tangled
Commit e2e7a400 authored by John Lee's avatar John Lee Committed by Commit Bot
Browse files
Options

WebUI: Replace --cr-form-field-label with a cr-form-field-label class 

https://imgur.com/a/x0iNkYr

Bug: 973674
Change-Id: I817474ff3a681f625c86be9cc1e6eb57f04eea26
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1700260Reviewed-by: default avatarLuciano Pacheco <lucmult@chromium.org>
Reviewed-by: default avatarDemetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#678381}
parent c49f8dba
Hide whitespace changes
Inline Side-by-side
Showing with 60 additions and 79 deletions
chrome/browser/resources/chromeos/password_change/confirm_password_change.html
View file @ e2e7a400
......@@ -29,10 +29,6 @@
width: 100%;
}
.label {
@apply --cr-form-field-label;
}
#prompt {
margin-bottom: 20px;
}
......@@ -95,4 +91,4 @@
<body>
<confirm-password-change id="main-element"></confirm-password-change>
</body>
</html>
\ No newline at end of file
</html>
chrome/browser/resources/settings/autofill_page/address_edit_dialog.html
View file @ e2e7a400
......@@ -3,6 +3,7 @@
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
......@@ -13,7 +14,7 @@
<dom-module id="settings-address-edit-dialog">
<template>
<style include="settings-shared md-select">
<style include="cr-shared-style settings-shared md-select">
:host {
white-space: nowrap;
}
......@@ -37,14 +38,6 @@
--md-select-width: var(--settings-input-max-width);
}
#select-label {
@apply --cr-form-field-label;
}
:host-context([dir=rtl]) #select-label {
transform-origin: right;
}
.long {
width: var(--settings-input-max-width);
}
......@@ -93,7 +86,9 @@
</div>
</template>
<div id="select-row" class="address-row">
<div id="select-label">$i18n{addressCountry}</div>
<label id="select-label" class="cr-form-field-label">
$i18n{addressCountry}
</label>
<select class="md-select" aria-labelledby="select-label"
value="[[countryCode_]]" on-change="onCountryChange_">
<option value=""></option>
......
chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.html
View file @ e2e7a400
......@@ -3,6 +3,7 @@
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
......@@ -11,7 +12,7 @@
<dom-module id="settings-credit-card-edit-dialog">
<template>
<style include="settings-shared md-select">
<style include="cr-shared-style settings-shared md-select">
cr-input {
--cr-input-error-display: none;
margin-bottom: var(--cr-form-field-bottom-spacing);
......@@ -56,10 +57,6 @@
#year {
width: 100px;
}
label {
@apply --cr-form-field-label;
}
</style>
<cr-dialog id="dialog" close-text="$i18n{close}">
<div slot="title">[[title_]]</div>
......@@ -72,10 +69,12 @@
value="{{creditCard.cardNumber}}"
on-input="onCreditCardNameOrNumberChanged_">
</cr-input>
<label>$i18n{creditCardExpiration}</label>
<label id="creditCardExpiration" class="cr-form-field-label">
$i18n{creditCardExpiration}
</label>
<select class="md-select" id="month" value="[[expirationMonth_]]"
on-change="onMonthChange_"
aria-label="$i18n{creditCardExpirationMonth}">
aria-labelledby="creditCardExpiration">
<template is="dom-repeat" items="[[monthList_]]">
<option>[[item]]</option>
</template>
......
chrome/browser/resources/settings/controls/settings_textarea.html
View file @ e2e7a400
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input_style_css.html">
<dom-module id="settings-textarea">
<template>
<style include="cr-hidden-style cr-input-style">
<style include="cr-hidden-style cr-input-style cr-shared-style">
textarea {
display: block;
resize: none;
......@@ -19,7 +20,9 @@
position: static;
}
</style>
<div id="label" hidden="[[!label]]">[[label]]</div>
<div id="label" class="cr-form-field-label" hidden="[[!label]]">
[[label]]
</div>
<div id="input-container">
<!-- The textarea is limited to |rows| height. If the content exceeds the
bounds, it scrolls by default. No space or comments are allowed
......
chrome/browser/resources/settings/people_page/kerberos_add_account_dialog.html
View file @ e2e7a400
......@@ -19,10 +19,6 @@
<dom-module id="kerberos-add-account-dialog">
<template>
<style include="settings-shared action-link">
.label {
@apply --cr-form-field-label;
}
#advancedConfigDesc {
align-items: center;
display: flex;
......@@ -141,4 +137,4 @@
</template>
</template>
<script src="kerberos_add_account_dialog.js"></script>
</dom-module>
\ No newline at end of file
</dom-module>
chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.html
View file @ e2e7a400
......@@ -4,6 +4,7 @@
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.html">
<link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
......@@ -15,7 +16,7 @@
<dom-module id="add-printer-discovery-dialog">
<template>
<style include="cups-printer-shared">
<style include="cr-shared-style cups-printer-shared">
add-printer-list {
max-height: 310px;
overflow-y: auto;
......@@ -101,7 +102,9 @@
</div>
<div class="settings-box two-line">
<div class="start">
<div id="printerProtocol" class="label">$i18n{printerProtocol}</div>
<div id="printerProtocol" class="cr-form-field-label">
$i18n{printerProtocol}
</div>
<div class="secondary">
<select class="md-select" aria-labelledby="printerProtocol"
value="[[newPrinter.printerProtocol]]"
......@@ -186,7 +189,7 @@
value="{{activePrinter.ppdModel}}">
</cr-searchable-drop-down>
</div>
<div id="ppdLabel" class="field-label">
<div id="ppdLabel" class="cr-form-field-label">
<span>$i18n{selectDriver}</span>
<a href="$i18n{printingCUPSPrintPpdLearnMoreUrl}" target="_blank">
$i18n{learnMore}
......
chrome/browser/resources/settings/printing_page/cups_edit_printer_dialog.html
View file @ e2e7a400
......@@ -6,6 +6,7 @@
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/cr_scrollable_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/html/chromeos/onc_mojo.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="cups_add_printer_dialog_elements.html">
......@@ -15,7 +16,7 @@
<dom-module id="settings-cups-edit-printer-dialog">
<template>
<style include="cups-printer-shared"></style>
<style include="cr-shared-style cups-printer-shared"></style>
<add-printer-dialog>
<div slot="dialog-title">$i18n{editPrinterDialogTitle}
<div id="general-error-container" hidden="[[!errorText_]]">
......@@ -49,7 +50,9 @@
</div>
<div class="settings-box two-line">
<div class="start">
<div id="printerProtocol" class="label">$i18n{printerProtocol}</div>
<div id="printerProtocol" class="cr-form-field-label">
$i18n{printerProtocol}
</div>
<div class="secondary">
<select class="md-select" aria-labelledby="printerProtocol"
value="[[pendingPrinter_.printerProtocol]]"
......@@ -114,7 +117,7 @@
readonly="[[!isOnline_]]">
</cr-searchable-drop-down>
</div>
<div id="ppdLabel" class="field-label">
<div id="ppdLabel" class="cr-form-field-label">
<span>$i18n{selectDriver}</span>
<a href="$i18n{printingCUPSPrintPpdLearnMoreUrl}" target="_blank">
$i18n{learnMore}
......
chrome/browser/resources/settings/printing_page/cups_printer_shared_css.html
View file @ e2e7a400
......@@ -17,10 +17,6 @@
align-items: flex-start;
}
[slot='dialog-body'] .settings-box .start .label {
@apply --cr-form-field-label;
}
[slot='dialog-body'] .settings-box cr-input {
width: 100%;
}
......@@ -94,9 +90,8 @@
font: inherit;
}
.field-label {
#ppdLabel {
padding-inline-start: 20px;
@apply --cr-form-field-label;
}
#general-error-container {
......
chrome/test/data/webui/cr_elements/cr_input_test.js
View file @ e2e7a400
......@@ -146,7 +146,7 @@ suite('cr-input', function() {
assertEquals('none', getComputedStyle(crInput.$.label).display);
crInput.label = 'foobar';
assertEquals('block', getComputedStyle(crInput.$.label).display);
assertEquals('foobar', label.textContent);
assertEquals('foobar', label.textContent.trim());
});
test('valueSetCorrectly', function() {
......
chrome/test/data/webui/settings/settings_textarea_tests.js
View file @ e2e7a400
......@@ -38,7 +38,7 @@ suite('SettingsTextarea', function() {
assertTrue(label.hidden);
settingsTextarea.label = 'foobar';
assertFalse(label.hidden);
assertEquals('foobar', label.textContent);
assertEquals('foobar', label.textContent.trim());
assertEquals('foobar', textarea.getAttribute('aria-label'));
});
......
ui/file_manager/file_manager/foreground/elements/files_format_dialog.html
View file @ e2e7a400
......@@ -11,20 +11,17 @@
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<dom-module id="files-format-dialog">
<template>
<style include="md-select">
<style include="cr-shared-style md-select">
.md-select {
width: 100%;
}
.label {
@apply --cr-form-field-label;
}
[slot='body'] > div {
margin-bottom: var(--cr-form-field-bottom-spacing);
}
......@@ -57,9 +54,9 @@
id="label" value="{{label_}}" auto-validate="true">
</cr-input>
<div id="disk-format">
<div id="format-type-label" class="label">
<label id="format-type-label" class="cr-form-field-label">
[[i18n('FORMAT_DIALOG_FORMAT_LABEL')]]
</div>
</label>
<select class="md-select" aria-labelledby="format-type-label"
value="{{formatType_::change}}">
<option value="vfat">FAT32</option>
......
ui/webui/resources/cr_components/chromeos/network/network_config_select.html
View file @ e2e7a400
......@@ -4,22 +4,19 @@
<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_indicator.html">
<link rel="import" href="chrome://resources/cr_elements/policy/cr_tooltip_icon.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
<link rel="import" href="network_config_element_behavior.html">
<link rel="import" href="network_shared_css.html">
<dom-module id="network-config-select">
<template>
<style include="network-shared md-select">
<style include="cr-shared-style network-shared md-select">
.md-select {
color: var(--cr-primary-text-color);
width: 100%;
}
#label {
@apply --cr-form-field-label;
}
#outer {
align-items: stretch;
display: flex;
......@@ -41,7 +38,7 @@
</style>
<div id="outer">
<div id="label">[[label]]</div>
<div id="label" class="cr-form-field-label">[[label]]</div>
<div id="inner">
<select class="md-select"
disabled="[[getDisabled_(disabled, property)]]"
......
ui/webui/resources/cr_components/chromeos/smb_shares/add_smb_share_dialog.html
View file @ e2e7a400
......@@ -6,6 +6,7 @@
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
......@@ -15,7 +16,7 @@
<dom-module id="add-smb-share-dialog">
<template>
<style include="md-select">
<style include="cr-shared-style md-select">
#dialog [slot=body] {
height: 440px;
}
......@@ -24,10 +25,6 @@
width: 100%;
}
.label {
@apply --cr-form-field-label;
}
cr-searchable-drop-down {
display: block;
}
......@@ -86,9 +83,9 @@
value="{{mountName_}}" maxlength="64">
</cr-input>
<div id="authentication-method" hidden="[[!isActiveDirectory_]]">
<div id="authentication-label" class="label">
<label id="authentication-label" class="cr-form-field-label">
[[i18n('smbShareAuthenticationMethod')]]
</div>
</label>
<select class="md-select" aria-labelledby="authentication-label"
value="{{authenticationMethod_::change}}">
<option value="kerberos">
......
ui/webui/resources/cr_elements/cr_input/cr_input.html
View file @ e2e7a400
......@@ -3,12 +3,13 @@
<link rel="import" href="../../html/assert.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="../hidden_style_css.html">
<link rel="import" href="../shared_style_css.html">
<link rel="import" href="../shared_vars_css.html">
<link rel="import" href="cr_input_style_css.html">
<dom-module id="cr-input">
<template>
<style include="cr-hidden-style cr-input-style">
<style include="cr-hidden-style cr-input-style cr-shared-style">
/*
A 'suffix' element will be outside the underlined space, while a
'prefix' element will be inside the underlined space by default.
......@@ -103,7 +104,10 @@
-webkit-appearance: none;
}
</style>
<div id="label" hidden="[[!label]]" aria-hidden="true">[[label]]</div>
<div id="label" class="cr-form-field-label" hidden="[[!label]]"
aria-hidden="true">
[[label]]
</div>
<div id="row-container" part="row-container">
<div id="input-container">
<div id="inner-input-container">
......
ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html
View file @ e2e7a400
......@@ -27,11 +27,6 @@
}
}
/* Label styling below. */
#label {
@apply --cr-form-field-label;
}
:host([focused_]:not([readonly]):not([invalid])) #label {
color: var(--cr-input-focus-color);
}
......
ui/webui/resources/cr_elements/shared_style_css.html
View file @ e2e7a400
......@@ -100,6 +100,16 @@
#cr-container-shadow-bottom.has-shadow {
opacity: var(--cr-container-shadow-max-opacity);
}
.cr-form-field-label {
color: var(--cr-form-field-label-color);
display: block;
font-size: var(--cr-form-field-label-font-size);
font-weight: 500;
letter-spacing: .4px;
line-height: var(--cr-form-field-label-line-height);
margin-bottom: 8px;
}
</style>
</template>
</dom-module>
ui/webui/resources/cr_elements/shared_vars_css.html
View file @ e2e7a400
......@@ -245,15 +245,6 @@
--cr-form-field-label-font-size: .625rem;
--cr-form-field-label-height: 1em;
--cr-form-field-label-line-height: 1em;
--cr-form-field-label: {
color: var(--cr-form-field-label-color);
display: block;
font-size: var(--cr-form-field-label-font-size);
font-weight: 500;
letter-spacing: .4px;
line-height: var(--cr-form-field-label-line-height);
margin-bottom: 8px;
}
}
</style>
</custom-style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment