Skip to content

More form fixes #83

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

Merged
merged 7 commits into from
Apr 25, 2025
Merged

More form fixes #83

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7bd43e3
export more styled components
TomWoodward Apr 22, 2025
a2e4cb1
version
TomWoodward Apr 22, 2025
98324b2
export button style helpers
TomWoodward Apr 22, 2025
d008f63
:camera:
TomWoodward Apr 22, 2025
a1fa3e9
:shirt:
TomWoodward Apr 24, 2025
a1a7fb6
rems for button style
TomWoodward Apr 24, 2025
e31fb2f
:camera:
TomWoodward Apr 25, 2025
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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@openstax/ui-components",
"version": "1.15.4",
"version": "1.16.0-pre2",
"license": "MIT",
"source": "./src/index.ts",
"types": "./dist/index.d.ts",
Expand Down
34 changes: 16 additions & 18 deletions src/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import styled, {css} from "styled-components";
import theme from '../../src/theme';
import { applyButtonVariantStyles, ButtonVariant } from "../theme/buttons";

const StyledButton = styled.button<{ variant: ButtonVariant }>`
${props => applyButtonVariantStyles(props.variant)}
export { applyButtonVariantStyles };
export const buttonCss = css<{variant?: ButtonVariant}>`
${props => applyButtonVariantStyles(props.variant || 'primary')}

font-size: 1.6rem;
line-height: 2rem;
Expand All @@ -23,13 +24,6 @@ const StyledButton = styled.button<{ variant: ButtonVariant }>`
user-select: none;
white-space: nowrap;

${props => props.variant === 'primary' ? `
&:focus {
outline: solid ${theme.colors.palette.white};
box-shadow: inset 0 0 0 3px ${theme.colors.palette.black};
}
`: ''}

&:not([disabled]) {
cursor: pointer;
}
Expand Down Expand Up @@ -59,27 +53,31 @@ interface WaitingButtonProps extends ButtonBase {
waitingText: string;
}

export const Button = (props: ButtonProps | WaitingButtonProps) => {
export const Button = styled((props: ButtonProps | WaitingButtonProps) => {
const {
disabled,
isWaiting,
waitingText,
children,
variant = 'primary',
variant,
Copy link
Member

Choose a reason for hiding this comment

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

Probably just me, but pushing it out makes it a bit longer to tell what the default is and do variant-y stuff inside the component in the future

Copy link
Member Author

Choose a reason for hiding this comment

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

we're not able to set the default before its used in the styles, so having a default here seemed confusing (because it would only be defaulted within the component, not in the styles)

...otherProps
} = props;

return <StyledButton
return <button
{...otherProps}
disabled={isWaiting || disabled}
variant={variant}
>
{(isWaiting && waitingText) || children}
</StyledButton>;
}

export const LinkButton = ({ variant = 'primary', ...props}: LinkButtonBase) =>
<StyledButton {...props} as='a' variant={variant}>{props.children}</StyledButton>
</button>;
})`
${buttonCss}
`
Copy link
Member

Choose a reason for hiding this comment

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

I don't think we have the linter set up for this, but missing trailing semicolon


export const LinkButton = styled(({ variant, ...props}: LinkButtonBase) =>
<a {...props}>{props.children}</a>
)`
${buttonCss}
`;

export const linkStyle = css`
color: ${theme.colors.link.color};
Expand Down
14 changes: 7 additions & 7 deletions src/components/__snapshots__/Button.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`Button isWaiting state matches snapshot 1`] = `
<button
className="sc-bczRLJ jBPkZO"
className="sc-bczRLJ iNktJy"
disabled={true}
>
Submitting...
Expand All @@ -11,47 +11,47 @@ exports[`Button isWaiting state matches snapshot 1`] = `

exports[`Button matches light color snapshot 1`] = `
<button
className="sc-bczRLJ fUWpMe"
className="sc-bczRLJ dYagST"
>
Click Me
</button>
`;

exports[`Button matches snapshot 1`] = `
<button
className="sc-bczRLJ jBPkZO"
className="sc-bczRLJ iNktJy"
>
Click Me
</button>
`;

