A collection of generic React components built using stitches, including components that cover layout, content, data collection, media and a host of other UI concerns.
Home Page: https://atomlearning.design
License: GNU General Public License v3.0
Tabs.TriggerList
Tabs.TriggerList that overflows.When I scroll the Tabs.TriggerList horizontally using a touch device or trackpad for example, the scroll indicator arrows are not hidden when I reach
The scroll indicator (arrow) is still visible.
See above.
It seems that the is-the-end-of-the-list-reached-check is only happening onClick.
Toggle, Toggle Field
Please attach the designs and UX wireframes for this component (or links to the designs).
RadioGroupField
RadioGroup to enable it to display horizontally
We should have rules or guidelines in place for the use case of each layout before introducing this. This would help with making sure that everything is properly documented and that we don’t start introducing inconsistencies across other components that may need optional layout formatting.
AlertDialog
All of our AlertDialogs now have an updated design with an icon in the header and a divider to separate the title
It would be good to avoid having to copy these stylings everytime we need to use this component
Make it possible to add tooltips to any component without much code overhead / hassle
const ButtonWithTooltip = withTooltip(<Button ... />, "Tooltip Text")<Input type=password/> hide/show valueOur PasswordField component has some logic to show or hide the entered password when the user clicks an eye icon. I think we should move this logic down to the underlying Input component so that we get this behaviour whenever type = "password".
This will allow us to compose other, more specific types of password field and get consistent show/hide behaviour for free.
For example, the CreatePasswordField would get it for free.
Please include Browser Name and version, OS and version
Duration (ms) Tokenisation
In favour of the fact that the values we use to style our components are tokenised, can we have all durations to be tokenised as well ?
example : transition: 'transform $<token>'
Form.tsx
Table
Update the styling of the table to match the agreed colours etc
Update the table to have 2 variants that alter the row height:
HiddenInput, FormData or something similar
Something similar to this component, to take collect hidden data in a form:
import React from 'react'
export const Hidden = React.forwardRef(({ fields }, ref) =>
Object.keys(fields).map((key) => (
<input ref={ref} key={key} type="hidden" name={key} value={fields[key] || ''} />
))
)Animations
It would be nice to have a set of default animations (in the form of Utils?) that we can easily add to nodes:
transitions, so that we have the same Bezier curves and durations for our animations throughout the application when we want to transition CSS properties.animation keyframes that we can use as entry effects or after user interaction. For example, a set of predefined animations like Reboundgen or Animate CSS has.Hopefully having the animations easily available will also increase the usage of animations in our application :)
Search Input
https://www.figma.com/file/lXBJN5xPUgN6oUTcfSP01j/Atom-Assessments?node-id=3358%3A21805
ActionIcon
Please include the expected behaviour and the acceptance criteria for this component.
The component currently sets the nested icon size to 20px in case the ActionIcon size is set to lg or xl. However, when using the appearance=simple the smaller icon looks very small so doesn't work visually
Proposal:
Amend the code to allow the size to be cascaded down if the appearance is set to simple?
TBC
List
We also need a variant that doesn't show any bullets before the list items.
Please attach the designs and UX wireframes for this component (or links to the designs).
Button with type='submit' should have href and onClick as optional props since the parent form can also handle the submit
Button with type='submit' and no href or onClick shows TS error 2322:
Property 'href' is missing in type '{ children: string; type: "submit"; isLoading: boolean; "aria-label": string; }' but required in type '{ onClick?: never; href: string; }'.
Please include Browser Name and version, OS and version
Form fields should accept an optional explainerText prop (or similar) to place text between the label and input that explains something about what data being asked for, or how it will be used.
This pattern is used in the Pronouns and Date of Birth fields here:
This design is for the Atom Nucelus US sign-up journey, but this pattern will be used more widely going forward.
Please include the component name that you are amending or the suggested name if it is a new component/feature
https://www.radix-ui.com/docs/primitives/components/avatar - Radix might be overkill for local avatar images, but it has a nice DX
Icon
We are finding that the available sizes on the Icon component sometimes don't cater for all of our needs. Currently, we have to overwrite the size using css prop to introduce a value between sm and medium (20px).
An example where this is done now is that new navigation for the supervisor
Should we consider an in-between size?
There should be no error while running yarn install
Following error is thrown
Packing @atom-learning/components@https://github.com/Atom-Learning/components.git#commit=5dc6fa862d3744d9e87b0106d39f35210b85b4c4 from sources
Using Yarn Classic for bootstrap. Reason: "__metadata" key not found in yarn.lock, must be a Yarn classic lockfile
➤ YN0000: Retrieving https://nightly.yarnpkg.com/latest.js
➤ YN0000: Saving the new release in .yarn/releases/yarn-1.23.0-20210726.1745.cjs
➤ YN0000: Done in 0s 512ms
yarn install v1.23.0-20210726.1745
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
error [email protected]: The engine "node" is incompatible with this module. Expected version "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0". Got "14.5.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
run yarn install
NAME="Ubuntu"
VERSION="20.04.3 LTS (Focal Fossa)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 20.04.3 LTS"
VERSION_ID="20.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=focal
UBUNTU_CODENAME=focal
StackContent or something similar 🤷
This component should wrap standard content components like Text, List, Heading, and add bottom margins to space them properly. e.g.
<StackContent>
<Heading size="lg">Something</Heading> {/* has margin-bottom related to size */}
<Text>Hello</Text> {/* has no margin bottom */}
</StackContent>No designs
Polymorphic Link and Button.
From a Slack message:
I saw another #opinion of Jamies that I’m keen on (we had this change in the DS but removed it before merging) https://twitter.com/buildsghost/status/1389294014222934018 - Does anyone have thoughts on this pattern?
Jamie Kyle 🏳️🌈Jamie Kyle 🏳️🌈 @buildsghost
Design System opinion:
Don't make your and components support both link and button visuals
Do make your and components renders either or based on the props passed to it ("to" should render an anchor, "onClick" should render a button) https://pbs.twimg.com/media/E0fC-UlVoAIzf9l.jpg
TwitterTwitter | May 3rd (49 kB)
N/A
There are equivalent colour transformation methods in this smaller package https://github.com/ricokahler/color2k
Using this validation={{ required: true }} config now will result in no error message being shown.
Could (should?) we provide some default validation messages at the Form level to allow users to pass i18n strings? e.g.
<Form validationMessages={{ required: 'This field is required', valueAsDate: 'Please add a valid date' }}>
<InputField validation={{ valueAsDate: true }} />
<CheckboxField value="yolo" validation={{ required: true }} />
</Form>Button
When isLoading=false, the loader shouldn't appear in snapshots
Occasionally the loader shows up in the parent component's snapshot
Examples:
<div
class="c-dhzjXW c-dhzjXW-ibICGYT-css"
role="alert"
>
<span
style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
>
Loading
</span>
<div
class="c-jBOHFZ c-jBOHFZ-jIYkAt-size-md"
/>
<div
class="c-jBOHFZ c-jBOHFZ-jIYkAt-size-md"
/>
<div
class="c-jBOHFZ c-jBOHFZ-jIYkAt-size-md"
/>
</div>
</div>
This is coming up only in the parent (caller) component
Tabs
The following changes have been requested by the design team
https://www.figma.com/file/lXBJN5xPUgN6oUTcfSP01j/Atom-Assessments?node-id=3358%3A21805
All the components that are wrapped in FieldWrapper, such as InputField and SelectField
If you make a styled version of one of these components, CSS would be applied the component as a whole.
const StyledInputField = styled(InputField, { mt: '$6' })
In this example it should be applying a margin above the label.
If you make a styled version of one of these components, the CSS does not apply to the FieldWrapper and instead applies to the base input component.
Use the following code, you will notice the margin being applied incorrectly as in the screenshot:
const StyledInputField = styled(InputField, { mt: '$6' })
Chrome browser, Mac OSX 12.0.1
Table
The component should render a table with a optional header and footer
Please attach the designs and UX wireframes for this component (or links to the designs).
Badge
We need a badge component in order to be able to replace the react-bootstrap badge.
We need the following states:
Designs available exist in the DS Figma file
for info we can use neutral and for primary we can use (coordinated with Miguel for these options)
Note: the last 2 options are temporary until the colour palette is extended, but it would be easy to replace the colour values so we can build this without the final list of colours
Table
The font colour used in <tbody> is the wrong shade of grey
ValidationError
Regardless of the number of lines of text:
When text wraps to more than one line, the icon and spacing shrink, and the icon vertically aligns with the middle of the text block
Use enough text to wrap to multiple lines
Google Chrome - version 92.0.4515.107 (Official Build) (x86_64)
macOS Big Sur - version 11.4 (20F71)
Button
Update isLoading behaviour to allow text replacement when loading, e.g.
<Button isLoading={{ value: true, message: "Doing something…" }}>Click here to do something</Button>We could retain the same subtle style change as the current loading state but replace the text instead of showing animated dots. I think it could be really useful in more functional dashboards with lots of buttons, to make it clear what is happening.
Not sure about the API for this, value seems a bit meh but it would be nice to use the existing isLoading prop, rather than add a further loadingMessage or similar.
Stitches Config - add config
Passing this config should hide scrollbars - scrollbar: 'none'
scrollbar: () => ({
'&::-webkit-scrollbar': { display: 'none' },
scrollbarWidth: 'none'
})Was it intentional to force the gridTemplateColumns property on the Grid component?
I had a case where I wanted to use gridTemplateColumns: '3fr 1fr 1fr' .
Should it be before ...(css as any)?
components/src/components/grid/Grid.tsx
Line 46 in 8417a32
Table should set css={{ borderCollapse: 'collapse' }} by default
Tabs.tsx
TabsTriggerList.tsx
TabTrigger.tsx
Ideally, I would want it to snap (and select / focus) one tab at a time, per scroll click - think of google sheets scrolling, it snaps to one cell at a time.
Select
We have many situations where we need to use the select component in a controlled state (ie in EnhancedTable etc). Currently, it works but we get a console log error warning us to select one of the modes.
Select elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled select element and remove one of these props. More info: https://fb.me/react-controlled-components
in select (created by Styled.select)
in Styled.select (created by Select)
in Select (at PaperSelection.tsx:136)
in div (created by ForwardRef)
in ForwardRef (created by ForwardRef)
in RunningLayerCountProvider (created by o)
in o (created by ForwardRef)
in RunningLayerCountProvider (created by o)
in o (created by ForwardRef)
in ForwardRef (created by ForwardRef)
in TotalLayerCountProvider (created by o)
in o (created by ForwardRef)
in TotalLayerCountProvider (created by o)
This is caused because defaultValue is set in the component.
We could alter the component to request either the value or the default value and one of them to be mandatory instead of setting it in the component
Open any view that uses the select component in a controlled state (like PaperSelection or EnhancedTable with Pagination)
We should remove this and rely on the value prop to set the initial value
We need to have a component that does all the things Text does apart from applying capsize, which we can use when we want a component to function as a <span>. With capsize applied on Text there is no way to render multiple Text elements as spans without a line break.
This new component could be called BaseText and it would not apply capsize. The component Text could apply styling on top of BaseText via capsize.
Radio Card
Uses radio button group functionality and combines with a card to supply differently styled labels per option
It can likely utilise the RadioButton and RadioButtonGroup components (or logic) but provide the wrapping card and the ability to pass in children to the card.
CheckboxField and RadioGroupField should show a validation error if the props are passed correctly and the form is trigged
They do not show an error
Using react-hook-forms, trigger, it should show the error for both required fields
const TriggerValidation = ({ trigger }) => {
React.useEffect(() => {
trigger()
}, [trigger])
return null
}
<Form
onSubmit={() => null}
render={(props) => (
<>
<TriggerValidation {...props} />
<CheckboxField
label="This is a checkbox"
name="checkbox-error"
validation={{ required: "This is the validation error" }}
/>
<RadioGroupField
name="options-error"
label="Legend for radio fields"
validation={{ required: "This is the validation error" }}
>
<RadioGroupField.Item label="This is a radio button" value="1" />
<RadioGroupField.Item label="This is another radio button" value="2" />
</RadioGroupField>
</>
)}
/>DatePicker
Essentially wrap the functionality of https://github.com/wojtekmaj/react-date-picker and provide a nice UI layer
None available, @Chema-Atom could I get you to take a look if I throw something together?
We're currently using a package that's 4000% (yeah) larger than this one for the same functionality
Tabs
The component should be able to contain an unlimited amount of sections. Each section should have a trigger that displays its name and a container that would take other components as children and render them. Selecting any trigger should swap the currently displayed content with its own and also style that particular trigger as active, while the previously active trigger should become inactive. Only one tab should be active at any given moment.
Wireframes representing the component can be found here.
Alert Dialog
Rendering the second button should become optional or be allowed to be turned off to accommodate for use cases where the user can't go back to the previous step and need to only click the primary button.
This is needed in a few places for the school app
Tab
Tab item disabled shouldn't have cursor pointer
shows cursor pointer
Visit : https://design.atomlearning.technology/components/tabs
Small fix
Brave Latest, MacOS Catalina
All Form Fields (InputField, CheckboxField etc.)
The Form Field components are a nice and easy way to create different form fields without the hassle of hooking it up to react-hook-form. I noticed that the main reason why I sometimes cannot use the wrappers is because I don't need a label, for example when you combine different fields in one fieldset (dates, etc.).
It would be nice if the label is optional or can be hidden (not sure what is better accessibility-wise).
Technically you could hide the label with a CSS selector like & > label, but I don't think that makes our code very clear to read.
This behaviour exists across all form components
When using validation like so, I would expect a red * to appear next to the label indicating that the field is required
<CheckboxField
label="This is a checkbox"
name="checkbox-error"
validation={{ required: 'This is the validation error' }}
/>
The * does not appear as the Field components require a second required prop
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.