formaat-design / reshaped Goto Github PK

postcss-custom-media has an issue with misusing the Postcss.8 api which causes it to not work with some other plugins

• Discuss the pricing model
• API checkout redirect
• Webhook to create a placeholder account on checkout purchase
• Delete old pricing API endpoints
• Create an updated user data format and a migration for it
• Implement all PricingDetail components with data
• Implement navigation in between steps
• Implement layout component used on all steps
• Implement payment form with Stripe payment component
• Implement account confirmation form
• Animations
• Form validation / API review
  • New user creation
  • Current user data
• Fix bugs
  • Stripe focus state and height
  • Tabs input focus state
  • Tabs keyboard navigation when input is focused
  • Responsive Frame padding
• Sign in form
• Render releases page based on the seats and source code expiration
• Publish source code
  • Review source code
  • Add script for zipping
• UI improvements
  • Align PricingDetail with PricingSelection first card
  • Update PricingDetail design
  • Swap payment step layout columns
  • Update Hidden API to work the same as other responsive components
  • Update Success step design (image preview, alignment, etc)
• Review
  • Add thumbnails
  • Review Included copy
  • Review license
  • No automatic renewal label
  • Alignment on success stage
  • Fix paymentIntent creation on form submit error
• Rollout
  • Update price to 79
  • Production data migration

• Review the style of demos (how abstract they should be, style of placeholder elements)
• Proof-read all tech documentation
• Review demos

Before the release:

• Merge SegmentedControl with Tabs?
• Check all code is minified for publishing

Components like Tooltip or Dropdown always render in the element. There is a z-index issue happening because of this approach.

If there are fixed elements on the page, Tooltips used on the page should be displayed under that element, but Tooltips called from that element, should be rendered above it. This is not happening right now because Flyout components are using the same z-index value.

Ideas:

• Potentially supporting relative rendering for Flyout components could solve the issue

Should we update highlighted faded to work on white better?

Add documentation on where to get icon assets and how to better use them. Currently we rely on icons using currentColor on its elements (like in Feather icons). It would be better to find a way to use icons that can work with fill: currentColor coming from CSS.

After the first part of the Figma library will be ready, we need to add it to the release process of the code library and add it to the changelog download links.

• Add figma download button
• Add figma archives
• Add figma installation guide

Implement the dribbble page demo in Figma including all viewport sizes

Review React and Figma libraries in preparation for 1.0 release

• Review design tokens
  • Review all values and names
  • Custom font for the default theme
  • Colors
    • Highlighted colors
    • Change on colors to use foreground from light mode instead of black
  • Shadows
    • Adjust base shadow for smaller elements like elevated buttons
• Review components
  • Should we drop button outlined background?

TODO: Add description

Implement all components available in Arcade React library and include it into the release process

• action bar
• avatar
• badge
• button
• card
• checkbox
• divider
• dropdown menu
• loader
• link
• menu item
• modal
• overlay
• popover
• progress
• radio
• segmented control
• select
• switch
• tabs
• text area
• text field
• tooltip

Update button styles according to the latest design in Figma library

TODO: Add description

• Change Hidden render props arguments format to return className as the first argument instead of returning an object
• Check other render props components if the same has to be done there

• Add a way to apply shadows displayed before the components for position "bottom"
• Add elevated flag for action bars displayed on top of other content (like fixed position)

TODO: Add description

Using esModule: true in webpack css-loader, style-loader and mini-css-extract-plugin changes the way CSS modules are exported. If named exports are not used – it gets an additional default field added.

Switching to import * as s and using camelCase in the style selectors, including modificators, might potentially solve the problem for both enabled and disabled esModule values.

• Update CSS imports implementtion
• Try to setup Vite demo

After each documentation article, add navigation controls for the previous and next pages

• TextField icon property
• Select icon property

Options:

• Support custom padding value through a number value
• Support a size property (8px, 16px - default, 24px?)
• padded flag might turn into padding={0} or size="???"

Remove the duplicated logic by adding icon support to Link and auto switching Link to inline-flex to inline when icon is used.