exports[`Button renders as a tag 1`] = `
<a
className="sc-bczRLJ jBPkZO"
className="sc-gsnTZi hRUYQo"
>
Click Me
</a>
`;

exports[`Button renders as a tag variant 1`] = `
<a
className="sc-bczRLJ fUWpMe"
className="sc-gsnTZi gIrhDB"
>
Click Me
</a>
`;

exports[`Button renders button that looks like a link 1`] = `
<button
className="sc-gsnTZi sc-dkzDqf czjxlp jmylct"
className="sc-dkzDqf sc-hKMtZM bLbJrC bAtAjm"
>
Click Me
</button>
`;

exports[`Button renders plain button 1`] = `
<button
className="sc-gsnTZi czjxlp"
className="sc-dkzDqf bLbJrC"
>
Click Me
</button>
Expand Down
4 changes: 2 additions & 2 deletions src/components/__snapshots__/DropdownMenu.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`DropdownMenu matches snapshots 1`] = `
<button
aria-expanded="false"
aria-haspopup="true"
class="sc-bczRLJ Ecumh"
class="sc-bczRLJ ffLEXY"
data-rac=""
id="react-aria-1"
type="button"
Expand All @@ -20,7 +20,7 @@ exports[`DropdownMenu matches snapshots 2`] = `
<button
aria-expanded="false"
aria-haspopup="true"
class="sc-bczRLJ ilnBtE"
class="sc-bczRLJ kRBOzh"
data-rac=""
id="react-aria-4"
type="button"
Expand Down
44 changes: 22 additions & 22 deletions src/components/__snapshots__/ErrorModal.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`Modal matches snapshot 1`] = `
hidden=""
/>
<div
class="sc-papXJ dSNZGe"
class="sc-jqUVSM mLxLT"
data-rac=""
style="--visual-viewport-height: 768px;"
>
Expand All @@ -31,28 +31,28 @@ exports[`Modal matches snapshot 1`] = `
/>
</div>
<div
class="sc-jqUVSM kHnGYC"
class="sc-kDDrLX kcRDJd"
>
<section
aria-labelledby="react-aria-2"
class="sc-eCYdqJ iasutB"
class="sc-jSMfEi jOuQOj"
data-rac=""
role="dialog"
tabindex="-1"
>
<header
class="sc-jSMfEi klYGKb"
class="sc-gKXOVf fMZXQS"
>
<h2
class="sc-gKXOVf czyrNV"
class="sc-iBkjds crmGxr"
id="react-aria-2"
slot="title"
>
Error
</h2>
<button
aria-label="Close"
class="sc-hKMtZM jBFomg"
class="sc-eCYdqJ dRnxZp"
type="button"
>
<svg
Expand Down Expand Up @@ -86,11 +86,11 @@ exports[`Modal matches snapshot 1`] = `
</button>
</header>
<div
class="sc-ftvSup dDFSJu"
class="sc-papXJ jvMkIj"
data-testid="error"
>
<h3
class="sc-iBkjds jzXZzg"
class="sc-ftvSup dzrTqv"
>
Uh-oh, there's been a glitch
</h3>
Expand All @@ -103,15 +103,15 @@ exports[`Modal matches snapshot 1`] = `
</a>
.
<div
class="sc-iqcoie hdouAN"
class="sc-crXcEl gaTpxy"
data-testid="event-id"
/>
</div>
<div
class="sc-kDDrLX elkCOb"
class="sc-iqcoie cqUGeK"
>
<button
class="sc-bczRLJ jBPkZO"
class="sc-bczRLJ iNktJy"
>
OK
</button>
Expand Down Expand Up @@ -140,7 +140,7 @@ exports[`Modal matches snapshot when heading and children are set 1`] = `
hidden=""
/>
<div
class="sc-papXJ dSNZGe"
class="sc-jqUVSM mLxLT"
data-rac=""
style="--visual-viewport-height: 768px;"
>
Expand All @@ -159,28 +159,28 @@ exports[`Modal matches snapshot when heading and children are set 1`] = `
/>
</div>
<div
class="sc-jqUVSM kHnGYC"
class="sc-kDDrLX kcRDJd"
>
<section
aria-labelledby="react-aria-4"
class="sc-eCYdqJ iasutB"
class="sc-jSMfEi jOuQOj"
data-rac=""
role="dialog"
tabindex="-1"
>
<header
class="sc-jSMfEi klYGKb"
class="sc-gKXOVf fMZXQS"
>
<h2
class="sc-gKXOVf czyrNV"
class="sc-iBkjds crmGxr"
id="react-aria-4"
slot="title"
>
Error
</h2>
<button
aria-label="Close"
class="sc-hKMtZM jBFomg"
class="sc-eCYdqJ dRnxZp"
type="button"
>
<svg
Expand Down Expand Up @@ -214,11 +214,11 @@ exports[`Modal matches snapshot when heading and children are set 1`] = `
</button>
</header>
<div
class="sc-ftvSup dDFSJu"
class="sc-papXJ jvMkIj"
data-testid="error"
>
<h3
class="sc-iBkjds jzXZzg"
class="sc-ftvSup dzrTqv"
>
Scores not sent
</h3>
Expand All @@ -232,15 +232,15 @@ exports[`Modal matches snapshot when heading and children are set 1`] = `
</a>
.
<div
class="sc-iqcoie hdouAN"
class="sc-crXcEl gaTpxy"
data-testid="event-id"
/>
</div>
<div
class="sc-kDDrLX elkCOb"
class="sc-iqcoie cqUGeK"
>
<button
class="sc-bczRLJ jBPkZO"
class="sc-bczRLJ iNktJy"
>
OK
</button>
Expand Down
14 changes: 7 additions & 7 deletions src/components/__snapshots__/ManageCookies.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`ManageCookies when CookieYes loads renders button 1`] = `
<button
className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
className="sc-dkzDqf sc-hKMtZM bLbJrC bAtAjm cky-banner-element"
>
Manage Cookies
</button>
Expand All @@ -11,7 +11,7 @@ exports[`ManageCookies when CookieYes loads renders button 1`] = `
exports[`ManageCookies when CookieYes loads renders button in wrapper 1`] = `
<div>
<button
className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
className="sc-dkzDqf sc-hKMtZM bLbJrC bAtAjm cky-banner-element"
>
Manage Cookies
</button>
Expand All @@ -20,23 +20,23 @@ exports[`ManageCookies when CookieYes loads renders button in wrapper 1`] = `

exports[`ManageCookies when CookieYes loads renders button with className 1`] = `
<button
className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element test"
className="sc-dkzDqf sc-hKMtZM bLbJrC bAtAjm cky-banner-element test"
>
Manage Cookies
</button>
`;

exports[`ManageCookies when CookieYes loads renders button with content and correct class 1`] = `
<button
className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
className="sc-dkzDqf sc-hKMtZM bLbJrC bAtAjm cky-banner-element"
>
some content
</button>
`;

exports[`ManageCookies with CookieYes already loaded renders button 1`] = `
<button
className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
className="sc-dkzDqf sc-hKMtZM bLbJrC bAtAjm cky-banner-element"
>
Manage Cookies
</button>
Expand All @@ -45,7 +45,7 @@ exports[`ManageCookies with CookieYes already loaded renders button 1`] = `
exports[`ManageCookies with CookieYes already loaded renders button in wrapper 1`] = `
<div>
<button
className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
className="sc-dkzDqf sc-hKMtZM bLbJrC bAtAjm cky-banner-element"
>
Manage Cookies
</button>
Expand All @@ -54,7 +54,7 @@ exports[`ManageCookies with CookieYes already loaded renders button in wrapper 1

exports[`ManageCookies with CookieYes already loaded renders button with content and correct class 1`] = `
<button
className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
className="sc-dkzDqf sc-hKMtZM bLbJrC bAtAjm cky-banner-element"
>
some content
</button>
Expand Down
Loading
Loading