diff --git a/package.json b/package.json index b0b19e467..90c5f43e8 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@eduzz/houston-workspaces", - "version": "0.58.10", + "version": "0.58.11", "workspaces": [ "src/pages/*", "src/dev", diff --git a/patches/dokz+2.0.9.patch b/patches/dokz+2.0.9.patch index fc4537bcb..0051b7fdd 100644 --- a/patches/dokz+2.0.9.patch +++ b/patches/dokz+2.0.9.patch @@ -29,7 +29,7 @@ index 95405f6..ead5cc7 100644 } function makeGithubEditUrl(_a) { diff --git a/node_modules/dokz/dist/components/Playground.js b/node_modules/dokz/dist/components/Playground.js -index c052028..7d09f8e 100644 +index c052028..7f925ae 100644 --- a/node_modules/dokz/dist/components/Playground.js +++ b/node_modules/dokz/dist/components/Playground.js @@ -62,6 +62,7 @@ var provider_1 = require("../provider"); @@ -47,7 +47,7 @@ index c052028..7d09f8e 100644 - // transformCode: (code) => '/** @jsx mdx */' + code, - scope: __assign(__assign({}, scope), { mdx: react_3.mdx }), + transformCode: (code) => { -+ return `
${code.startsWith('()') ? `{React.createElement(${code})}` : code}
` ++ return `
${code.startsWith('()') ? `{React.createElement(${code})}` : code}
` + }, + scope: __assign(__assign({}, scope), { mdx: react_3.mdx, ThemeProvider: ThemeProvider.default }), }; @@ -181,7 +181,7 @@ index 3ee818f..897dc4c 100644 } function makeGithubEditUrl(_a) { diff --git a/node_modules/dokz/esm/components/Playground.js b/node_modules/dokz/esm/components/Playground.js -index 86a74cf..5f1a929 100644 +index 86a74cf..adefb53 100644 --- a/node_modules/dokz/esm/components/Playground.js +++ b/node_modules/dokz/esm/components/Playground.js @@ -37,6 +37,7 @@ import { useDokzConfig } from '../provider'; @@ -199,7 +199,7 @@ index 86a74cf..5f1a929 100644 - // transformCode: (code) => '/** @jsx mdx */' + code, - scope: __assign(__assign({}, scope), { mdx: mdx }), + transformCode: (code) => { -+ return `
${code.startsWith('()') ? `{React.createElement(${code})}` : code}
` ++ return `
${code.startsWith('()') ? `{React.createElement(${code})}` : code}
` + }, + scope: __assign(__assign({}, scope), { mdx: mdx, ThemeProvider: ThemeProvider }), }; diff --git a/src/dev/package.json b/src/dev/package.json index b83311301..ecb8a3cb4 100644 --- a/src/dev/package.json +++ b/src/dev/package.json @@ -1,14 +1,14 @@ { "name": "@eduzz/houston-dev", - "version": "0.58.10", + "version": "0.58.11", "private": true, "dependencies": { "@eduzz/apps-toolbar-react": "latest", - "@eduzz/houston-experimental": "0.58.10", - "@eduzz/houston-forms": "0.58.10", - "@eduzz/houston-hooks": "0.58.10", - "@eduzz/houston-icons": "0.58.10", - "@eduzz/houston-ui": "0.58.10", + "@eduzz/houston-experimental": "0.58.11", + "@eduzz/houston-forms": "0.58.11", + "@eduzz/houston-hooks": "0.58.11", + "@eduzz/houston-icons": "0.58.11", + "@eduzz/houston-ui": "0.58.11", "react": "^17", "react-dom": "^17", "react-router-dom": "^6.3.0", diff --git a/src/dev/src/App.tsx b/src/dev/src/App.tsx index dceae24f2..cfb19705c 100644 --- a/src/dev/src/App.tsx +++ b/src/dev/src/App.tsx @@ -36,7 +36,7 @@ function App() { tag: 'unity' }} > - + {/* */} } /> } /> diff --git a/src/package.json b/src/package.json index b36f4c3cc..5b45a6936 100644 --- a/src/package.json +++ b/src/package.json @@ -1,6 +1,6 @@ { "name": "@eduzz/docs", - "version": "0.58.10", + "version": "0.58.11", "private": true, "scripts": { "start": "next dev", @@ -8,11 +8,11 @@ }, "dependencies": { "@chakra-ui/react": "^1.8.8", - "@eduzz/houston-experimental": "0.58.10", - "@eduzz/houston-forms": "0.58.10", - "@eduzz/houston-hooks": "0.58.10", - "@eduzz/houston-icons": "0.58.10", - "@eduzz/houston-ui": "0.58.10", + "@eduzz/houston-experimental": "0.58.11", + "@eduzz/houston-forms": "0.58.11", + "@eduzz/houston-hooks": "0.58.11", + "@eduzz/houston-icons": "0.58.11", + "@eduzz/houston-ui": "0.58.11", "@emotion/react": "^11", "@emotion/styled": "^11", "dokz": "2.0.9", diff --git a/src/pages/core/package.json b/src/pages/core/package.json index fc0157081..4bfb2ee48 100644 --- a/src/pages/core/package.json +++ b/src/pages/core/package.json @@ -1,6 +1,6 @@ { "name": "@eduzz/houston-core", - "version": "0.58.10", + "version": "0.58.11", "description": "Houston Core", "main": "index.js", "types": "./index.d.ts", diff --git a/src/pages/eslint-config/package.json b/src/pages/eslint-config/package.json index 15dcad51e..f72645621 100644 --- a/src/pages/eslint-config/package.json +++ b/src/pages/eslint-config/package.json @@ -1,7 +1,7 @@ { "name": "@eduzz/eslint-config-houston", "private": false, - "version": "0.58.10", + "version": "0.58.11", "description": "Eduzz Houston Eslint Config", "author": "Eduzz Team", "license": "MIT", diff --git a/src/pages/experimental/package.json b/src/pages/experimental/package.json index ffd597610..56ededb86 100644 --- a/src/pages/experimental/package.json +++ b/src/pages/experimental/package.json @@ -1,7 +1,7 @@ { "name": "@eduzz/houston-experimental", "description": "Eduzz Houston Experimental", - "version": "0.58.10", + "version": "0.58.11", "main": "./index.js", "types": "./index.d.ts", "author": "Eduzz Team", @@ -16,9 +16,9 @@ "url": "https://github.com/eduzz/houston/issues" }, "dependencies": { - "@eduzz/houston-ui": "0.58.10", - "@eduzz/houston-hooks": "0.58.10", - "@eduzz/houston-icons": "0.58.10", + "@eduzz/houston-ui": "0.58.11", + "@eduzz/houston-hooks": "0.58.11", + "@eduzz/houston-icons": "0.58.11", "@emotion/css": "^11", "@mui/material": "^5", "@mui/styles": "^5", @@ -27,6 +27,6 @@ "tslib": "^2" }, "peerDependencies": { - "@eduzz/houston-core": "0.58.10" + "@eduzz/houston-core": "0.58.11" } } diff --git a/src/pages/forms/package.json b/src/pages/forms/package.json index a336000cb..0bcbfde40 100644 --- a/src/pages/forms/package.json +++ b/src/pages/forms/package.json @@ -1,6 +1,6 @@ { "name": "@eduzz/houston-forms", - "version": "0.58.10", + "version": "0.58.11", "description": "Houston Forms", "main": "index.js", "types": "./index.d.ts", @@ -17,8 +17,8 @@ }, "dependencies": { "formik": "^2.2.9", - "@eduzz/houston-core": "0.58.10", - "@eduzz/houston-hooks": "0.58.10", + "@eduzz/houston-core": "0.58.11", + "@eduzz/houston-hooks": "0.58.11", "react-hook-form": "^7", "@hookform/resolvers": "^2", "@hookform/error-message": "^2.0.0", @@ -26,7 +26,7 @@ "yup": "^0.32.11" }, "peerDependencies": { - "@eduzz/houston-core": "0.58.10" + "@eduzz/houston-core": "0.58.11" }, "devDependencies": {} } diff --git a/src/pages/hooks/package.json b/src/pages/hooks/package.json index 613296d3a..1b729ac13 100644 --- a/src/pages/hooks/package.json +++ b/src/pages/hooks/package.json @@ -1,7 +1,7 @@ { "name": "@eduzz/houston-hooks", "description": "Eduzz Houston Hooks", - "version": "0.58.10", + "version": "0.58.11", "main": "./index.js", "types": "./index.d.ts", "author": "Eduzz Team", @@ -16,7 +16,7 @@ "url": "https://github.com/eduzz/houston/issues" }, "dependencies": { - "@eduzz/houston-core": "0.58.10", + "@eduzz/houston-core": "0.58.11", "lodash": "^4" }, "devDependencies": { diff --git a/src/pages/icons/package.json b/src/pages/icons/package.json index 313467603..4055a2751 100644 --- a/src/pages/icons/package.json +++ b/src/pages/icons/package.json @@ -1,7 +1,7 @@ { "name": "@eduzz/houston-icons", "description": "Eduzz Houston Icons", - "version": "0.58.10", + "version": "0.58.11", "main": "./index.js", "types": "./index.d.ts", "author": "Eduzz Team", diff --git a/src/pages/styles/package.json b/src/pages/styles/package.json index feac5ed90..9220df684 100644 --- a/src/pages/styles/package.json +++ b/src/pages/styles/package.json @@ -1,7 +1,7 @@ { "name": "@eduzz/houston-styles", "description": "Eduzz Houston Style", - "version": "0.58.10", + "version": "0.58.11", "main": "./index.js", "types": "./index.d.ts", "author": "Eduzz Team", @@ -16,7 +16,7 @@ "url": "https://github.com/eduzz/houston/issues" }, "dependencies": { - "@eduzz/houston-tokens": "0.58.10", + "@eduzz/houston-tokens": "0.58.11", "@emotion/css": "^11", "@emotion/react": "^11", "@emotion/styled": "^11", diff --git a/src/pages/tokens/package.json b/src/pages/tokens/package.json index 84710dec1..88505f51a 100644 --- a/src/pages/tokens/package.json +++ b/src/pages/tokens/package.json @@ -1,7 +1,7 @@ { "name": "@eduzz/houston-tokens", "description": "Eduzz Houston Tokens", - "version": "0.58.10", + "version": "0.58.11", "main": "./index.js", "types": "./index.d.ts", "author": "Eduzz Team", diff --git a/src/pages/ui-components/Dialog/Dialog.tsx b/src/pages/ui-components/Dialog/Dialog.tsx index dfa2056f8..861a84c94 100644 --- a/src/pages/ui-components/Dialog/Dialog.tsx +++ b/src/pages/ui-components/Dialog/Dialog.tsx @@ -10,6 +10,7 @@ import nestedComponent from '../utils/nestedComponent'; import Content from './Content'; import DialogContextProvider from './context'; import Footer from './Footer'; +import { showAlert, showConfirm } from './Global'; import Header from './Header'; export type DialogTypes = 'positive' | 'informative' | 'warning' | 'negative'; @@ -102,5 +103,8 @@ const DialogWrapper = styled(Dialog, { label: 'houston-dialog' })` export default nestedComponent(React.memo(DialogWrapper), { Header, Content, - Footer + Footer, + // Evita referência circular, pois o Global depende do Dialog + alert: (params: Parameters[0]) => showAlert(params), + confirm: (params: Parameters[0]) => showConfirm(params) }); diff --git a/src/pages/ui-components/Dialog/Global.tsx b/src/pages/ui-components/Dialog/Global.tsx new file mode 100644 index 000000000..1eb350c12 --- /dev/null +++ b/src/pages/ui-components/Dialog/Global.tsx @@ -0,0 +1,116 @@ +import { memo, useState, useEffect } from 'react'; + +import usePromiseCallback from '@eduzz/houston-hooks/usePromiseCallback'; + +import Button from '../Button'; +import Dialog from './Dialog'; + +export interface DialogShowParams { + message: React.ReactNode; + title?: string; + confirmation?: boolean; + onConfirm?(): Promise; + onCancel?(): Promise; +} + +let lastPromise = Promise.resolve(false); +let componentCallback: null | ((params: DialogShowParams) => Promise); + +const DialogGlobal = memo(() => { + const [opened, setOpened] = useState(false); + const [params, setParams] = useState(); + const [confirmLoading, setConfirmLoading] = useState(false); + const [cancelLoading, setCancelLoading] = useState(false); + + const onReceiveParams = usePromiseCallback((isSubscribed, params: DialogShowParams): Promise => { + const result = new Promise((resolve, reject) => { + setOpened(true); + setConfirmLoading(false); + setCancelLoading(false); + + setParams({ + confirmation: false, + title: undefined, + ...params, + onConfirm: async () => { + if (!params.onConfirm) { + resolve(true); + return; + } + + try { + isSubscribed() && setConfirmLoading(true); + await Promise.resolve(params.onConfirm()); + resolve(true); + } catch (err) { + reject(err); + } finally { + isSubscribed() && setConfirmLoading(false); + } + }, + onCancel: async () => { + if (!params.onCancel) { + resolve(true); + return; + } + + try { + isSubscribed() && setCancelLoading(true); + await Promise.resolve(params.onCancel()); + resolve(false); + } catch (err) { + reject(err); + } finally { + isSubscribed() && setCancelLoading(false); + } + } + }); + }); + + result.finally(() => setOpened(false)); + return result; + }, []); + + useEffect(() => { + componentCallback = onReceiveParams; + return () => { + componentCallback = null; + }; + }, [onReceiveParams]); + + return ( + + {params?.title ?? (params?.confirmation ? 'Confirmação' : 'Atenção')} + {params?.message} + + {params?.confirmation && ( + + )} + + + + ); +}); + +function callComponent(params: DialogShowParams): Promise { + //prevent an alert to override another + return (lastPromise = lastPromise.finally(async () => { + await new Promise(resolve => setTimeout(() => resolve(), 300)); + if (!componentCallback) throw new Error('Please, initialize an DialogGlobal before'); + return componentCallback(params); + })); +} + +export function showAlert(params: string | Omit) { + return callComponent(typeof params === 'string' ? { message: params } : params); +} + +export function showConfirm(params: string | Omit) { + return callComponent({ ...(typeof params === 'string' ? { message: params } : params), confirmation: true }); +} + +export default DialogGlobal; diff --git a/src/pages/ui-components/Dialog/index.mdx b/src/pages/ui-components/Dialog/index.mdx index 59a9ca5db..88cbb76c2 100644 --- a/src/pages/ui-components/Dialog/index.mdx +++ b/src/pages/ui-components/Dialog/index.mdx @@ -2,6 +2,8 @@ name: Dialog --- +import { useCallback } from 'react'; + import { Playground } from 'dokz'; import Button from '../Button'; @@ -46,6 +48,31 @@ import Dialog from '@eduzz/houston-ui/Dialog'; }} +### Alertas e Confirmações + +É possível usar o Dialog como alerts e confirms + + + {() => { + const showAlert = useCallback(() => Dialog.alert('Alerta!'), []); + const showConfirm = useCallback( + () => + Dialog.confirm({ + title: 'Confirmação', + message: 'Essa confirmação retorna uma promise, por isso o botão tera um loading', + onConfirm: () => new Promise(r => setTimeout(() => r(null), 3000)) + }), + [] + ); + return ( +
+ + +
+ ); + }} + + ### Dialog props | prop | tipo | obrigatório | padrão | descrição | @@ -61,3 +88,24 @@ import Dialog from '@eduzz/houston-ui/Dialog'; | prop | tipo | obrigatório | padrão | descrição | | ----------------- | --------- | ----------- | ------- | ---------------------------------------------------------- | | disableTypography | `boolean` | `false` | `false` | Se `true`, o componente `Typography` não será renderizado. | + +### Dialog.alert + +O retorno da função será uma promise de boolean; + +| prop | tipo | obrigatório | padrão | descrição | +| --------- | ------------------ | ----------- | ------- | ------------------------------------------------------- | +| message | `string/ReactNode` | true | | | +| title | `string` | false | Atenção | | +| onConfirm | `function` | false | | Se retornar uma promise o button terá estado de loading | + +### Dialog.confirm + +O retorno da função será uma promise de boolean; + +| prop | tipo | obrigatório | padrão | descrição | +| --------- | ------------------ | ----------- | ----------- | ------------------------------------------------------- | +| message | `string/ReactNode` | true | | | +| title | `string` | false | Confirmação | | +| onConfirm | `function` | false | | Se retornar uma promise o button terá estado de loading | +| onCancel | `function` | false | | Se retornar uma promise o button terá estado de loading | diff --git a/src/pages/ui-components/Forms/Switch/index.mdx b/src/pages/ui-components/Forms/Switch/index.mdx index 12aba1c34..8f6dc6549 100644 --- a/src/pages/ui-components/Forms/Switch/index.mdx +++ b/src/pages/ui-components/Forms/Switch/index.mdx @@ -5,11 +5,11 @@ name: Switch import { Playground } from 'dokz'; import useForm from '@eduzz/houston-forms/useForm'; +import Form from '@eduzz/houston-ui/Forms/Form'; import Column from '../../Grid/Column'; import Row from '../../Grid/Row'; import Typography from '../../Typography'; -import Form from '../Form'; import Switch from './'; # Switch @@ -29,34 +29,26 @@ import Switch from '@eduzz/houston-ui/Forms/Switch'; const [checked, setChecked] = React.useState(false); const onChange = React.useCallback(() => setChecked(prev => !prev), []); return ( - <> - Padrão - - - - - - - - - Desabilitado - - - - - - - - - - - - - - - - - + + + + Switch + + + + + Checked disabled + + + + Disabled + + + + Error + + + ); }} @@ -69,27 +61,22 @@ import useForm from '@eduzz/houston-forms/useForm'; {() => { - const form = useForm({ - defaultValues: { switch: true }, //estado inicial, não precisa passar todas as propriedades - onSubmit: () => {} - }); + const form = useForm({ defaultValues: { switch: true } }); const value = form.watch('switch'); return ( -
+ {}}> Valor atual do switch: {String(value)} +
); }}
-| prop | tipo | obrigatório | padrão | descrição | -| -------------- | ------------------- | ----------- | ---------- | --------- | -| id | `string` | `false` | - | - | -| name | `string` | `true` | - | - | -| className | `string` | `false` | - | - | -| checked | `boolean` | `false` | `false` | - | -| defaultChecked | `boolean` | `false` | `false` | - | -| size | `'small ou medium'` | `false` | `'medium'` | - | -| onChange | `function` | `false` | - | - | -| disabled | `boolean` | `false` | `false` | - | +| prop | tipo | obrigatório | padrão | descrição | +| ------------ | ---------- | ----------- | ------- | ----------------------------------------- | +| name | `string` | `true` | - | Necessário quando usado dentro de um Form | +| value | `boolean` | `false` | `false` | - | +| onChange | `function` | `false` | - | - | +| disabled | `boolean` | `false` | `false` | - | +| errorMessage | `string` | `false` | - | - | diff --git a/src/pages/ui-components/Forms/Switch/index.tsx b/src/pages/ui-components/Forms/Switch/index.tsx index 42bce0e42..60cb5ef89 100644 --- a/src/pages/ui-components/Forms/Switch/index.tsx +++ b/src/pages/ui-components/Forms/Switch/index.tsx @@ -1,30 +1,149 @@ import * as React from 'react'; -import SwitchMUI, { SwitchProps } from '@mui/material/Switch'; +import styled, { StyledProp, css, cx } from '@eduzz/houston-styles'; -import withForm from '../Form/withForm'; +import withForm, { WithFormProps } from '../Form/withForm'; -type FieldSwitchPropsExtends = 'id' | 'className' | 'checked' | 'defaultChecked' | 'disabled' | 'size' | 'onChange'; - -export interface SwitchFieldProps extends Pick { - name?: string; +export interface SwitchProps + extends StyledProp, + Omit, 'onChange' | 'value'>, + WithFormProps { + children?: string; + onChange?: (checked: boolean) => void; + value?: boolean; + disabled?: boolean; + errorMessage?: string; } -const Switch = React.forwardRef, SwitchFieldProps>( - ({ name, onChange, checked, disabled, ...props }, ref) => { +const Switch = React.forwardRef( + ({ children, className, onChange, disabled, value, id: idProp, errorMessage, ...rest }, ref) => { + const handleChange = React.useCallback(() => { + onChange && onChange(!value); + }, [onChange, value]); + + const [id] = React.useState(idProp ?? `hst-switch-id-${Math.floor(Math.random() * 1000)}`); + return ( - +
+ + +
+ {children && } + {!!errorMessage &&
{errorMessage}
} +
+
); } ); -export default withForm(React.memo(Switch)); +const WIDTH_IN_PX = 40; +const HEIGHT_IN_PX = 24; + +const THUMB_WIDTH_IN_PX = 16; +const THUMB_HEIGHT_IN_PX = 16; +const THUMB_OFFSET_IN_REM = 1; + +export default styled(withForm(Switch), { label: 'hst-switch' })(({ theme }) => { + return css` + display: inline-flex; + align-items: center; + gap: ${theme.spacing.inline.nano}; + cursor: pointer; + line-height: ${theme.line.height.lg}; + + &.--hst-switch-disabled { + opacity: ${theme.opacity.level[6]}; + cursor: not-allowed; + } + + .hst-switch__errorMessage { + font-size: ${theme.font.size.xxs}; + font-family: ${theme.font.family.base}; + font-weight: ${theme.font.weight.regular}; + line-height: ${theme.line.height.default}; + color: ${theme.hexToRgba(theme.feedbackColor.negative.pure)}; + } + + .hst-switch__button { + all: unset; + margin-bottom: auto; + + :disabled { + pointer-events: none; + } + } + + label { + all: unset; + color: ${theme.neutralColor.low.pure}; + font-family: ${theme.font.family.base}; + font-size: ${theme.font.size.xs}; + font-weight: ${theme.font.weight.regular}; + line-height: ${theme.line.height.default}; + user-select: none; + } + + .hst-switch__track { + width: ${theme.pxToRem(WIDTH_IN_PX)}rem; + height: ${theme.pxToRem(HEIGHT_IN_PX)}rem; + background-color: ${theme.hexToRgba(theme.neutralColor.low.light, theme.opacity.level[8])}; + border-radius: ${theme.border.radius.pill}; + display: flex; + align-items: center; + position: relative; + transition-duration: 0.5s; + transition-property: background-color, color; + + :hover { + background-color: ${theme.neutralColor.low.light}; + } + + :focus { + background-color: ${theme.neutralColor.low.light}; + outline: ${theme.border.width.sm} solid ${theme.feedbackColor.informative.pure}; + } + + &.--checked { + background-color: ${theme.brandColor.primary.pure}; + } + + &.--error { + background-color: ${theme.hexToRgba(theme.feedbackColor.negative.pure)}; + } + + .hst-switch__thumb { + width: ${theme.pxToRem(THUMB_WIDTH_IN_PX)}rem; + height: ${theme.pxToRem(THUMB_HEIGHT_IN_PX)}rem; + background-color: ${theme.neutralColor.high.pure}; + border-radius: ${theme.border.radius.pill}; + position: absolute; + transition: all 0.2s; + left: ${theme.spacing.quarck}; + + &.--checked { + transform: translateX(${THUMB_OFFSET_IN_REM}rem); + } + } + } + `; +}); diff --git a/src/pages/ui-components/Link/index.mdx b/src/pages/ui-components/Link/index.mdx index 7031c1b2f..47f7d92a9 100644 --- a/src/pages/ui-components/Link/index.mdx +++ b/src/pages/ui-components/Link/index.mdx @@ -26,9 +26,23 @@ import Link from '@eduzz/houston-ui/Link'; ### Exemplo - - Houston - + + + + Link xs + + + + + Link sm + + + + + Link md + + + ### Em parágrafo @@ -59,4 +73,4 @@ import { NavLink } from 'react-router-dom'; | as | `React.ElementType` | `false` | `a` | | | href | `string` | `false` | - | | | showIcon | `boolean` | `false` | - | | -| size | sm, md, inherit | `false` | inherit | | +| size | xs, sm, md, inherit | `false` | inherit | | diff --git a/src/pages/ui-components/Link/index.tsx b/src/pages/ui-components/Link/index.tsx index b5132b2a0..dbfda6daf 100644 --- a/src/pages/ui-components/Link/index.tsx +++ b/src/pages/ui-components/Link/index.tsx @@ -19,14 +19,14 @@ export interface LinkProps extends StyledProp, React.HTMLAttributes ( {children} - {showIcon && } + {showIcon && } ); @@ -34,6 +34,8 @@ export default styled(Link, { label: 'houston-link' })(({ theme }) => { return css` all: unset; line-height: ${theme.line.height.default}; + font-family: ${theme.font.family.base}; + font-weight: ${theme.font.weight.regular}; display: inline-flex; align-items: center; text-decoration: underline; @@ -41,6 +43,10 @@ export default styled(Link, { label: 'houston-link' })(({ theme }) => { border-radius: ${theme.border.radius.xs}; cursor: pointer; + &.--link-size-xs { + font-size: ${theme.font.size.xxs}; + } + &.--link-size-sm { font-size: ${theme.font.size.xs}; } diff --git a/src/pages/ui-components/Modal/Content/index.tsx b/src/pages/ui-components/Modal/Content/index.tsx index a811977a7..f9824ca63 100644 --- a/src/pages/ui-components/Modal/Content/index.tsx +++ b/src/pages/ui-components/Modal/Content/index.tsx @@ -8,7 +8,7 @@ const ModalContent = ({ children, ...rest }: ModalContentProps & React.HTMLAttri
{children}
); -export default styled(ModalContent, { label: 'houston-modal-content' })` +export default styled(ModalContent, { label: 'hst-modal-content' })` ${({ theme }) => css` padding: ${theme.spacing.inset.sm}; overflow: auto; diff --git a/src/pages/ui-components/Modal/Footer/index.tsx b/src/pages/ui-components/Modal/Footer/index.tsx index 7d89ab7a3..60677914a 100644 --- a/src/pages/ui-components/Modal/Footer/index.tsx +++ b/src/pages/ui-components/Modal/Footer/index.tsx @@ -1,4 +1,4 @@ -import styled, { StyledProp, css } from '@eduzz/houston-styles'; +import styled, { StyledProp, css, cx } from '@eduzz/houston-styles'; import Divider from '../../Divider'; @@ -6,11 +6,15 @@ export interface ModalFooterProps { children: React.ReactNode; } -const ModalFooter = ({ children, ...rest }: ModalFooterProps & React.HTMLAttributes & StyledProp) => { +const ModalFooter = ({ + children, + className, + ...rest +}: ModalFooterProps & React.HTMLAttributes & StyledProp) => { return ( -