-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update workflow #21
base: master
Are you sure you want to change the base?
Update workflow #21
Conversation
S-unya
commented
Nov 18, 2022
- Update workflow
- Add example Radix component
- Add example bespoke component
- Setup storybooks
- Setup vitest
README.md
Outdated
@@ -30,7 +30,7 @@ import { | |||
FormInput, | |||
FormInputGroup, | |||
FormSelect | |||
} from 'aerian-component-library'; | |||
} from 'aerated'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
... is it just aerated?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure yet... I will work this all out once we decide on the way that we are managing versioning,etc. I'm going to remove all this.
return "props" in element; | ||
}; | ||
|
||
export interface AerAlertDialogProps extends DefaultProps<"div"> { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sold on the API of this atm if I understand it correctly - I'd need to import three components to have it working correctly. What are the benefits of requiring this over providing more props for text elements etc.
And some other thoughts:
trigger
can just be a string?- Can
dialogTitle
type includestring
and render a default h tag? Though the question would be what's the appropriate h tag? If the wrapper is a section, does it matter? 🤔 - I'd prefer props as
foo
overdialogFoo
- it's already being called as a dialog
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- The purpose of the multiple elements imports was to give more control over the styling of, e.g. the footer by passing
className
. Given that I have removed the "trigger" as it wasn't giving that benefit, but I can still see the need for a footer that you can pass aclassName
to. - Trigger must be a button, and I have now typed it as such
- I have allowed the title to be a string now - this is a good suggestion for DX 👍
- Agreed, done.
) : ( | ||
<AlertDialog.Title | ||
className={cx(styles.title, { | ||
[styles.visuallyHidden]: dialogTitle.hideTitle === false, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should this be the inverse?
[styles.visuallyHidden]: dialogTitle.hideTitle === false, | |
[styles.visuallyHidden]: dialogTitle.hideTitle, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
import { DefaultProps } from "../../types/types"; | ||
import styles from "./AerButton.module.scss"; | ||
|
||
export type AerButtonVariants = |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No secondary
?!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is a default and a primary, tertiary is deliberately skipping a level to indicate it is much less obvious than the other buttons... though it might be better named linkLike
... what do you think?
| "primary" | ||
| "tertiary" | ||
| "important" | ||
| "default"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
you could make these a discriminated union of booleans, allowing only one at a time, like this
it's pretty verbose, but makes for a nice api
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That is useful for elsewhere, but you cannot put 2 different versions of this in the variant... so perhaps overkill for this?
line-height: var(--lh-heading-xs); | ||
} | ||
|
||
strong { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we could also add styles for <em>
and <s>
if relevant?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
They will have browser styles, the purpose of this is so that it picks up the correct font.
From what I could understand, all looked good to me. Just a couple of CSS changes to consider:
|
…omponent-library into update-packaging
Co-authored-by: Oli Booty <[email protected]>