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

Jump to bottom

feat: Encourage response font sizes #357

Merged
merged 2 commits into from
Nov 30, 2023
Merged

feat: Encourage response font sizes #357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cb84f03
feat: Encourage response font sizes
VickyKoblinski Nov 8, 2023
c48a197
fix: ENCS-4466 Fixed breakpoints and addressed comments
jameslu-e4s Nov 30, 2023
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
15 changes: 4 additions & 11 deletions src/_foundations/Typography/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,9 @@ import { Grid, IconButton, Tooltip, Typography } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { Variant } from '@mui/material/styles/createTypography';
import { Meta, StoryObj } from '@storybook/react';
import { compact, isPlainObject, isString, sortBy } from 'lodash';
import { compact, isPlainObject } from 'lodash';
import React from 'react';

import pxToNumber from '@actinc/dls/helpers/pxToNumber';
import { Px } from '@actinc/dls/types';

import {
StyledCode,
StyledDivider,
Expand All @@ -40,6 +37,7 @@ const Story = (): React.ReactElement => {

const variants = compact(
Object.keys(typography).map((key: string) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if (isPlainObject((typography as any)[key])) {
return key as Variant;
}
Expand All @@ -48,13 +46,7 @@ const Story = (): React.ReactElement => {
}),
).filter((v: string): boolean => v !== 'allVariants');

const sortedVariants = sortBy(variants, v => {
const fontSize = typography[v].fontSize;

return fontSize && isString(fontSize)
? pxToNumber(fontSize as Px)
: fontSize;
}).reverse();
joncursi marked this conversation as resolved.
Show resolved Hide resolved
const sortedVariants = variants;
Copy link

Choose a reason for hiding this comment

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

Can we get rid of this variable now that it's the same as variants? The name is now a little misleading.


return (
<>
Expand All @@ -75,6 +67,7 @@ const Story = (): React.ReactElement => {
<>
{Object.keys(properties).map(
(key): React.ReactElement => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const cssStyle = (properties as any)[key];
const value = typography[variant][key];

Expand Down
4 changes: 2 additions & 2 deletions src/components/Alert/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ exports[`Alert ENCOURA_CLASSIC theme matches the snapshot 1`] = `
exports[`Alert ENCOURAGE theme matches the snapshot 1`] = `
<div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-standardInfo MuiAlert-standard css-tw8vhd-MuiPaper-root-MuiAlert-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-standardInfo MuiAlert-standard css-cpfl3m-MuiPaper-root-MuiAlert-root"
role="alert"
>
<div
Expand All @@ -130,7 +130,7 @@ exports[`Alert ENCOURAGE theme matches the snapshot 1`] = `
class="MuiAlert-message css-1pxa9xg-MuiAlert-message"
>
<div
class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom MuiAlertTitle-root css-7fdefg-MuiTypography-root-MuiAlertTitle-root"
class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom MuiAlertTitle-root css-1pufft8-MuiTypography-root-MuiAlertTitle-root"
>
Title Here
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/AppBarNavigation/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ exports[`AppBarNavigation ENCOURAGE theme matches the snapshot 1`] = `
to="#"
>
<p
class="MuiTypography-root MuiTypography-body1 css-juuzfu-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 css-1s8n9o2-MuiTypography-root"
>
Home
</p>
Expand All @@ -197,7 +197,7 @@ exports[`AppBarNavigation ENCOURAGE theme matches the snapshot 1`] = `
to="#"
>
<p
class="MuiTypography-root MuiTypography-body1 css-1j7rahv-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 css-44715f-MuiTypography-root"
>
Other Page
</p>
Expand Down
72 changes: 36 additions & 36 deletions src/components/DataTable/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1179,7 +1179,7 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
class="MuiTableContainer-root css-rorn0c-MuiTableContainer-root"
>
<table
class="MuiTable-root css-s28p6d-MuiTable-root"
class="MuiTable-root css-11wan23-MuiTable-root"
>
<thead
class="MuiTableHead-root css-15wwp11-MuiTableHead-root"
Expand All @@ -1188,12 +1188,12 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
class="MuiTableRow-root MuiTableRow-head css-1kuw6lo-MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-ybk42f-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-1r69k76-MuiTableCell-root"
color="default"
style="width: 50px;"
>
<p
class="MuiTypography-root MuiTypography-body1 css-lex51e-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 css-1xw3xkx-MuiTypography-root"
>
ID
</p>
Expand Down Expand Up @@ -1228,12 +1228,12 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
</div>
</td>
<td
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-pri5bu-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-mykn97-MuiTableCell-root"
color="default"
style="width: 100px;"
>
<p
class="MuiTypography-root MuiTypography-body1 css-lex51e-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 css-1xw3xkx-MuiTypography-root"
>
Name
</p>
Expand Down Expand Up @@ -1267,12 +1267,12 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
</div>
</td>
<td
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-pri5bu-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-mykn97-MuiTableCell-root"
color="default"
style="width: 100px;"
>
<p
class="MuiTypography-root MuiTypography-body1 css-lex51e-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 css-1xw3xkx-MuiTypography-root"
>
Field A
</p>
Expand Down Expand Up @@ -1306,12 +1306,12 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
</div>
</td>
<td
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-pri5bu-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-mykn97-MuiTableCell-root"
color="default"
style="width: 100px;"
>
<p
class="MuiTypography-root MuiTypography-body1 css-lex51e-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 css-1xw3xkx-MuiTypography-root"
>
Field B
</p>
Expand Down Expand Up @@ -1345,12 +1345,12 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
</div>
</td>
<td
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-pri5bu-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-mykn97-MuiTableCell-root"
color="default"
style="width: 100px;"
>
<p
class="MuiTypography-root MuiTypography-body1 css-lex51e-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 css-1xw3xkx-MuiTypography-root"
>
Field C
</p>
Expand Down Expand Up @@ -1392,31 +1392,31 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
class="MuiTableRow-root MuiTableRow-hover css-1kuw6lo-MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 50px;"
>
1
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Item 1
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Field A1
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Field B1
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Field C1
Expand All @@ -1426,31 +1426,31 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
class="MuiTableRow-root MuiTableRow-hover css-1kuw6lo-MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 50px;"
>
2
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Item 2
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Field A2
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Field B2
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Field C2
Expand All @@ -1460,31 +1460,31 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
class="MuiTableRow-root MuiTableRow-hover css-1kuw6lo-MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 50px;"
>
3
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Item 3
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Field A3
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Field B3
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Field C3
Expand All @@ -1494,31 +1494,31 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
class="MuiTableRow-root MuiTableRow-hover css-1kuw6lo-MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 50px;"
>
4
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Item 4
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Field A4
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Field B4
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Field C4
Expand All @@ -1528,31 +1528,31 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
class="MuiTableRow-root MuiTableRow-hover css-1kuw6lo-MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 50px;"
>
5
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Item 5
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Field A5
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Field B5
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
style="width: 100px;"
>
Field C5
Expand Down
4 changes: 2 additions & 2 deletions src/components/EmptyState/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,14 +124,14 @@ exports[`EmptyState ENCOURAGE theme matches the snapshot 1`] = `
class="MuiGrid-root MuiGrid-item css-196vuex-MuiGrid-root"
>
<h6
class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-fafcxn-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-ii47vv-MuiTypography-root"
>
Title
</h6>
</div>
</div>
<p
class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-nl94jt-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-1q1dllr-MuiTypography-root"
>
Description
</p>
Expand Down
2 changes: 1 addition & 1 deletion src/components/FormCheckbox/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ exports[`FormCheckbox ENCOURAGE theme matches the snapshot 1`] = `
/>
</span>
<span
class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-1hg1gry-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-s6twv8-MuiTypography-root"
>
The label
</span>
Expand Down
4 changes: 2 additions & 2 deletions src/components/FormInput/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ exports[`FormInput ENCOURAGE theme matches the snapshot 1`] = `
class="MuiFormControl-root css-jayakb-MuiFormControl-root"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-rsrurj-MuiFormLabel-root-MuiInputLabel-root"
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-j635u4-MuiFormLabel-root-MuiInputLabel-root"
data-shrink="true"
>
<div
Expand All @@ -122,7 +122,7 @@ exports[`FormInput ENCOURAGE theme matches the snapshot 1`] = `
</div>
</label>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-1xuytew-MuiInputBase-root-MuiInput-root"
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-zr16f5-MuiInputBase-root-MuiInput-root"
>
<input
aria-invalid="false"
Expand Down
Loading