Skip to content

Commit

Permalink
🎨 Remove css nesting and introduce native dialog element #2469 (#2494)
Browse files Browse the repository at this point in the history
* 🎨 native dialog

* 🎨 fix css

* 🎨 update

* 🎨 use tw utility

* 🎨 use button and variant

* 🎨 finetunig

* 💫 Minor changes to reflect exit animation #2469

* 🐛 more padding on mobile to not overlap button and text

* 🎨 rename to root variables

---------

Co-authored-by: Padmaja <[email protected]>
  • Loading branch information
BorghildSelle and padms authored Sep 11, 2024
1 parent 9f71f64 commit 57eab31
Show file tree
Hide file tree
Showing 11 changed files with 631 additions and 5,492 deletions.
5 changes: 5 additions & 0 deletions sanityv3/schemas/textSnippets.ts
Original file line number Diff line number Diff line change
Expand Up @@ -739,6 +739,11 @@ const snippets: textSnippet = {
defaultValue: 'Back to content',
group: groups.others,
},
close: {
title: 'Close',
defaultValue: 'Close',
group: groups.others,
},
}

type textSnippetGroup = { title: string; hidden?: boolean }
Expand Down
8 changes: 4 additions & 4 deletions search/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

125 changes: 125 additions & 0 deletions web/core/Button/Button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
import { IconType } from '@equinor/eds-core-react/dist/types/components/Icon/Icon.types'
import { ButtonHTMLAttributes, forwardRef } from 'react'
import envisTwMerge from '../../twMerge'

export const commonButtonStyling = `
w-fit
text-sm
px-4
py-3
rounded-md
focus:outline-none
focus-visible:envis-outline
dark:focus:outline-none
dark:focus-visible:envis-outline-invert
active:scale-99
flex
items-center
gap-3
`

export type Variants = 'contained' | 'outlined' | 'ghost' | 'contained-secondary' | 'outlined-secondary'

/** Use for common button styling in Button,IconButton, Link/ButtonLink */
export const getVariant = (variant: Variants): string => {
switch (variant) {
case 'ghost':
return `
hover:bg-moss-green-60
focus:outline-none
focus-visible:envis-outline
active:scale-99
dark:text-white-100
dark:hover:bg-white-transparent
dark:focus-visible:envis-outline-invert
`
case 'outlined':
return `
border
border-north-sea-100
text-norwegian-woods-100
hover:bg-moss-green-60
hover:text-moss-green-100
focus:outline-none
focus-visible:outline-slate-blue-95
dark:text-white-100
dark:border-white-100
dark:hover:bg-white-transparent
dark:focus-visible:outline-white-100
`
case 'outlined-secondary':
return `
px-3
py-2
lg:px-5
lg:py-3
border
border-north-sea-100
text-black-80
hover:bg-slate-blue-100
hover:text-white-100
focus:outline-none
focus-visible:outline-slate-blue-95
dark:text-white-100
dark:border-white-100
dark:hover:bg-white-transparent
dark:focus-visible:outline-white-100
`
case 'contained-secondary':
return `
px-3
py-2
lg:px-5
lg:py-3
bg-slate-blue-95
text-white-100
hover:bg-slate-blue-100
hover:text-white-100
focus:outline-none
focus-visible:outline-slate-blue-95
`
case 'contained':
default:
return `bg-norwegian-woods-100
text-white-100
hover:bg-moss-green-100
focus:outline-none
focus-visible:outline-norwegian-woods-100
dark:bg-white-100
dark:hover:bg-norwegian-woods-40
dark:text-slate-80
dark:focus-visible:outline-white-100
`
}
}

export type ButtonProps = {
/** Specifies which variant to use */
variant?: Variants
/** Type of button
* @default 'button'
*/
type?: string
/** Should make our own Icon component ? */
icon?: IconType
} & ButtonHTMLAttributes<HTMLButtonElement>

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
({ variant = 'contained', type = 'button', children, icon: Icon, className = '', ...rest }, ref) => {
const variantClassNames = getVariant(variant)

const buttonClassNames = envisTwMerge(
commonButtonStyling,
variantClassNames,
`${Icon ? 'flex gap-2' : ''}`,
className,
)

return (
<button ref={ref} type={type} className={buttonClassNames} {...rest}>
{Icon && <Icon />}
{children}
</button>
)
},
)
35 changes: 35 additions & 0 deletions web/core/Button/LinkButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { ButtonHTMLAttributes, forwardRef } from 'react'
import envisTwMerge from '../../twMerge'
import { IconData } from '@equinor/eds-icons'
import { TransformableIcon } from '../../icons/TransformableIcon'

export type LinkButtonProps = {
iconData?: IconData
iconClassName?: string
} & ButtonHTMLAttributes<HTMLButtonElement>

export const LinkButton = forwardRef<HTMLButtonElement, LinkButtonProps>(
({ children, iconData, className = '', iconClassName = '', ...rest }, ref) => {
return (
<button
ref={ref}
type="button"
className={envisTwMerge(
`flex
gap-1
text-xs
underline
hover:no-underline
focus:outline-none
focus-visible:envis-outline
active:scale-99`,
className,
)}
{...rest}
>
{iconData && <TransformableIcon iconData={iconData} className={iconClassName} />}
{children}
</button>
)
},
)
120 changes: 2 additions & 118 deletions web/core/Button/index.tsx
Original file line number Diff line number Diff line change
@@ -1,118 +1,2 @@
import { IconType } from '@equinor/eds-core-react/dist/types/components/Icon/Icon.types'
import { ButtonHTMLAttributes, forwardRef } from 'react'
import envisTwMerge from '../../twMerge'

