I believe the table component has already been implemented. However, there are some changes needed, as per the figma designs.

NOTE: the designers and devs should add what needs to be updated in the notion page. We may have to wait a while until that's done.

Figma link

Notion link

When using a Typograpgy component with the genericFontFamily property, a browser consoles shows this error

Warning: React does not recognize the `genericFontFamily` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `genericfontfamily` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

I can remove the error if I pick up genericFontFamily from Typography.tsx as below but not sure if this could have a side effect.

export const Typography: React.FC<TypographyProps> & {
  classes: typeof typographyClasses
} = ({
  color,
  variant = 'body1',
  component,
  className,
  children,
  genericFontFamily,  // change1
  ...props
}) => {
  const commonProps = useCommonProps({ ...props, genericFontFamily })  // change2
  const componentName =
    component ??
    (
      {
        h1: 'h1',
        h2: 'h2',
        h3: 'h3',
        h4: 'h4',
        h5: 'h5',
        h6: 'h6',
        label1: 'label',
        label2: 'label',
      } as Record<TypographyVariants, string>
    )[variant] ??
    'span'

  const Component = componentName as any as React.ComponentType<TypographyProps>

  return (
    <Component
      className={clsx(
        commonProps.className,
        typographyClasses.root,
        typographyClasses[variant],
        color && typographyClasses[color],
        className,
      )}
      {...props}
    >
      {children}
    </Component>
  )
}

Typography.classes = typographyClasses

Modal implementation is missing. A modal is a window positioned above the page content to direct the user's attention solely toward a single task or piece of information.

Available sizes: Large, Medium, Small.

Figma link

Notion link

Fixed the console error below.

The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".

• How to install
• How to use Theme provider
• Setup in various frameworks
• best practices

We should implement a number input component. It should allow users to input a numeric value and adjust the value incrementally using a two-segment control.

Available sizes: Large, Medium, Small.

Figma Link

The dropdown component should have props like: isOpen, isClosed, and callbacks when opening and closing.

Figma link

Notion link

The next release should have a date picker component. There's some work already done in the following PR:

#19

A date range picker would be a pleasant addition. There was already some work on this:

Date picker PR

Date range picker PR

Figma link

Notion link

In some components (maybe all of them?) underline makes more sense than outlined-bottom.

Notion link

Using the <Dropdown/> component like:

<Dropdown options={sortByOptions} value={sortBy} onChange={(value) => setSortBy(value.toString())} />

causes the error:

Veronika said she wasn't sure if this component is necessary. It'd be nice if someone could confirm (and possibly implement this).

Figma link

Notion link

There should be a button group component in the next release. A button group component combines multiple button components, inheriting all their available styles.

Figma link

Notion link

I am unsure if this is a bug, if not, please close this issue.

When using the <Card> component like so:

 <Card onClick={onClick} size="large">
   <CardHeader>
   ...
   </CardHeader>
   <CardBody>
   ....
   </CardBody>
 </Card>

The style applied is empty:

The same is valid for sizes small and medium.

I would expect to have standardized sizes for different <Card> variants.

Proposal: Add Support for React Hooks to LSD

Summary

I am proposing the implementation of React hooks to enhance the performance and flexibility of the design system.

Motivation

React hooks are a powerful tool that enables developers to write functional components with state and lifecycle methods. By adding support for React hooks, LSD can provide a more modern and flexible approach to building UI components and applications.

Proposed Solution

To add support for React hooks to LSD, we would need to collaborate as a team with the help of community and dedicate resources to the development and implementation of the feature. Specifically, we could:

• Research and identify which React hooks would be most useful for the LSD community
• Develop and test the implementation of React hooks within LSD
• Update the documentation and provide examples for how to use the new feature

Proposed Hooks

We could consider adding the following React hooks to LSD, categorized by Enhancement, Utilities, and Development:

Enhancement

• useKeyboard
• useInput
• useModal
• useTabs
• useToast?

Utilities

• useBodyScroll
• useClipboard
• useMediaQuery

Development

• useTheme
• useClasses

Benefits

By adding support for React hooks to LSD, we can improve the performance and flexibility of the design system, making it a more powerful tool for developers. The proposed hooks can enhance the user experience, improve productivity, and simplify the development process.

Next Steps

To keep the discussion going and decide on the final list of React hooks to be added to LSD, we can:

• Create a separate document or thread to brainstorm and discuss potential React hooks
• Gather feedback and suggestions from the LSD community and evaluate the feasibility and usefulness of each proposed hook
• Once the final list is decided, move them to the LSD's feature list and start the development process

As for where to host the list of proposed React hooks, we could use either GitHub or Notion. Both platforms offer collaborative features and can be accessed by the LSD community. We can choose the platform that best fits our needs and preferences.

Cheers 🍻

The button's icon should be inside a frame - this wil improve spacing when the button width is hugged:

Notion link

Material design icons are available under the Apache License Version 2.0, which requires attribution and a copy of the license in the product.

Do we need to separate these components? if so what are the specs per component

The Toast component should show display a brief message or give feedback in response to a particular action.
Available styles: Inline, Toast.
Available sizes: Large, Medium, Small.

Figma link

Notion link

https://github.com/acid-info/lpe-temp/pull/2#discussion_r1313577822

Adding theme vars for spacing would be useful.

Figma link

Notion link

The current LsdIcon component should be renamed to just Icon.

Note that LSD icons are currently Material Icons. This should also change in the future.

• update text from notion
• update typography tokens based on new scaling system
• update readme file