Add maxWidth prop & containerXL support to various components #1921
Conversation
🦋 Changeset detectedLatest commit: d0d9912 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
| css={packs.print.hidden} | ||
| css={[ | ||
| { | ||
| height: '100%', |
There was a problem hiding this comment.
This ensures the right content is the same height as the logo should users want to centre something
docs/next-env.d.ts
Outdated
| @@ -2,4 +2,4 @@ | |||
| /// <reference types="next/image-types/global" /> | |||
|
|
|||
| // NOTE: This file should not be edited | |||
| // see https://nextjs.org/docs/basic-features/typescript for more information. | |||
| // see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. | |||
There was a problem hiding this comment.
These keep changing, so adding them
| mq, | ||
| packs, |
There was a problem hiding this comment.
Adding packs to be used in playroom and docs editors
| ) { | ||
| return mapResponsiveProp( | ||
| maxWidth, | ||
| // @ts-expect-error stowey |
There was a problem hiding this comment.
I don't know how to get rid of this TS error:
Element implicitly has an 'any' type because expression of type 'NonNullable<string | number | undefined>' can't be used to index type '{ readonly bodyText: "42em"; readonly container: "80rem"; readonly containerXL: "120rem"; readonly field: { readonly xs: "5rem"; readonly sm: "8rem"; readonly md: "13rem"; readonly lg: "18rem"; readonly xl: "24rem"; }; }'.
No index signature with a parameter of type 'string' was found on type '{ readonly bodyText: "42em"; readonly container: "80rem"; readonly containerXL: "120rem"; readonly field: { readonly xs: "5rem"; readonly sm: "8rem"; readonly md: "13rem"; readonly lg: "18rem"; readonly xl: "24rem"; }; }'.ts(7053)
I hoped creating this function would do it, but nah. If a custom function is unnecessary, then doing the value mapping on L392 would be preferable
There was a problem hiding this comment.
When the object lookup on L345 occurs, TypeScript thinks value is any string (despite your efforts to tell it otherwise - it's conflating all the specific strings from MaxWidth with the broader string type). So, you still need to convince TypeScript that you're only passing a key of tokens.maxWidth in during that lookup. I think your best bet is a guard clause.
L392 can be:
maxWidth: mapResponsiveProp(maxWidth, (value) => (isKeyOfMaxWidth(value) && tokens.maxWidth[value]) || value),And you can replace mapMaxWidth with the isKeyOfMaxWidth guard clause:
const isKeyOfMaxWidth = (value: string | number | undefined): value is MaxWidth =>
!!value && value in tokens.maxWidth;
|
stowball
changed the title
A request is to allow our page components to support wider screens up to 1920px. This PR adds a new
containerXLtoken andmaxWidthprop to the various page components to support this.I have made the standard
maxWidthprop support tokens and overridden themaxWidthof these components to obfuscate where the actualy token gets applied.Playroom demo
View preview
Checklist
Preflight
accordion: Updated paddingordocs: Updated header linksyarn changeset. Learn more about change management.Testing
yarn testto ensure tests are passing. If required, runyarn test -uto update any generated snapshots.