feat: Add size prop to `Typography.Text` component #262

ajenkins-mparticle · 2024-06-04T11:16:56Z

Instructions

PR target branch should be against main
PR title name should follow this format: https://github.com/mParticle/mparticle-workflows/blob/main/.github/workflows/pr-title-check.yml
PR branch prefix should follow this format: https://github.com/mParticle/mparticle-workflows/blob/main/.github/workflows/pr-branch-check-name.yml

Summary

EAMES specifies a size for a Text component.

Testing Plan

Was this tested locally? If not, explain why.
Tested in storybook, using a control. Default behaviour (base) is preserved so it's backwards compat.

Reference Issue (For mParticle employees only. Ignore if you are an outside contributor)

Closes https://go.mparticle.com/work/REPLACEME

src/components/general/Typography/Typography.tsx

tibuurcio

Only 1 thought on config providers, but looks good. Nice work.

tibuurcio · 2024-06-10T18:01:03Z

src/components/general/Typography/Typography.tsx

+    <ConfigProvider>
+      <AntConfigProvider theme={{ components: { Typography: { fontSize, lineHeight } } }}>
+        <AntTypography.Text {...props}>{props.children}</AntTypography.Text>
+      </AntConfigProvider>
+    </ConfigProvider>


thought interesting use case cause we need to have 2 config providers. We might want to have a way to merge config providers in the future so that we only need to use one here. Maybe our ConfigProvider could provide as an export of the props it uses. Looks like currently it's only theme={LightTheme} and then we would be able to merge it somehow.

We could investigate this when we get to work on a better way of using the ConfigProvider.

We don't need to have 2 ConfigProviders, the outer one in this component shouldn't exist, but that's a PR for a different time and not an easily made change. Well, actually it might be a simple change, but in order to understand if it's a simple change I need to find out everywhere where Typography.Text is used in aquarium consuming applications.

The second ConfigProvider is needed here - the theme will be inherited from the top level one, no problem there - as it's the thing that sizes the Typography.

well luckily the typography component is still not used much in the aquarium or userland, i see 0 usages in indicative and cortex, and 3 in nancy
IncludeExcludeExpression.tsx
IncludeExcludeContainer.tsx
SetPredictionRange.tsx [only in my current working branch]

src/components/general/Typography/Typography.tsx

jared-dickman · 2024-06-11T14:59:10Z

src/components/general/Typography/Typography.tsx

+  if (size === 'base') return 14
+  if (size === 'sm') return 12
+  if (size === 'lg') return 16
+  return 20


is this the same as xl, the default? if so thats a bit unclear, and would suggest making a default prop value like Icon.tsx

oh its using a default prop inside the param size = 'base' 🤔

jared-dickman · 2024-06-11T15:00:25Z

src/components/general/Typography/Typography.tsx