export const commonButtonStyling = `
w-fit
text-sm
px-3
py-2
lg:px-5
lg:py-3
rounded-md
focus:outline-none
focus-visible:envis-outline
dark:focus:outline-none
dark:focus-visible:envis-outline-invert
active:scale-99
flex
items-center
gap-3
`

export type Variants = 'contained' | 'outlined' | 'ghost' | 'contained-secondary' | 'outlined-secondary'

/** Use for common button styling in Button,IconButton, Link/ButtonLink */
export const getVariant = (variant: Variants): string => {
switch (variant) {
case 'ghost':
return `
hover:bg-moss-green-60
focus:outline-none
focus-visible:envis-outline
active:scale-99
dark:text-white-100
dark:hover:bg-white-transparent
dark:focus-visible:envis-outline-invert
`
case 'outlined':
return `
border
border-north-sea-100
text-norwegian-woods-100
hover:bg-moss-green-60
hover:text-moss-green-100
focus:outline-none
focus-visible:outline-slate-blue-95
dark:text-white-100
dark:border-white-100
dark:hover:bg-white-transparent
dark:focus-visible:outline-white-100
`
case 'outlined-secondary':
return `
border
border-north-sea-100
text-black-80
hover:bg-slate-blue-100
hover:text-white-100
focus:outline-none
focus-visible:outline-slate-blue-95
dark:text-white-100
dark:border-white-100
dark:hover:bg-white-transparent
dark:focus-visible:outline-white-100
`
case 'contained-secondary':
return `bg-slate-blue-95
text-white-100
hover:bg-slate-blue-100
hover:text-white-100
focus:outline-none
focus-visible:outline-slate-blue-95
`
case 'contained':
default:
return `bg-norwegian-woods-100
text-white-100
hover:bg-moss-green-100
focus:outline-none
focus-visible:outline-norwegian-woods-100
dark:bg-white-100
dark:hover:bg-norwegian-woods-40
dark:text-slate-80
dark:focus-visible:outline-white-100
`
}
}

export type ButtonProps = {
/** Specifies which variant to use */
variant?: Variants
/** Type of button
* @default 'button'
*/
type?: string
/** Should make our own Icon component ? */
icon?: IconType
} & ButtonHTMLAttributes<HTMLButtonElement>

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
({ variant = 'contained', type = 'button', children, icon: Icon, className = '', ...rest }, ref) => {
const variantClassNames = getVariant(variant)

const buttonClassNames = envisTwMerge(
commonButtonStyling,
variantClassNames,
`${Icon ? 'flex gap-2' : ''}`,
className,
)

return (
<button ref={ref} type={type} className={buttonClassNames} {...rest}>
{Icon && <Icon />}
{children}
</button>
)
},
)
export { Button, commonButtonStyling, getVariant, type ButtonProps } from './Button'
export { LinkButton, type LinkButtonProps } from './LinkButton'
4 changes: 1 addition & 3 deletions web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@
"@sanity/webhook": "^2.0.0",
"@types/easy-soap-request": "^5.6.0",
"@types/uuid": "^8.3.4",
"@types/react-transition-group": "^4.4.10",
"@types/xml2js": "^0.4.11",
"algoliasearch": "^4.16.0",
"date-fns": "^2.29.3",
Expand Down Expand Up @@ -81,8 +80,7 @@
"swr": "^1.3.0",
"tailwind-merge": "^2.2.1",
"uuid": "^9.0.0",
"xml2js": "^0.6.0",
"react-transition-group": "^4.4.5"
"xml2js": "^0.6.0"
},
"devDependencies": {
"@algolia/client-search": "^4.16.0",
Expand Down
13 changes: 7 additions & 6 deletions web/pageComponents/shared/TranscriptAndActions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,14 @@ import { getUrlFromAction } from '../../common/helpers'
import { useState } from 'react'
import { PortableTextBlock } from '@portabletext/types'
import { ButtonLink } from '@core/Link'
import { commonButtonStyling, getVariant } from '@core/Button'
import { Button, getVariant } from '@core/Button'
import { getLocaleFromName } from '../../lib/localization'
import Modal from '@sections/Modal/Modal'
import RichText from './portableText/RichText'
import { add_circle_filled } from '@equinor/eds-icons'
import { twMerge } from 'tailwind-merge'
import { TransformableIcon } from '../../icons/TransformableIcon'
import { useIntl } from 'react-intl'
import { title } from 'process'

type TranscriptAndActionsProps = {
className?: string
Expand Down Expand Up @@ -46,14 +45,16 @@ const TranscriptAndActions = ({ action, transcript, className, ariaTitle }: Tran

{transcript && (
<>
<button
<Button
variant="contained-secondary"
onClick={handleOpen}
aria-haspopup="dialog"
aria-label={`${readTranscript} ${ariaTitle}`}
className={`w-full mb-8 ${commonButtonStyling} ${getVariant('contained-secondary')}`}
className={`w-full mb-8`}
>
<span className="grow">{readTranscript}</span>
<TransformableIcon className={'scale-90 lg:scale-100'} iconData={add_circle_filled} />
</button>
<TransformableIcon iconData={add_circle_filled} />
</Button>
<Modal isOpen={isOpen} onClose={handleClose} title={ariaTitle}>
<RichText value={transcript} />
</Modal>
Expand Down
Loading

0 comments on commit 57eab31

Please sign in to comment.