Update Source to 8.0.0 #12474
Open
Update Source to 8.0.0 #12474
+72
−69
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Hello 👋! When you're ready to run Chromatic, please apply the You will need to reapply the label each time you want to run Chromatic. |
jamesmockett
commented
Sep 30, 2024
| @@ -105,7 +105,7 @@ const MetaGridByline = ({ | |||
| padding-bottom: 0px; | |||
| } | |||
| address > div > span > svg:first-of-type { | |||
| address > div > span > div:first-of-type { | |||
There was a problem hiding this comment.
The DottedLines component in Source Development Kitchen has been updated to be rendered with CSS rather than as an SVG, therefore there's no longer an svg element to target here. This selector feels very fragile and the spacing would be better applied elsewhere, but I've left as is for now and simply updated the element it's targeting.
|
Size Change: -6.11 kB (-0.66%) Total Size: 917 kB
ℹ️ View Unchanged
|
jamesmockett
commented
Sep 30, 2024
Comment on lines
+17
to
+21
| > fieldset > div > div { | ||
| padding: 0; | ||
| align-items: center; | ||
| margin-bottom: ${space[2]}px; | ||
| } |
There was a problem hiding this comment.
The answer buttons would be better refactored to avoid needing to override so many radio button styles, but that feels like a separate task and out of scope for this update.
github-actions
bot
removed
the
run_chromatic
jamesmockett
force-pushed
the
jm/typography-and-css-override-updates
branch
from
9972637
to
7912051
Compare
Base automatically changed from
jm/typography-and-css-override-updates
to
main
September 30, 2024 14:08
jamesmockett
force-pushed
the
jm/source-v8
branch
from
d729375
to
b5d715a
Compare
github-actions
bot
removed
the
run_chromatic
jamesmockett
force-pushed
the
jm/source-v8
branch
from
b5d715a
to
f4cc50e
Compare
jamesmockett
force-pushed
the
jm/source-v8
branch
from
f4cc50e
to
85a3e58
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this change?
@guardian/sourceand@guardian/source-development-kitchento8.0.0.@guardian/braze-componentsto21.0.0@guardian/commercialto22.1.0These releases remove the deprecated typography API and disallow direct use of Emotion's
cssprop. A previous PR (#12465) removed remaining uses of the typography API and replaced with typography presets, and replaced incorrect usage of thecssprop withcssOverrides.Source now consistently includes the unit for
remvalues so these have been removed where previously added. This PR also contains some small styling tweaks to compensate for changes to layout and markup in Source components.Note
This is branched from #12465 which is currently set as the base branch so the diff only shows the changes made in this PR. Once merged the base branch can be changed back to
main.Source 6.1.0–8.0.0 release notes
8.0.0
Major Changes
33608e2: Disallows direct use of Emotion's
cssprop on Source components.If you need to override the internal styling of Source components, use
cssOverridesinstead.7.0.1
Patch Changes
7.0.0
Major Changes
238dfd3: Removes deprecated typography API.
In
@guardian/[email protected](2024-04-07), we added new web typography presets to standardise on the typographic language used by Design, and deprecated the old typography API.This release removes that old API, in order to simplify the ongoing maintenance of the library.
The following exports have been removed:
titlepieceheadlinebodytextSanstitlepieceSizesheadlineSizesbodySizestextSansSizesremTitlepieceSizesremHeadlineSizesremBodySizesremTextSansSizesfontsfontWeightslineHeightsbodyObjectStylesheadlineObjectStylestextSansObjectStylestitlepieceObjectStylesalong with the following
typeexports:ScaleUnitCategoryLineHeightFontWeightFontStyleFontWeightDefinitionOptionTypographySizesTypographyStylesTitlepieceSizesHeadlineSizesBodySizesTextSansSizesFsFontScaleFunctionFontScaleFunctionStrFontScaleArgsIf you cannot map existing uses of the old API to the new presets, please check which preset you should use with a designer.
447e6b6: Applies consistent spacing around checkboxes and radio buttons by removing conditional styles and using padding to ensure minimum height of 44px.
The external padding is now consistent regardless of the presence of a label and / or supporting text, and removes any inconsistency when these elements are stacked vertically.
Checkboxes and radio buttons are also now aligned with the first line of text when labels wrap on to multiple lines.
7805d16: Brings
remSize,remIconSize,remHeightandremWidthinto line withremSpace, by changing their values from anumber(of rems) to astringthat ends withremunits.pxToRemalso now returns a string withremunits, rather than anumberof rems.The sizes haven't changed, only the way they are exported.
Before
After
If you have been performing calculations with the old number values in JS, you can use the CSS
calcfunction instead:Before
After
Patch Changes
69ecc3f: Moves design tokens into
@guardian/sourceitself.Allows us to calculate
@guardian/source/foundationsvalues during build, rather than at the point of consumption, which relieves user's devices of this overhead and means the design tokens JSON will no longer be included in consumer's bundles.6.1.0
Minor Changes
headlineBold15,headlineLight15,headlineLightItalic15,headlineMedium15andheadlineMediumItalic15to the typography presetsSource Development Kitchen 6.0.0–8.0.0 release notes
8.0.0
Patch Changes
7.1.0
Minor Changes
tickercomponent7.0.1
Patch Changes
7.0.0
Major Changes
Updated peer dependency to
@guardian/[email protected]6.0.0
Major Changes
DottedLinesto render pattern with CSS rather than SVGWhy?
DCR has fallen several major versions behind. This brings us up-to-date and allows use of features and bug fixes added in later releases.