Find or create a plugin for switching themes in FIgma

• Implement light and dark mode design tokens and package them as a library
• Review code in case there are any adjustments to be made
• Review iconography

Preserve the mobile text field and select height to make sure it's aligned with Button

Currently Frame works for a number of cases, like a shortcut for flexbox API children positioning, defining its dimensions etc. Research what else it can be responsible for without going into an approach of building absolutely everything with Frame.

Avatar component currently supports a number of size presets. Since we now support runtime css values passed through properties, we can update Avatar sizes to use dynamic sizing as well.

• Can we increase x12 avatar icon size to x5 or do we need another formula?
  

For the cases of clickable Cards with other links or buttons inside, we need to support an "overlay clickable area" that will cover the whole card.

Check the behaviour on the demo page + add tests

Add documentation and examples for popular frameworks

• Next
• Webpack
  • Fix popover bottom padding
  • Ghost button styles order
  • Update arcade version
• CRA
• Parcel
  • Cleanup postcss configs
  • Add postcss as a peerdependency
  • Update to PostCSS 8
    • Resolve build process
    • Resolve Storybook build process
  • Remove test folders from published packages
  • Migrate to the latest MDX integration on the website
  • Migrate front-matter to data exports
• Update Next demo
• Check demos
• Documentation on the website

Documentation

• Make cross links full width on mobile
• Avoid remounting of the examples on scroll
• Fix examples that don't fit on mobile (make them scrollable?)
• Switching theme shouldn't remount the page

• To avoid using margin left and top as auto together, we'll make split a non-responsive property for now
• Figure out the item size gap issue after migration to flex gap

Components:

• Chip / Large badge
• Toast
• Carousel
• SkeletonLoader
• Table
• Calendar
• Breadcrumbs
• Input number
• Input pin
• Slider (to pick values)

Improvements

• Stack: Custom columns amount
• Stack item: gapAfter
• Button/Inputs composition through removing border-radius
• Modal: Render inside target element instead of body
• Modal: Render without an overlay / pushing content?

Add multiple features to improve overall documentation experience and discoverability of articles users are looking for.

• Implement Intro demo MDX widget
• Implement highlights MDX widget
• Add table of contents
• Add heading links
• Update code snippets design
• Fix tab size in code snippets
• Review documentation
  • Add component introduction demo to all articles
  • Add highlights for all articles
  • Check that code snippets are working
• Related components
• Placeholder styles
• Demo background color
• Add documentation search

• Merge components
• Remove top position
• Change size to px
• Support dynamic padding with tokens + responsive values
• Custom popover padding

Since in Minimal theme on landing page Primary color is white in dark mode switch handle is not visible. Could we use an onColor for such cases or is there a better solution?

Having diabled UI element often could be considered harmfull for UX.
User may not have understanding of the actual reason why it is disabled.

There is a pattern when we apply disabled appearance and readonly state to control, so:

• Buttons could be passed with special onClick handler to provide proper feedback to user about reason it appeared disabled.
• Inputs in readonly mode allows text selection with mouse and keyboard therefore having better accessibility compared to its disabled counterpart.

Move Privacy, Terms and conditions and License pages from other resources to the landing page to improve their discoverability

During theme transformation from JS definition to CSS variables, we currently transform them to the end values that can be used directly in the product. Since there are currently no color function in CSS, it's not possible to apply custom opacity values to them.

Therefore we need to support rgb values not wrapped with a CSS rgb function, e.g. --arcade-color-white: 255, 255, 255.

• Add theme generators for RGB strings
• Migrate Button and MenuItem to new RGB string tokens
• Update tokens documentation

Improve design tokens documentation to include visual examples and interactive demos of the tokens

Since Button text variant is now supported via Link component, we should add icon support to Link.

• White variant
• Add another size, small as default

Review additional use cases where Container can be used and what it needs to cover them. Since it currently defines single padding value, if we want to customise that - we'll need to apply bleed through some css variable.

• Custom padding, property name to take from the Grid naming in Figma

• Review for the API changes
• Review against the comments left

Fix mini-css-extract-plugin css ordering issue