GithubHelp home page GithubHelp logo

toeverything / design Goto Github PK

View Code? Open in Web Editor NEW
22.0 22.0 12.0 19.56 MB

Design System for AFFiNE and BlockSuite

License: Mozilla Public License 2.0

TypeScript 95.14% Shell 0.45% JavaScript 4.37% HTML 0.04%

design's People

Contributors

catsjuice avatar danielchim avatar doouding avatar flrande avatar fourdim avatar himself65 avatar hwangdev97 avatar jimmfly avatar joooye34 avatar lawvs avatar pengx17 avatar qishaoxuan avatar regischen avatar svaney-ssman avatar zanwei avatar zqran avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

sevenoutman zqran flrande danielchim sparo-tech matthewkyleherren fourdim wolfworldwidedigital zanwei hwangdev97 catsjuice

design's Issues

React does not recognize the `withoutHoverStyle` prop on a DOM element. 

Warning: React does not recognize the `withoutHoverStyle` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `withouthoverstyle` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
  at div
  at ButtonIcon
  at button
  at eval (webpack-internal:///./node_modules/@toeverything/components/dist/button.js:77:64)
  at div
  at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:57:66)
  at ClickAwayListener (webpack-internal:///./node_modules/@mui/base/ClickAwayListener/ClickAwayListener.js:42:5)
  at Popper (webpack-internal:///./packages/component/src/ui/popper/popper.tsx:25:19)
  at Menu (webpack-internal:///./packages/component/src/ui/menu/menu.tsx:18:13)
  at div
  at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:57:66)
  at CollectionList (webpack-internal:///./packages/component/src/components/page-list/view/collection-list.tsx:129:27)
  at div
  at div
  at div
  at div
  at Header (webpack-internal:///./apps/core/src/components/pure/header/index.tsx:88:19)
  at WorkspaceHeader (webpack-internal:///./apps/core/src/components/workspace-header.tsx:110:28)
  at AllPage (webpack-internal:///./apps/core/src/pages/workspace/all-page.tsx:60:106)
  at Component
  at RenderedRoute (webpack-internal:///./node_modules/react-router/dist/index.js:518:5)
  at Outlet (webpack-internal:///./node_modules/react-router/dist/index.js:1066:26)
  at div
  at MainContainer (webpack-internal:///./packages/component/src/components/workspace/index.tsx:38:26)
  at Suspense
  at div
  at AppContainer (webpack-internal:///./packages/component/src/components/workspace/index.tsx:21:25)
  at AppContainer (webpack-internal:///./apps/core/src/components/affine/app-container.tsx:19:89)
  at DndContext (webpack-internal:///./node_modules/@dnd-kit/core/dist/core.esm.js:2844:5)
  at WorkspaceLayoutInner (webpack-internal:///./apps/core/src/layouts/workspace-layout.tsx:198:33)
  at Suspense
  at CurrentWorkspaceContext (webpack-internal:///./apps/core/src/layouts/workspace-layout.tsx:112:36)
  at SWRConfig (webpack-internal:///./node_modules/swr/_internal/dist/index.mjs:556:13)
  at Provider (webpack-internal:///./apps/core/src/components/cloud/provider.tsx:78:25)
  at AdapterProviderWrapper (webpack-internal:///./apps/core/src/components/adapter-worksapce-wrapper.tsx:19:35)
  at WorkspacesSuspense (webpack-internal:///./apps/core/src/layouts/workspace-layout.tsx:149:55)
  at Component
  at RenderedRoute (webpack-internal:///./node_modules/react-router/dist/index.js:518:5)
  at RenderErrorBoundary (webpack-internal:///./node_modules/react-router/dist/index.js:465:5)
  at DataRoutes (webpack-internal:///./node_modules/react-router/dist/index.js:975:5)
  at Router (webpack-internal:///./node_modules/react-router/dist/index.js:1087:15)
  at RouterProvider (webpack-internal:///./node_modules/react-router/dist/index.js:915:5)
  at DebugProvider (webpack-internal:///./apps/core/src/app.tsx:45:26)
  at f (webpack-internal:///./node_modules/next-themes/dist/index.module.js:7:597)
  at $ (webpack-internal:///./node_modules/next-themes/dist/index.module.js:7:348)
  at ThemeProvider (webpack-internal:///./packages/component/src/components/theme-provider/index.tsx:45:26)
  at Provider (webpack-internal:///./node_modules/jotai/esm/react.mjs:19:3)
  at ProviderComposer (webpack-internal:///./packages/component/src/components/provider-composer/index.tsx:13:29)
  at AffineContext (webpack-internal:///./packages/component/src/components/context/index.tsx:31:19)
  at SessionProvider (webpack-internal:///./node_modules/next-auth/react/index.js:454:24)
  at App
  at Suspense 
  at div
  at ButtonIcon
  at button
  at eval (webpack-internal:///./node_modules/@toeverything/components/dist/button.js:77:64)
  at div
  at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:57:66)
  at ClickAwayListener (webpack-internal:///./node_modules/@mui/base/ClickAwayListener/ClickAwayListener.js:42:5)
  at Popper (webpack-internal:///./packages/component/src/ui/popper/popper.tsx:25:19)
  at Menu (webpack-internal:///./packages/component/src/ui/menu/menu.tsx:18:13)
  at div
  at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:57:66)
  at CollectionList (webpack-internal:///./packages/component/src/components/page-list/view/collection-list.tsx:129:27)
  at div
  at div
  at div
  at div
  at Header (webpack-internal:///./apps/core/src/components/pure/header/index.tsx:88:19)
  at WorkspaceHeader (webpack-internal:///./apps/core/src/components/workspace-header.tsx:110:28)
  at AllPage (webpack-internal:///./apps/core/src/pages/workspace/all-page.tsx:60:106)
  at Component
  at RenderedRoute (webpack-internal:///./node_modules/react-router/dist/index.js:518:5)
  at Outlet (webpack-internal:///./node_modules/react-router/dist/index.js:1066:26)
  at div
  at MainContainer (webpack-internal:///./packages/component/src/components/workspace/index.tsx:38:26)
  at Suspense
  at div
  at AppContainer (webpack-internal:///./packages/component/src/components/workspace/index.tsx:21:25)
  at AppContainer (webpack-internal:///./apps/core/src/components/affine/app-container.tsx:19:89)
  at DndContext (webpack-internal:///./node_modules/@dnd-kit/core/dist/core.esm.js:2844:5)
  at WorkspaceLayoutInner (webpack-internal:///./apps/core/src/layouts/workspace-layout.tsx:198:33)
  at Suspense
  at CurrentWorkspaceContext (webpack-internal:///./apps/core/src/layouts/workspace-layout.tsx:112:36)
  at SWRConfig (webpack-internal:///./node_modules/swr/_internal/dist/index.mjs:556:13)
  at Provider (webpack-internal:///./apps/core/src/components/cloud/provider.tsx:78:25)
  at AdapterProviderWrapper (webpack-internal:///./apps/core/src/components/adapter-worksapce-wrapper.tsx:19:35)
  at WorkspacesSuspense (webpack-internal:///./apps/core/src/layouts/workspace-layout.tsx:149:55)
  at Component
  at RenderedRoute (webpack-internal:///./node_modules/react-router/dist/index.js:518:5)
  at RenderErrorBoundary (webpack-internal:///./node_modules/react-router/dist/index.js:465:5)
  at DataRoutes (webpack-internal:///./node_modules/react-router/dist/index.js:975:5)
  at Router (webpack-internal:///./node_modules/react-router/dist/index.js:1087:15)
  at RouterProvider (webpack-internal:///./node_modules/react-router/dist/index.js:915:5)
  at DebugProvider (webpack-internal:///./apps/core/src/app.tsx:45:26)
  at f (webpack-internal:///./node_modules/next-themes/dist/index.module.js:7:597)
  at $ (webpack-internal:///./node_modules/next-themes/dist/index.module.js:7:348)
  at ThemeProvider (webpack-internal:///./packages/component/src/components/theme-provider/index.tsx:45:26)
  at Provider (webpack-internal:///./node_modules/jotai/esm/react.mjs:19:3)
  at ProviderComposer (webpack-internal:///./packages/component/src/components/provider-composer/index.tsx:13:29)
  at AffineContext (webpack-internal:///./packages/component/src/components/context/index.tsx:31:19)
  at SessionProvider (webpack-internal:///./node_modules/next-auth/react/index.js:454:24)
  at App
  at Suspense

New Menu Component - Design Guideline​

Description

The "menu" component needs to have the following:

the figma link

Items

1.Base list items:

image

It should support the option to show or hide the following attributes:

  • Drag indicator on the left
  • Left icon
  • Text information
  • Right icon
  • Secondary arrow on the right

It should be able to display different states:

  • Default
  • Hover
  • Selected: Requires two styles, one associated with the right icon.
  • Disabled

Size information:

shot-2023-08-22-18 58 52@2x

2. Title list item

image

The title column defaults to uppercase text.

The title column has:

  • Left icon (usually for returning)
  • Text (default is uppercase)
  • Action button: the action button has a hover state.

Size info:

shot-2023-08-22-19 01 38@2x

3. Divider

shot-2023-08-22-19 02 42@2x

0.5px, default is dividerColor.

4. delete list item

Typically, the delete button should be at the bottom of the list, separated by a divider above it. The hover state for the delete button is red.

shot-2023-08-22-19 03 12@2x

Size info:

shot-2023-08-22-19 04 10@2x

5. Search Item

The style of the search item is relatively independent. Typically, the search item appears at the top of the list, separated by a divider:

shot-2023-08-22-19 13 50@2x

Size info

shot-2023-08-22-19 14 13@2x

6. Input Item

It's basically consistent with the search item. Typically, the input item appears at the top of the list, separated by a divider.

shot-2023-08-22-19 15 00@2x

And input item need support tooltips，only when hover:

shot-2023-08-22-19 21 10@2x

Size info:

shot-2023-08-22-19 17 07@2x

Layout

the layout of menu:

shot-2023-08-22-19 18 55@2x

and the submenu:

shot-2023-08-22-19 19 56@2x

the mini width of menu is 180px

== Check the the figma link ==

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.