feat: introduce o-normalise to o-private-foundation #1864

frshwtr · 2024-11-06T14:55:40Z

Describe your changes

Issue ticket number and link

Link to Figma designs

Checklist before requesting a review

I have applied percy label for o-[COMPONENT] or chromatic label for o3-[COMPONENT] on my PR before merging and after review. Find more details in CONTRIBUTING.md
If it is a new feature, I have added thorough tests.
I have updated relevant docs.
I have updated relevant env variables in Doppler.

…rmalise

notlee · 2024-11-06T16:18:50Z

components/o-private-foundation/main.js

@@ -0,0 +1,12 @@
+import PrivateFoundation from './src/js/private-foundation.js';


Let's delete this and all JS

notlee · 2024-11-06T16:20:12Z

components/o-private-foundation/o-normalise/main.scss

+///     	'body': ('font-smoothing', 'focus', 'reduce-motion')
+///     ));
+/// @access public
+@mixin oNormalise($opts: (


As far as I know, no Origami component calls oNormalise so we can delete this?

Ah yes, I assumed stories were going to be updated to use private foundation, but it doesn't seem to matter so much in this case.

Yeah let's exclude demos/devDeps

notlee · 2024-11-06T16:25:22Z

components/o-private-foundation/o-normalise/src/scss/_mixins.scss

@@ -0,0 +1,312 @@
+/// Visually hide an element while still
+/// allowing it to be read by a screenreader
+@mixin oNormaliseVisuallyHidden {


@import makes all variables, mixins, and functions globally accessible. These will conflict with o-normalise as projects work to migrate to o3.

Which mixins, functions, and variables can we delete? We only need to keep them if they are called by other o2 components.

For those that remain, let's use @use but also rename for good measure. We'll need to make changes to Sass of other components and so it's probably better to keep them separate.

👍 I will prefix any of these remaining functions with oPrivate and kept the rest of the name the same.

notlee · 2024-11-06T16:27:17Z

components/o-typography/main.scss

@@ -4,7 +4,7 @@
 @import '@financial-times/o-fonts/main';
 @import '@financial-times/o-colors/main';
 @import '@financial-times/o-icons/main';
-@import '@financial-times/o-normalise/main';
+@import '@financial-times/o-private-foundation/o-normalise/main';


FYI o-typography, o-buttons, etc will become part of o-private-foundation. Based on changes proposed in other comments, it might be easier to leave their dependency on o-normalise for now until they are subsumed

…rmalise

notlee · 2024-11-11T15:08:00Z

components/o-private-foundation/o-normalise/src/scss/_mixins.scss

+///
+/// @param {String|Color} $color - The background colour of the focused element.
+@mixin oPrivateNormaliseFocusContentForElementColour($color) {
+	$black-contrast: oColorsGetContrastRatio($color, black);


Don't forget to add o-colors as a peerDependency until we move its reduced interface into private-foundations

notlee · 2024-11-11T15:11:06Z

components/o-private-foundation/o-normalise/src/scss/_variables.scss

+$o-normalise-is-silent: true !default;
+
+/// @access private
+$_o-normalise-focus-color: oColorsByUsecase('focus', 'outline', $fallback: null);


Could you confirm this is responding to brand correctly?

I had some trouble Thursday getting the global o-brand variable in the right place. As you're not passing it through at the use statement I think this will be defaulting to core.

Since you're namespacing anyway we might want to drop dart modules after all for the purposes of this...

notlee · 2024-11-11T15:11:26Z

components/o-private-foundation/src/tsx/private-foundation.tsx

@@ -0,0 +1,3 @@
+export function PrivateFoundation() {
+	return (<div className="o-private-foundation"data-o-component="o-private-foundation"></div>)


We don't need this.

notlee · 2024-11-13T10:59:47Z

components/o-autocomplete/main.scss

@@ -1,10 +1,11 @@
+@use '@financial-times/o-private-foundation/o-normalise/src/scss/_mixins' as normalise;


still using dart modules here

notlee · 2024-11-13T12:11:16Z

components/o-typography/stories/typography.scss

@@ -1,5 +1,5 @@
 @import "@financial-times/o-fonts/main";
-@import "@financial-times/o-normalise/main";
+@import "@financial-times/o-private-foundation/o-normalise/main";


We should leave o-normalise as a dev dependency for stories and demos, so they can use the full range of mixins including oNormalise

notlee · 2024-11-13T12:12:03Z

components/o-private-foundation/o-normalise/src/scss/_variables.scss

@@ -0,0 +1,8 @@
+@import "@financial-times/o-colors/main";
+/// Silent mode variable
+$o-normalise-is-silent: true !default;


This variable isn't needed

notlee · 2024-11-13T12:12:24Z

components/o-private-foundation/o-normalise/src/scss/_variables.scss

+
+/// @access private
+$_o-normalise-focus-color: oColorsByUsecase('focus', 'outline', $fallback: null);
+$_o-normalise-focus-ring: 0 0 0 4px oColorsByName('white'), 0 0 0 8px oColorsByName('black-70');


Sorry I didn't think before: These need to be namespaced also, they will clash with o-normalise currently

@use

* feat: introduce o-private-foundation * feat: introduce o-normalise to o-private-foundation * feat: use o-private-foundation in origami components * feat: introduce o-private-foundation * feat: introduce o-private-foundation * feat: introduce o-private-foundation * chore: revert stories to use o-normalise * chore: remove unused mixins and prefix remaining with private * feat: use o-private-foundation's o-normalise * fix: fix broken imports * fix: fix buttons * chore: use private foundation normalise * chore: revert typography and buttons changes * chore: correct errors * chore: update package-lock.json * chore: use main scss file * chore: use imports as final approach, include o-colors * chore: ensure private foundation is a peerDependency * chore: remove tsx files * chore: remove further cases of @use * chore: remove unecessary variable * chore: namespace variables * chore: ensure original o-normalise is used in demos --------- Co-authored-by: Lee Moody <[email protected]>

@use

* feat: introduce o-private-foundation (#1863) * feat: introduce o-private-foundation * feat: introduce o-private-foundation * backstage: Add Sass token target * backstage: Delete oPrivateFoundation mixin use, as it does not exist --------- Co-authored-by: Lee Moody <[email protected]> * feat: Add public function to get the current brand. * backstage: Map tokens to o2 brand pattern * backstage: Remove stories We decided to develop using traditional demos for this package, as the dev experience is better with Sass. We do not expect users to use this package * docs: Remove misleading SassDoc * backstage: Remove example css * feat: introduce o-normalise to o-private-foundation (#1864) * feat: introduce o-private-foundation * feat: introduce o-normalise to o-private-foundation * feat: use o-private-foundation in origami components * feat: introduce o-private-foundation * feat: introduce o-private-foundation * feat: introduce o-private-foundation * chore: revert stories to use o-normalise * chore: remove unused mixins and prefix remaining with private * feat: use o-private-foundation's o-normalise * fix: fix broken imports * fix: fix buttons * chore: use private foundation normalise * chore: revert typography and buttons changes * chore: correct errors * chore: update package-lock.json * chore: use main scss file * chore: use imports as final approach, include o-colors * chore: ensure private foundation is a peerDependency * chore: remove tsx files * chore: remove further cases of @use * chore: remove unecessary variable * chore: namespace variables * chore: ensure original o-normalise is used in demos --------- Co-authored-by: Lee Moody <[email protected]> * backstage: Add initial buttons support to o-private-foundations Takes o3-button and refactors to work in an o2 world. Slightly odd use of Sass/CSS Custom Properties, with Sass conditionals used to output duplicate CSS Custom Properties which override each other in the same declaration. This was the safest way to reuse o3 styles by effectively replacing class names for Sass if statements. It's also more readable and simple than o2 Sass. Despite duplicating some properties, CSS output and performance will be improved by moving away from the Origami Image Service for coloured icons. Currently supports: - Types - Themes - Sizes - Icons - Icons only Does not yet support: - Custom theme maps Will not support: - Outputting CSS granularly. There are not many buttons left in o2 components, and bundle size is reduced overall as noted above. Other things of note: - `o-private-foundation-get` allows other o2 components to grab tokens directly. - Added Metric2 variable font * backstage: Replace o-buttons with o-private-foundation in o-table * backstage: fix private button force-colors and family * backstage: Update private buttons to actually use type/theme argument * docs: Update components/o-private-foundation/src/scss/o-buttons/main.scss * feat: introduce o-private-foundation/o-grid * feat: use oPrivateGrid in o-header-services * feat: use oPrivateGrid in o-header-services * chore: use private grid mixins and functions across Origami * chore: namespace o-private-foundation/o-grid variables * backstage: Reduce use of Sass modules to prevent errors when importing multiple times via other components. * backstage: Update o-table to use latest o-private-foundation changes. * backstage: Remove o-buttons as an o-tabs dependency * backstage: Remove o-buttons as an o-header dependency * backstage: Remove o-buttons as an o-forms peer dependency * backstage: Throw in o-private-foundation if a token is not found * backstage: Remove o-buttons as an o-comments dependency * backstage: Remove o-buttons Sass import from o-header * Remove o-buttons as an o-message dependency (#1882) * backstage: Reduce use of Sass modules to prevent errors when importing multiple times via other components. * backstage: Update o-table to use latest o-private-foundation changes. * backstage: Remove o-buttons as an o-tabs dependency * backstage: Remove o-buttons as an o-header dependency * backstage: Remove o-buttons as an o-forms peer dependency * backstage: Throw in o-private-foundation if a token is not found * backstage: Remove o-buttons as an o-comments dependency * backstage: Reluctantly port custom button colour Sass, to support messaging components. * backstage: Remove o-buttons as an o-message dependency * chore: remove oPrivateGrid * chore: update comments * chore: add oPrivateGridRespondTo to sass lint rules * chore: remove o-pf-grid-is-silent * chore: import o-grid at root * chore: introduced grid JS to o-private-foundation * chore: hoist pf-grid-layouts from o-grid * chore: correct typo * chore: remove private-foundations * chore: align o-private-foundation/o-normalise directory structure (#1874) * chore: align file structure with confirmed convention * chore: fix lint errors * chore: add private foundation includes to sass lint config * chore: format o-multi-select/main.scss * fix: format files * fix: remove engine property from package.json * chore: remove private-foundations * chore: update normalise path * chore: fix lint rules * chore: fix lint rules * feat: introduce o visual effects (#1877) * feat: introduce and use o-private-foundation/o-visual-effects * chore: update package-lock.json * chore: move o-visual-effects, replace broken import * chore: conditially set public grid vars * chore: try conditionals * chore: use meta package * chore: use correct variable exists syntax * chore: use correct variable exists syntax * chore: correct build errors * chore: refactor variable name * chore: refactor build issues * chore: remove private spacing * chore: restore pf to variables --------- Co-authored-by: Lee Moody <[email protected]>

@use

* feat: introduce o-private-foundation (#1863) * feat: introduce o-private-foundation * feat: introduce o-private-foundation * backstage: Add Sass token target * backstage: Delete oPrivateFoundation mixin use, as it does not exist --------- Co-authored-by: Lee Moody <[email protected]> * feat: Add public function to get the current brand. * backstage: Map tokens to o2 brand pattern * backstage: Remove stories We decided to develop using traditional demos for this package, as the dev experience is better with Sass. We do not expect users to use this package * docs: Remove misleading SassDoc * backstage: Remove example css * chore: introduce variables * chore: introduce spacing functions * feat: introduce o-normalise to o-private-foundation (#1864) * feat: introduce o-private-foundation * feat: introduce o-normalise to o-private-foundation * feat: use o-private-foundation in origami components * feat: introduce o-private-foundation * feat: introduce o-private-foundation * feat: introduce o-private-foundation * chore: revert stories to use o-normalise * chore: remove unused mixins and prefix remaining with private * feat: use o-private-foundation's o-normalise * fix: fix broken imports * fix: fix buttons * chore: use private foundation normalise * chore: revert typography and buttons changes * chore: correct errors * chore: update package-lock.json * chore: use main scss file * chore: use imports as final approach, include o-colors * chore: ensure private foundation is a peerDependency * chore: remove tsx files * chore: remove further cases of @use * chore: remove unecessary variable * chore: namespace variables * chore: ensure original o-normalise is used in demos --------- Co-authored-by: Lee Moody <[email protected]> * feat: use oPrivateSpacing sass components * chore: align file structure with confirmed convention * chore: namespace variables * backstage: Add initial buttons support to o-private-foundations Takes o3-button and refactors to work in an o2 world. Slightly odd use of Sass/CSS Custom Properties, with Sass conditionals used to output duplicate CSS Custom Properties which override each other in the same declaration. This was the safest way to reuse o3 styles by effectively replacing class names for Sass if statements. It's also more readable and simple than o2 Sass. Despite duplicating some properties, CSS output and performance will be improved by moving away from the Origami Image Service for coloured icons. Currently supports: - Types - Themes - Sizes - Icons - Icons only Does not yet support: - Custom theme maps Will not support: - Outputting CSS granularly. There are not many buttons left in o2 components, and bundle size is reduced overall as noted above. Other things of note: - `o-private-foundation-get` allows other o2 components to grab tokens directly. - Added Metric2 variable font * backstage: Replace o-buttons with o-private-foundation in o-table * backstage: fix private button force-colors and family * backstage: Update private buttons to actually use type/theme argument * docs: Update components/o-private-foundation/src/scss/o-buttons/main.scss * fix: fix typo * fix: remove duplications * fix: remove engine property from package.json * fix: fix lint issues * fix: fix colors test assertions RGB values have been verified to match hex value * fix: remove unecessary normalise import * fix: oPrivateNormaliseApply to order sass rule * fix: fix sass lint errors * fix: use rgn in o-label sass tests * fix: lint o-multi-select sass * fix: update package-lock * backstage: Reduce use of Sass modules to prevent errors when importing multiple times via other components. * backstage: Update o-table to use latest o-private-foundation changes. * backstage: Remove o-buttons as an o-tabs dependency * backstage: Remove o-buttons as an o-header dependency * backstage: Remove o-buttons as an o-forms peer dependency * backstage: Throw in o-private-foundation if a token is not found * backstage: Remove o-buttons as an o-comments dependency * backstage: Remove o-buttons Sass import from o-header * Remove o-buttons as an o-message dependency (#1882) * backstage: Reduce use of Sass modules to prevent errors when importing multiple times via other components. * backstage: Update o-table to use latest o-private-foundation changes. * backstage: Remove o-buttons as an o-tabs dependency * backstage: Remove o-buttons as an o-header dependency * backstage: Remove o-buttons as an o-forms peer dependency * backstage: Throw in o-private-foundation if a token is not found * backstage: Remove o-buttons as an o-comments dependency * backstage: Reluctantly port custom button colour Sass, to support messaging components. * backstage: Remove o-buttons as an o-message dependency * chore: remove unecessary variables, use pf namespacing * chore: remove private-foundations * chore: remove duplicate keys * chore: align o-private-foundation/o-normalise directory structure (#1874) * chore: align file structure with confirmed convention * chore: fix lint errors * chore: add private foundation includes to sass lint config * chore: format o-multi-select/main.scss * fix: format files * fix: remove engine property from package.json * chore: remove private-foundations * chore: update normalise path * chore: fix lint rules * chore: fix lint rules * feat: introduce o visual effects (#1877) * feat: introduce and use o-private-foundation/o-visual-effects * chore: update package-lock.json * chore: move o-visual-effects, replace broken import * chore: update package lock * chore: run only one job at a time * chore: regen package lock * chore: regen package lock * chore: reintroduce relative units * chore: increase max-parallel to 4 --------- Co-authored-by: Lee Moody <[email protected]>

frshwtr added 2 commits November 6, 2024 14:07

feat: introduce o-private-foundation

4e922d8

feat: introduce o-normalise to o-private-foundation

fe6c0e5

frshwtr changed the base branch from main to 2025-release-private-foundation November 6, 2024 14:55

feat: use o-private-foundation in origami components

11d020f

frshwtr marked this pull request as ready for review November 6, 2024 15:05

frshwtr requested a review from a team as a code owner November 6, 2024 15:05

frshwtr requested a review from a team November 6, 2024 15:05

frshwtr requested review from a team as code owners November 6, 2024 15:05

notlee temporarily deployed to origami-webs-2025-relea-1uhccv November 6, 2024 15:07 Inactive

feat: introduce o-private-foundation

4db0a45

frshwtr force-pushed the 2025-release-private-foundation branch from 4e922d8 to 4db0a45 Compare November 6, 2024 15:45

frshwtr requested a review from ft-dependency-auto-merger as a code owner November 6, 2024 15:45

Merge branch '2025-release-private-foundation' into 2025-release-o-no…

7aae1b2

…rmalise

notlee temporarily deployed to origami-webs-2025-relea-1uhccv November 6, 2024 15:59 Inactive

notlee reviewed Nov 6, 2024

View reviewed changes

frshwtr and others added 3 commits November 7, 2024 10:50

feat: introduce o-private-foundation

21d2943

feat: introduce o-private-foundation

631a319

Merge branch '2025-release-private-foundation' into 2025-release-o-no…

7c65bed

…rmalise

notlee temporarily deployed to origami-webs-2025-relea-1uhccv November 7, 2024 10:54 Inactive

frshwtr force-pushed the 2025-release-private-foundation branch from 21d2943 to 631a319 Compare November 7, 2024 10:54

notlee force-pushed the 2025-release-private-foundation branch from 631a319 to 12ae399 Compare November 7, 2024 10:54

notlee temporarily deployed to origami-webs-2025-relea-1uhccv November 7, 2024 10:57 Inactive

chore: remove js

c3774b5

frshwtr force-pushed the 2025-release-o-normalise branch from 9775454 to c3774b5 Compare November 7, 2024 10:58

notlee temporarily deployed to origami-webs-2025-relea-1uhccv November 7, 2024 10:58 Inactive

Base automatically changed from 2025-release-private-foundation to 2025-release November 7, 2024 11:46

notlee temporarily deployed to origami-webs-2025-relea-jt6qfc November 11, 2024 13:46 Inactive

chore: update package-lock.json

9420271

notlee temporarily deployed to origami-webs-2025-relea-jt6qfc November 11, 2024 13:47 Inactive

notlee reviewed Nov 11, 2024

View reviewed changes

frshwtr added 3 commits November 12, 2024 11:07

chore: use main scss file

bec9aed

chore: Merge branch '2025-release' into 2025-release-o-normalise

70127b5

chore: use imports as final approach, include o-colors

fef3f08

notlee temporarily deployed to origami-webs-2025-relea-jt6qfc November 12, 2024 15:51 Inactive

chore: ensure private foundation is a peerDependency

565d645

notlee temporarily deployed to origami-webs-2025-relea-jt6qfc November 12, 2024 16:07 Inactive

chore: remove tsx files

8b5eac0

notlee reviewed Nov 13, 2024

View reviewed changes

notlee temporarily deployed to origami-webs-2025-relea-jt6qfc November 13, 2024 11:01 Inactive

chore: remove further cases of @use

36fbb06

notlee temporarily deployed to origami-webs-2025-relea-jt6qfc November 13, 2024 11:49 Inactive

notlee reviewed Nov 13, 2024

View reviewed changes

frshwtr added 2 commits November 13, 2024 13:56

chore: remove unecessary variable

b27ed12

chore: namespace variables

b43b5c7

notlee temporarily deployed to origami-webs-2025-relea-jt6qfc November 13, 2024 14:03 Inactive

chore: ensure original o-normalise is used in demos

226fc0c

notlee temporarily deployed to origami-webs-2025-relea-jt6qfc November 13, 2024 14:20 Inactive

notlee self-requested a review November 13, 2024 14:27

notlee approved these changes Nov 13, 2024

View reviewed changes

frshwtr merged commit 48c97b8 into 2025-release Nov 13, 2024
3 checks passed

frshwtr deleted the 2025-release-o-normalise branch November 13, 2024 14:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: introduce o-normalise to o-private-foundation #1864

feat: introduce o-normalise to o-private-foundation #1864

frshwtr commented Nov 6, 2024

notlee Nov 6, 2024

notlee Nov 6, 2024

frshwtr Nov 7, 2024

notlee Nov 7, 2024 •

edited

Loading

notlee Nov 6, 2024

frshwtr Nov 7, 2024

notlee Nov 6, 2024

notlee Nov 11, 2024

notlee Nov 11, 2024

notlee Nov 11, 2024

notlee Nov 13, 2024

notlee Nov 13, 2024

notlee Nov 13, 2024

notlee Nov 13, 2024

		@@ -0,0 +1,12 @@
		import PrivateFoundation from './src/js/private-foundation.js';

		@@ -0,0 +1,3 @@
		export function PrivateFoundation() {
		return (<div className="o-private-foundation"data-o-component="o-private-foundation"></div>)

		@@ -1,10 +1,11 @@
		@use '@financial-times/o-private-foundation/o-normalise/src/scss/_mixins' as normalise;

feat: introduce o-normalise to o-private-foundation #1864

feat: introduce o-normalise to o-private-foundation #1864

Conversation

frshwtr commented Nov 6, 2024

Describe your changes

Issue ticket number and link

Link to Figma designs

Checklist before requesting a review

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

notlee Nov 7, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

notlee Nov 7, 2024 •

edited

Loading