ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prepare command bar to support modeling commands (#1184)

Browse Source 
* Tweak toaster look and feel

* Add icons, tweak plus icon names

* Rename commandBarMeta to commandBarConfig

* Refactor command bar, add support for icons

* Create a tailwind plugin for aria-pressed button state

* Remove overlay from behind command bar

* Clean up toolbar

* Button and other style tweaks

* Icon tweaks follow-up: make old icons work with new sizing

* Delete unused static icons

* More CSS tweaks

* Small CSS tweak to project sidebar

* Add command bar E2E test

* fumpt

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* fix typo in a comment

* Fix icon padding (built version only)

* Update onboarding and warning banner icons padding

* Misc minor style fixes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Frank Noirot
2023-12-06 14:44:13 -05:00
committed by GitHub
parent 38119d5a3b
commit 3ae5393dd7
51 changed files with 1197 additions and 1122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/ActionButton.tsx
View File

@ -39,16 +39,16 @@ type ActionButtonProps =
| ActionButtonAsElement
export const ActionButton = (props: ActionButtonProps) => {
const classNames = `group mono text-base flex items-center gap-2 rounded-sm border border-chalkboard-40 dark:border-chalkboard-60 hover:border-liquid-40 dark:hover:bg-chalkboard-90 p-[3px] text-chalkboard-110 dark:text-chalkboard-10 hover:text-chalkboard-110 hover:dark:text-chalkboard-10 ${
const classNames = `action-button m-0 group mono text-sm flex items-center gap-2 rounded-sm border-solid border border-chalkboard-30 hover:border-chalkboard-40 dark:border-chalkboard-70 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 p-[3px] text-chalkboard-100 dark:text-chalkboard-10 ${
props.icon ? 'pr-2' : 'px-2'
} ${props.className || ''}`
} ${props.className ? props.className : ''}`
switch (props.Element) {
case 'button': {
// Note we have to destructure 'className' and 'Element' out of props
// because we don't want to pass them to the button element;
// the same is true for the other cases below.
const { Element, icon, children, className, ...rest } = props
const { Element, icon, children, className: _className, ...rest } = props
return (
<button className={classNames} {...rest}>
{props.icon && <ActionIcon {...icon} />}
@ -57,7 +57,14 @@ export const ActionButton = (props: ActionButtonProps) => {
)
}
case 'link': {
const { Element, to, icon, children, className, ...rest } = props
const {
Element,
to,
icon,
children,
className: _className,
...rest
} = props
return (
<Link to={to || paths.INDEX} className={classNames} {...rest}>
{icon && <ActionIcon {...icon} />}
@ -66,7 +73,14 @@ export const ActionButton = (props: ActionButtonProps) => {
)
}
case 'externalLink': {
const { Element, to, icon, children, className, ...rest } = props
const {
Element,
to,
icon,
children,
className: _className,
...rest
} = props
return (
<Link
to={to || paths.INDEX}
@ -80,7 +94,7 @@ export const ActionButton = (props: ActionButtonProps) => {
)
}
default: {
const { Element, icon, children, className, ...rest } = props
const { Element, icon, children, className: _className, ...rest } = props
if (!Element) throw new Error('Element is required')
return (