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.

Sign up for GitHub

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

o-forms corrections and o-message build error fix #1942

Merged
merged 5 commits into from
Jan 22, 2025
Merged

o-forms corrections and o-message build error fix #1942

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bf19371
chore: apply radius to o-forms checkboxes
notlee Jan 22, 2025
42325bb
chore: Correct o-forms date input width
notlee Jan 22, 2025
d92faf0
chore: Correct o-message token use, we removed link tokens
notlee Jan 22, 2025
1296afe
chore: Update o-forms demos to show visually updated buttons given o-…
notlee Jan 22, 2025
5a2dc4c
chore: Remove duplicate line-height declaration within o-forms
notlee Jan 22, 2025
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
39 changes: 8 additions & 31 deletions components/o-forms/demos/src/data/pa11y.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,7 @@
"label": "error-date-group-title"
},
"error": "Not a valid date",
"modifiers": [
"invalid"
]
"modifiers": ["invalid"]
},
"title": {
"main": "Invalid date input"
Expand All @@ -136,7 +134,6 @@
"value": "24",
"id": "error-month",
"name": "error-month"

},
{
"type": "text",
Expand All @@ -145,7 +142,6 @@
"value": "2019",
"id": "error-year",
"name": "error-year"

}
]
},
Expand Down Expand Up @@ -221,10 +217,7 @@
"label": "saving-state-group-title",
"info": "saving-state-group-info"
},
"modifiers": [
"saving",
"inline"
],
"modifiers": ["saving", "inline"],
"state": "Saving"
},
"title": {
Expand Down Expand Up @@ -398,9 +391,7 @@
},
"input": {
"type": "text",
"modifiers": [
"invalid"
],
"modifiers": ["invalid"],
"value": "Invalid Input",
"error": "Something went wrong",
"id": "invalid-text-input"
Expand All @@ -425,11 +416,9 @@
},
"input": {
"type": "text",
"modifiers": [
"suffix"
],
"modifiers": ["suffix"],
"value": "",
"button": "o-buttons o-buttons--secondary o-buttons--big",
"button": "demo-submit-button",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this correct due to the change?

"id": "suffix-text-input"
}
},
Expand Down Expand Up @@ -461,15 +450,8 @@
},
"input": {
"type": "select",
"options": [
"Option 1",
"Option 2",
"Option 3",
"Option 4"
],
"modifiers": [
"small"
],
"options": ["Option 1", "Option 2", "Option 3", "Option 4"],
"modifiers": ["small"],
"id": "small-select"
}
},
Expand All @@ -481,12 +463,7 @@
},
"input": {
"type": "select",
"options": [
"Option 1",
"Option 2",
"Option 3",
"Option 4"
],
"options": ["Option 1", "Option 2", "Option 3", "Option 4"],
"id": "multiple-select"
}
},
Expand Down
36 changes: 18 additions & 18 deletions components/o-forms/demos/src/data/select.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"input": {
"type": "select",
"selected": "Option 1 (low chars: qgjpy)",
"options": [ "Option 2", "Option 3", "Option 4" ],
"options": ["Option 2", "Option 3", "Option 4"],
"id": "optional"
}
},
Expand All @@ -22,7 +22,7 @@
"input": {
"type": "select",
"selected": "Option 1",
"options": [ "Option 2", "Option 3", "Option 4" ],
"options": ["Option 2", "Option 3", "Option 4"],
"modifiers": [],
"id": "valid"
}
Expand All @@ -35,7 +35,7 @@
"input": {
"type": "select",
"selected": "",
"options": ["", "Option 1", "Option 2", "Option 3" ],
"options": ["", "Option 1", "Option 2", "Option 3"],
"modifiers": ["invalid"],
"error": "An example error. Try again.",
"id": "invalid"
Expand All @@ -50,7 +50,7 @@
"input": {
"type": "select",
"selected": "Option 1",
"options": [ "Option 2", "Option 3", "Option 4" ],
"options": ["Option 2", "Option 3", "Option 4"],
"id": "disabled"
}
},
Expand All @@ -62,8 +62,8 @@
"input": {
"type": "select",
"selected": "Option 1",
"options": [ "Option 2", "Option 3", "Option 4" ],
"modifiers": [ "small" ],
"options": ["Option 2", "Option 3", "Option 4"],
"modifiers": ["small"],
"id": "small"
}
},
Expand All @@ -76,7 +76,7 @@
"input": {
"type": "select",
"selected": "Option 1",
"options": [ "Option 2", "Option 3", "Option 4" ],
"options": ["Option 2", "Option 3", "Option 4"],
"id": "multiple"
}
},
Expand All @@ -89,9 +89,9 @@
"input": {
"type": "select",
"selected": "Option 1",
"options": [ "Option 2", "Option 3", "Option 4" ],
"modifiers": [ "suffix" ],
"button": "o-buttons o-buttons--secondary o-buttons--big",
"options": ["Option 2", "Option 3", "Option 4"],
"modifiers": ["suffix"],
"button": "demo-submit-button",
"id": "suffix"
}
},
Expand All @@ -103,9 +103,9 @@
"input": {
"type": "select",
"selected": "Option 1",
"options": [ "Option 2", "Option 3", "Option 4" ],
"modifiers": [ "suffix", "small" ],
"button": "o-buttons o-buttons--secondary",
"options": ["Option 2", "Option 3", "Option 4"],
"modifiers": ["suffix", "small"],
"button": "demo-submit-small-button",
"id": "small-suffix"
}
},
Expand All @@ -115,12 +115,12 @@
"title": {
"main": "Short title",
"prompt": "Long input",
"modifiers": [ "shrink"]
"modifiers": ["shrink"]
},
"input": {
"type": "select",
"selected": "Option 1",
"options": [ "Option 2", "Option 3", "Option 4" ],
"options": ["Option 2", "Option 3", "Option 4"],
"id": "short-title"
}
},
Expand All @@ -129,12 +129,12 @@
"inline-field": true,
"title": {
"main": "Vertically centered title",
"modifiers": [ "vertical-center" ]
"modifiers": ["vertical-center"]
},
"input": {
"type": "select",
"selected": "Option 1",
"options": [ "Option 2", "Option 3", "Option 4" ],
"options": ["Option 2", "Option 3", "Option 4"],
"id": "vertical-center"
}
},
Expand All @@ -149,7 +149,7 @@
"input": {
"type": "select",
"selected": "Option 1",
"options": [ "Option 2", "Option 3", "Option 4" ],
"options": ["Option 2", "Option 3", "Option 4"],
"id": "inline-multiple"
}
}
Expand Down
16 changes: 8 additions & 8 deletions components/o-forms/demos/src/data/text-input.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
},
"input": {
"type": "text",
"modifiers": [ ],
"modifiers": [],
"value": "Valid Input",
"id": "valid"
}
Expand All @@ -31,7 +31,7 @@
},
"input": {
"type": "text",
"modifiers": [ "invalid" ],
"modifiers": ["invalid"],
"error": "Please fill out this field",
"id": "invalid"
}
Expand All @@ -55,7 +55,7 @@
},
"input": {
"type": "text",
"modifiers": [ "small" ],
"modifiers": ["small"],
"value": "Value",
"id": "small"
}
Expand All @@ -68,9 +68,9 @@
},
"input": {
"type": "text",
"modifiers": [ "suffix" ],
"modifiers": ["suffix"],
"value": "",
"button": "o-buttons o-buttons--secondary o-buttons--big",
"button": "demo-submit-button",
"id": "suffix"
}
},
Expand All @@ -81,9 +81,9 @@
},
"input": {
"type": "text",
"modifiers": [ "small", "suffix" ],
"modifiers": ["small", "suffix"],
"value": "",
"button": "o-buttons o-buttons--secondary",
"button": "demo-submit-small-button",
"id": "small-suffix"
}
},
Expand All @@ -94,7 +94,7 @@
"title": {
"main": "Shrunken title",
"prompt": "Vertically centered",
"modifiers": [ "shrink", "vertical-center" ]
"modifiers": ["shrink", "vertical-center"]
},
"input": {
"type": "text",
Expand Down
35 changes: 29 additions & 6 deletions components/o-forms/demos/src/demo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
@import "./../../main";
@import '@financial-times/o-fonts/main';
@include oFonts();
@import '@financial-times/o-buttons/main';
@include oButtons();
@import './../../main';
@import '@financial-times/o-normalise/main';
@import '@financial-times/o-private-foundation/main';
@include oNormalise();
body {
background: oColorsByUsecase(page, background);
Expand All @@ -14,6 +11,32 @@ body {
max-width: 500px;
}

.demo-submit-button {
@include oPrivateButtonsContent(
$opts: (
'type': 'primary',
'size': 'big',
)
);
}

.demo-submit-small-button {
@include oPrivateButtonsContent(
$opts: (
'type': 'primary',
)
);
}

.demo-submit-button-inverse {
@include oPrivateButtonsContent(
$opts: (
'type': 'primary',
'size': 'big',
)
);
}

.demo-inverse {
margin-top: 16px;
background-color: if(
Expand All @@ -31,7 +54,7 @@ body {
$custom-theme: (
controls-base: 'o3-color-palette-crimson',
controls-checked-base: 'o3-color-palette-white',
controls-border: 'o3-color-palette-crimson'
controls-border: 'o3-color-palette-crimson',
);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do love a trailing comma!


$icon-list: ('grid', 'list');
Expand Down
2 changes: 1 addition & 1 deletion components/o-forms/demos/src/interactive-suffix.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

<span class="o-forms-input o-forms-input--text o-forms-input--suffix">
<input id="suffix" type="text" name="text" value="" required>
<button class="o-buttons o-buttons--secondary o-buttons--big">Submit</button>
<button class="demo-submit-button">Submit</button>
</span>
</span>
</form>
2 changes: 1 addition & 1 deletion components/o-forms/demos/src/interactive.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,6 @@

<input id="hidden-demo" name="hidden-demo" type="hidden" value="123">

<button class="o-buttons o-buttons--secondary" type="submit">Let's get started</button>
<button class="demo-submit-button" type="submit">Let's get started</button>

</form>
2 changes: 1 addition & 1 deletion components/o-forms/demos/src/inverse-form-whitelabel.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@

<input id="hidden-demo" name="hidden-demo" type="hidden" value="123">

<button class="o-buttons o-buttons--primary o-buttons--inverse" type="submit">Let&apos;s get started</button>
<button class="demo-submit-button-inverse" type="submit">Let&apos;s get started</button>

</form>
</div>
2 changes: 1 addition & 1 deletion components/o-forms/demos/src/inverse-form.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@

<input id="hidden-demo" name="hidden-demo" type="hidden" value="123">

<button class="o-buttons o-buttons--primary o-buttons--inverse" type="submit">Let&apos;s get started</button>
<button class="demo-submit-button-inverse" type="submit">Let&apos;s get started</button>

</form>
</div>
4 changes: 1 addition & 3 deletions components/o-forms/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,7 @@
"@financial-times/o-utils": "^2.2.0"
},
"devDependencies": {
"@financial-times/o-buttons": "^7.8.0",
"@financial-times/o-colors": "^6.7.0",
"@financial-times/o-fonts": "^5.2.0",
"@financial-times/o-colors": "^6.7.0",
"@financial-times/o-normalise": "^3.3.0"
},
"engines": {
Expand Down
2 changes: 2 additions & 0 deletions components/o-forms/src/scss/_checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@
@include _oFormsControlsPseudoElements();
border: $_o-forms-border;
background-color: _oFormsGet('default-background');
border-radius: oPrivateFoundationGet('o3-border-radius-1');
}

&:after {
Expand All @@ -84,6 +85,7 @@
background-color: _oFormsGet('controls-base');
opacity: 0;
transition: opacity 0.1s ease;
border-radius: oPrivateFoundationGet('o3-border-radius-1');
}

// this handles spacing between two input__label spans for the same input element,
Expand Down
Loading
Loading