+  return 1.4
+}
+
+const Text = ({ size = 'base', ...props }: ITextProps) => {


thinking id prefer to move the default props into defaultProps so the prop param can "do one thing" and just be a param 😄

Do you mean like

Text.defaultProps = { ...theDefaults } ````?

Oh yes, I can see from your comment above.

This is the preferred way to declare defaultProps for default values for functional components (not class components) and it has been for some time.

https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#deprecate-defaultprops-on-function-components
facebook/react#16210

Does aquarium still prefer the old way?

Actually, I just went to check react's codebase - it's not a preference anymore, it's a deprecation of support

https://github.com/search?q=repo%3Afacebook%2Freact%20%22Support%20for%20defaultProps%22&type=code

damn i hadnt heard that! guess it makes sense to keep all prop-things together. can you create a TD ticket to update the icon and any other defaultProps

# [1.18.0-fix-release-config.1](v1.17.0...v1.18.0-fix-release-config.1) (2024-06-12) ### Bug Fixes * add icons for overview map ([#275](#275)) ([a4bb97d](a4bb97d)) * remove hover effect on active state ([#278](#278)) ([9f89fa1](9f89fa1)) ### Features * Add size prop to `Typography.Text` component ([#262](#262)) ([0c14f00](0c14f00)) * query select number ([#268](#268)) ([13dc864](13dc864)) * update design tokens ([#273](#273)) ([ac2b442](ac2b442))

mparticle-automation · 2024-06-12T18:39:07Z

🎉 This PR is included in version 1.18.0-fix-release-config.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

# [1.18.0](v1.17.0...v1.18.0) (2024-06-12) ### Bug Fixes * add icons for overview map ([#275](#275)) ([a4bb97d](a4bb97d)) * remove hover effect on active state ([#278](#278)) ([9f89fa1](9f89fa1)) ### Features * Add size prop to `Typography.Text` component ([#262](#262)) ([0c14f00](0c14f00)) * query select number ([#268](#268)) ([13dc864](13dc864)) * update design tokens ([#273](#273)) ([ac2b442](ac2b442))

mparticle-automation · 2024-06-12T18:52:02Z

🎉 This PR is included in version 1.18.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

# 1.0.0-fix-semantic-release.1 (2024-10-28) ### Bug Fixes * Design tokens update + icons alignment fix ([#460](#460)) ([9c93165](9c93165)) * a useEffect Hook has been added to detect if the value received … ([#339](#339)) ([0e1ab5d](0e1ab5d)) * active workspace style ([#148](#148)) ([a276806](a276806)) * add current color fill to icon ([#374](#374)) ([12c698c](12c698c)) * add horizontal gap in suite selector ([#391](#391)) ([74a43d0](74a43d0)) * add icons ([#399](#399)) ([3343c26](3343c26)) * add icons for overview map ([#275](#275)) ([a4bb97d](a4bb97d)) * Add Icons in Aquarium ([#395](#395)) ([d554ed5](d554ed5)) * add info icon ([#381](#381)) ([d3aa957](d3aa957)) * add more icon ([#403](#403)) ([3abc3b7](3abc3b7)) * add new icons ([#380](#380)) ([db88c4e](db88c4e)) * add width auto to be able to manage the wdith from the component ([#368](#368)) ([b47c45f](b47c45f)) * button-alligned center ([#287](#287)) ([d8c056d](d8c056d)) * **cascader:** makes cascader use the aquarium configprovider and theme ([21800e2](21800e2)) * correct QueryItem Cascader and Action cosmetic bugs/flaws ([f5e6032](f5e6032)) * correct usage of Typography in Watermark.stories.tsx ([f8b32cb](f8b32cb)) * ensure PostCSS handles CSS unnesting in Vite config ([#457](#457)) ([1978e65](1978e65)) * export notification center props ([#418](#418)) ([2ea78c2](2ea78c2)) * exported types ([#448](#448)) ([a978175](a978175)) * fix broken stories due to typography update ([d64be86](d64be86)) * fix issue on prettifier ([#446](#446)) ([03668b6](03668b6)) * fix QueryItem.ValueSelector.Cascader's selectedDisplayValue type ([e74053d](e74053d)) * fixes path to be / on UPS cookie creation options ([#240](#240)) ([0cebf44](0cebf44)) * hide expand icon in global navigation lists ([#178](#178)) ([edd21db](edd21db)) * hide minimap after user clicks on a button ([#264](#264)) ([21a399c](21a399c)) * icon color not changing on button hover ([#363](#363)) ([aa07067](aa07067)) * Icon component build issue ([d7e2faf](d7e2faf)) * improve workspace selector performace ([#370](#370)) ([590e231](590e231)) * Input now support refs ([#169](#169)) ([20a7e47](20a7e47)) * **input:** wraps Input.Search in Aquarium ConfigProvider ([0fbba18](0fbba18)) * lazy load ValueSelector to fix Storybook test runner ([#298](#298)) ([4cd501b](4cd501b)) * **lint:** fix linting problems ([c343136](c343136)) * make onChange prop of QueryItem InputText optional ([7a1532f](7a1532f)) * make QueryItem Cascader options reactive ([50f11bc](50f11bc)) * make the workspace-selector label smaller ([#359](#359)) ([05c4338](05c4338)) * minor compatibility changes to QueryItem Qualifier and Cascader ([5065bdd](5065bdd)) * minor tweaks to TextInput to make it fully compatible ([be5deab](be5deab)) * nav link target ([#166](#166)) ([092a3aa](092a3aa)) * **NavigationSearch:** swaps Ctrl for Cmd on Macs ([a0b7d63](a0b7d63)) * notification center export z-index ([#422](#422)) ([ce01227](ce01227)) * PR review suggestions ([f1ed504](f1ed504)) * **queryitem:** change Input.Search to Input in Cascader's popover to prevent preact type error ([80b1469](80b1469)) * remove -t patch from sem release ([fa41baa](fa41baa)) * remove \dist files accidentally committed ([ef5a16b](ef5a16b)) * remove circle-dashed.svg, it's a duplicate ([aac4829](aac4829)) * remove hover effect on active state ([#278](#278)) ([9f89fa1](9f89fa1)) * remove LESS syntax from query-item.css ([643402c](643402c)) * rename icons ([#364](#364)) ([223c47d](223c47d)) * Revert design tokens update ([#361](#361)) ([cd9dbc9](cd9dbc9)) * rollback variables/style ([#310](#310)) ([efcaf5c](efcaf5c)) * signout onclick being triggered on render when there are no orgs ([#337](#337)) ([77f2b1a](77f2b1a)) * style build missing custom rules ([#147](#147)) ([3a66b26](3a66b26)) * sub menu links should open the correct herf ([#167](#167)) ([6b52fea](6b52fea)) * **typography:** fix exporting/structure of Typography and its subtypes ([cd097f8](cd097f8)) * unnest css ([#390](#390)) ([03d3ccb](03d3ccb)) * unnesting minimap styles ([#253](#253)) ([067f24d](067f24d)) * update design tokens ([#375](#375)) ([e818591](e818591)) * update empty component ([#371](#371)) ([655e252](655e252)) * update icons that did not obey the color prop ([#445](#445)) ([68006e3](68006e3)) * update more typography stories ([cd3344c](cd3344c)) * update nav link active background color ([#376](#376)) ([3965e60](3965e60)) * update release.config.cjs ([859b3bb](859b3bb)) * update release.config.cjs tag format version ([93ee2ec](93ee2ec)) * update release.yml to test semantic release ([5dcf0a7](5dcf0a7)) * use semantic release token ([7af705c](7af705c)) * use unique tags ([61d7886](61d7886)) * workspace selector positioning ([#338](#338)) ([9561a49](9561a49)) * **workspaceselector:** fix key duplication in the WorkspaceSelector ([2967c68](2967c68)) * **workspaceselector:** fix performance problems by swapping Antd Menu component with native ul ([8a0257b](8a0257b)) * yet more typography corrections ([81fce66](81fce66)) ### Features * add Action QueryItem ([f76ea2b](f76ea2b)) * add datepicker example ([#408](#408)) ([0b4b46b](0b4b46b)) * Add directory icon ([#319](#319)) ([a2b4132](a2b4132)) * add Help Icon ([6bae0ed](6bae0ed)) * Add links to the minimap ([#246](#246)) ([80bd00c](80bd00c)) * add loadData functionality to QueryItem Cascader ([ced4994](ced4994)) * add lock/unlock icons; rename previous lock to paywall ([#340](#340)) ([eaf6998](eaf6998)) * add mp colors to storybook and remove token to css from pre com… ([#405](#405)) ([40dffbf](40dffbf)) * add notification center ([#416](#416)) ([4c44206](4c44206)) * Add notification icon ([#345](#345)) ([2c9d13e](2c9d13e)) * add overview dt icon ([#362](#362)) ([78d7854](78d7854)) * add placeholder to QueryItem's TextInput ([30bde49](30bde49)) * add premiumDt icon ([#346](#346)) ([b3e2817](b3e2817)) * add prettifier ([#404](#404)) ([a99793f](a99793f)) * add QueryItem-related icons ([89fb3b8](89fb3b8)) * add QueryItem.Text component ([8f0b7bd](8f0b7bd)) * Add size prop to `Typography.Text` component ([#262](#262)) ([0c14f00](0c14f00)) * add value props to Qualifier and Cascader ([16042d7](16042d7)) * add variants to icons ([#355](#355)) ([1112674](1112674)) * add workspace label to Workspace Selector ([#323](#323)) ([bdb3c70](bdb3c70)) * Adds stylelint with recommended configs and rules from Indicative ([#82](#82)) ([4dd5380](4dd5380)) * Adds SuitesReminder hook to get a consistent look across platforms for the reminder notification ([#221](#221)) ([533428e](533428e)) * Allow importing types ([#65](#65)) ([7fe8981](7fe8981)) * Allow override theme for ConfigProvider ([#354](#354)) ([29cc614](29cc614)) * Allows publishing npm versions from feature branches ([#186](#186)) ([044c117](044c117)) * Allows publishing on dev branch/distribution channel ([#162](#162)) ([39530fa](39530fa)) * allows UPS to receive cookie config options ([#261](#261)) ([8ab9ce9](8ab9ce9)) * ant design system ([#9](#9)) ([7c0f090](7c0f090)) * ant upgrade to 5.20 ([#421](#421)) ([49b4bf8](49b4bf8)) * components ([#33](#33)) ([78dfb17](78dfb17)) * Exports bundle without libs (React, Antd) and TS types ([#76](#76)) ([5dbb9df](5dbb9df)) * first story with a simple component and directory structure with readmes ([a60b9b8](a60b9b8)) * focus workspace on icon click ([#163](#163)) ([cea91cd](cea91cd)) * global navigation and styling ([#124](#124)) ([7863d9a](7863d9a)) * icons placeholder ([#385](#385)) ([2503af1](2503af1)) * **icons:** export icons from the Aquarium ([dde4db2](dde4db2)) * install vitest unit test runner ([#143](#143)) ([2ad4075](2ad4075)) * intial add of QueryItem.ValueSelector.Cascader ([c022aa2](c022aa2)) * minimap active state ([#263](#263)) ([ae9a2b0](ae9a2b0)) * move minimap to suite logo ([#369](#369)) ([f2d2437](f2d2437)) * new icons ([#239](#239)) ([a1bfb88](a1bfb88)) * New storybook documentation structure ([#419](#419)) ([1a870bc](1a870bc)) * Organize component directories by type ([#16](#16)) ([6ad046d](6ad046d)) * query select number ([#268](#268)) ([13dc864](13dc864)) * **queryitem:** adding onchange and converting error danger zone text ([91e945f](91e945f)) * **queryitem:** adding QueryItem.Qualifier component ([1fe60d8](1fe60d8)) * **queryitem:** updating styles and adding error message to qualifier ([fa8a8da](fa8a8da)) * replace minimap with suiteSelector component ([#383](#383)) ([2ab27ca](2ab27ca)) * rework Cascader OnChange ([a77c44f](a77c44f)) * Storybook Testing ([#42](#42)) ([876c231](876c231)) * Tag component stories ([#68](#68)) ([4831b25](4831b25)) * update design tokens ([#273](#273)) ([ac2b442](ac2b442)) * update SuiteLogo in GlobalNav to render nav switcher Tour ([#367](#367)) ([a3920af](a3920af)) * UPS code ported from Nancy ([#207](#207)) ([cc153af](cc153af)) * wrap radio group and button components ([#282](#282)) ([6e67439](6e67439))

ajenkins-mparticle commented Jun 4, 2024

View reviewed changes

src/components/general/Typography/Typography.tsx Outdated Show resolved Hide resolved

ajenkins-mparticle marked this pull request as ready for review June 4, 2024 12:44

ajenkins-mparticle requested review from jared-dickman, gabrielmarquesf, tibuurcio, Seebiscuit, gabyzif and ZoeAstra June 4, 2024 12:44

ajenkins-mparticle commented Jun 5, 2024

View reviewed changes

src/components/general/Typography/Typography.tsx Outdated Show resolved Hide resolved

ajenkins-mparticle force-pushed the feat/typography-size branch from ef602a3 to ae81de1 Compare June 6, 2024 09:04

jared-dickman approved these changes Jun 6, 2024

View reviewed changes

tibuurcio approved these changes Jun 10, 2024

View reviewed changes

ajenkins-mparticle force-pushed the feat/typography-size branch from 08605b7 to af792c0 Compare June 10, 2024 22:12

ajenkins-mparticle requested review from tibuurcio and jared-dickman June 10, 2024 22:13

tibuurcio reviewed Jun 11, 2024

View reviewed changes

src/components/general/Typography/Typography.tsx Show resolved Hide resolved

ajenkins-mparticle added 4 commits June 11, 2024 11:43

Add size prop to Typography.Text component

3b55bee

Use tokens as prescribed

7295d11

Hardcode values from EAMES until we get Typography tokens

4930ae8

Add TODO

a5ea9c7

ajenkins-mparticle force-pushed the feat/typography-size branch from 0c03e35 to a5ea9c7 Compare June 11, 2024 14:43

tibuurcio approved these changes Jun 11, 2024

View reviewed changes

jared-dickman reviewed Jun 11, 2024

View reviewed changes

ajenkins-mparticle merged commit 0c14f00 into main Jun 11, 2024
10 of 11 checks passed

mparticle-automation added the released on @fix label Jun 12, 2024

mparticle-automation added the released label Jun 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add size prop to `Typography.Text` component #262

feat: Add size prop to `Typography.Text` component #262

ajenkins-mparticle commented Jun 4, 2024 •

edited

Loading

tibuurcio left a comment

tibuurcio Jun 10, 2024

ajenkins-mparticle Jun 11, 2024 •

edited

Loading

jared-dickman Jun 11, 2024

jared-dickman Jun 11, 2024

jared-dickman Jun 11, 2024

jared-dickman Jun 11, 2024

ajenkins-mparticle Jun 11, 2024

ajenkins-mparticle Jun 11, 2024 •

edited

Loading

ajenkins-mparticle Jun 11, 2024

jared-dickman Jun 11, 2024

mparticle-automation commented Jun 12, 2024

mparticle-automation commented Jun 12, 2024

feat: Add size prop to Typography.Text component #262

feat: Add size prop to Typography.Text component #262

Conversation

ajenkins-mparticle commented Jun 4, 2024 • edited Loading

Instructions

Summary

Testing Plan

Reference Issue (For mParticle employees only. Ignore if you are an outside contributor)

tibuurcio left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ajenkins-mparticle Jun 11, 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

ajenkins-mparticle Jun 11, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mparticle-automation commented Jun 12, 2024

mparticle-automation commented Jun 12, 2024

feat: Add size prop to `Typography.Text` component #262

feat: Add size prop to `Typography.Text` component #262

ajenkins-mparticle commented Jun 4, 2024 •

edited

Loading

ajenkins-mparticle Jun 11, 2024 •

edited

Loading

ajenkins-mparticle Jun 11, 2024 •

edited

Loading