feat(Alerts): AlertArea + FadeInStacked #1725
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- @codecademy/gamut-illustrations@0.9.3 - @codecademy/gamut-kit@0.2.30 - @codecademy/gamut-labs@13.1.0 - @codecademy/gamut-styles@9.1.0 - @codecademy/gamut-tests@2.3.0 - @codecademy/gamut@29.3.0 - @codecademy/markdown-overrides@0.5.12 - @codecademy/styleguide@33.2.0
updates required builds for codecov to match CircleCI parallelism for tests (whoops!) Also adds a goal % for the gamut package to at least keep it where it is now (89% ish)
- Removes unused button styles to lower generated CSS (Each theme is around ~1500 characters) - Adds strict theme types to ButtonDeprecated themes to make consolidation going forward easier. - Updates storybook with new variables
- @codecademy/gamut-kit@0.2.31 - @codecademy/gamut-labs@13.1.1 - @codecademy/gamut@29.3.1 - @codecademy/styleguide@33.2.1
- @codecademy/gamut-kit@0.2.32 - @codecademy/gamut-labs@13.1.2 - @codecademy/gamut@29.4.0 - @codecademy/styleguide@33.3.0
Moving the tooltip directly to FormLabel to include tooltip for the FormGroup as well as GridForm
- @codecademy/gamut-kit@0.2.33 - @codecademy/gamut-labs@13.1.3 - @codecademy/gamut@29.4.1 - @codecademy/styleguide@33.3.1
I was changing a banner from a normal banner to an inline banner in the monolith and needed to write this as my type in a state hook:
```
const [banner, setBanner] = useState<
[Exclude<AlertType, 'notice' | 'feature'>, string]
>();
```
The restriction of the AlertType for inlines isn't straightforward to type (`Exclude<AlertType, 'notice' | 'feature'>`), so I'm adding the type alias `InlineAlertType` to make this less burdensome.
- @codecademy/gamut-kit@0.2.34 - @codecademy/gamut-labs@13.1.4 - @codecademy/gamut@29.4.2 - @codecademy/styleguide@33.3.2
Removed redundant react-anonymous-display-name in Babel configs now that it's in the Codecademy preset.
- @codecademy/gamut-icons@4.3.2 - @codecademy/gamut-kit@0.2.35 - @codecademy/gamut-labs@13.1.5 - @codecademy/gamut@29.4.3 - @codecademy/markdown-overrides@0.5.13 - @codecademy/styleguide@33.3.3
Added new regular icon called DeleteFilledIcon
- @codecademy/gamut-icons@4.4.0 - @codecademy/gamut-kit@0.2.36 - @codecademy/gamut-labs@13.1.6 - @codecademy/gamut@29.4.4 - @codecademy/styleguide@33.3.4
Adds a `@codecademy/konamimojisplosion` package exporting a React component that hooks up the [Konami Code](https://en.wikipedia.org/wiki/Konami_Code) to trigger [emojisplosion](https://github.com/JoshuaKGoldberg/emojisplosion).
- @codecademy/konamimojisplosion@0.2.0
- Added animation to AppHeaderDropdown component
- @codecademy/gamut-kit@0.2.37 - @codecademy/gamut-labs@13.2.0 - @codecademy/styleguide@33.3.5
…ird) [GM-189] - Gives inline alert buttons some room to breath at the top.
- @codecademy/gamut-kit@0.2.38 - @codecademy/gamut-labs@13.2.1 - @codecademy/gamut@29.4.5 - @codecademy/styleguide@33.3.6
* Makes this up to date.
* Adds kit installation guide and peerDependency note
- @codecademy/gamut-illustrations@0.9.4 - @codecademy/gamut-kit@0.2.39 - @codecademy/gamut-labs@13.2.2 - @codecademy/gamut-styles@9.1.1 - @codecademy/gamut-tests@2.3.1 - @codecademy/gamut@29.4.6 - @codecademy/konamimojisplosion@0.2.1 - @codecademy/markdown-overrides@0.5.14 - @codecademy/styleguide@33.3.7
### Overview Adds `aria-hidden='true'` to prevent patterns from being picked up by screenreaders. ### PR Checklist - [ ] Related to designs: - [x] Related to JIRA ticket: EGG-947 - [x] I have run this code to verify it works - [ ] This PR includes unit tests for the code change <!-- Merging your changes 1. Follow the [PR Title Guide](https://github.com/Codecademy/client-modules#pr-title-guide), the title (which becomes the commit message) determines the version bump for the packages you changed. 2. Wrap the text describing your change in more detail in the "CHANGELOG-DESCRIPTION" comment tags above, this is what will show up in the changelog! 3. DO NOT MERGE MANUALLY! When you are ready to merge and publish your changes, add the "Ship It" label to your Pull Request. This will trigger the merge process as long as all checks have completed, if the checks haven't completed the branch will be merged when they all pass. **IMPORTANT:** If your PR contains breaking changes, please remember to follow the instructions for breaking changes! -->
- @codecademy/gamut-kit@0.2.40 - @codecademy/gamut-labs@13.2.3 - @codecademy/gamut@29.4.7 - @codecademy/styleguide@33.3.8
…B-1370] [WEB-1371] [GM-191] * Adds lodash like higher order function for looking up theme values in `styled` tagged templates. * Gives us a simple way to ensure that code will always have values from the current context. * Updates typescript to `4.2.3` to ensure number interpolation in paths. We will need these for spacing and fontsizes to work. * Updates `react-hook-form` to `6.8.5` for typescript compatibility. * Updates some types and tests in GridForm to correctly update after the package bump. * Updates some unit tests that might have more asynchronous behavior to RTL to ensure that internal RHF hooks fire correctly.
- @codecademy/gamut-illustrations@0.9.5 - @codecademy/gamut-kit@0.2.41 - @codecademy/gamut-labs@13.2.4 - @codecademy/gamut-styles@9.1.2 - @codecademy/gamut-tests@2.3.2 - @codecademy/gamut@29.4.8 - @codecademy/konamimojisplosion@0.2.2 - @codecademy/markdown-overrides@0.5.15 - @codecademy/styleguide@33.3.9 - @codecademy/variance@0.1.2
…onent [GM-162] * Deprecates old CSS Module text components in favor of a new flexible `Text` component built for UI text.
- @codecademy/gamut-illustrations@0.9.6 - @codecademy/gamut-kit@0.2.42 - @codecademy/gamut-labs@13.2.5 - @codecademy/gamut-styles@9.1.3 - @codecademy/gamut-system@0.6.0 - @codecademy/gamut-tests@2.3.3 - @codecademy/gamut@29.5.0 - @codecademy/konamimojisplosion@0.2.3 - @codecademy/markdown-overrides@0.5.16 - @codecademy/styleguide@33.4.0
* Add standalone `css` and `variant` methods to variance. * Adds richer prop ordering for shorthand properties to ensure overrides happen predictably.
- @codecademy/gamut-illustrations@0.13.4 - @codecademy/gamut-kit@0.3.76 - @codecademy/gamut-labs@15.5.0 - @codecademy/gamut-styles@9.8.0 - @codecademy/gamut-tests@2.3.27 - @codecademy/gamut@32.11.0 - @codecademy/konamimojisplosion@0.2.27 - @codecademy/markdown-overrides@0.5.39 - @codecademy/styleguide@36.13.2
Add BrowserPuzzle and Python illustrations.
- @codecademy/gamut-illustrations@0.14.0 - @codecademy/gamut-kit@0.3.77 - @codecademy/gamut-labs@15.5.1 - @codecademy/gamut@32.11.1 - @codecademy/styleguide@36.13.3
- @codecademy/gamut-kit@0.3.78 - @codecademy/gamut-labs@15.5.2 - @codecademy/gamut@32.12.0 - @codecademy/styleguide@36.14.0
- @codecademy/gamut-kit@0.3.79 - @codecademy/gamut-labs@15.5.3 - @codecademy/gamut@32.12.1 - @codecademy/styleguide@36.14.1
This PR aims to add a few icons to the list of Regular icons for business use.
- @codecademy/gamut-icons@4.10.0 - @codecademy/gamut-kit@0.3.80 - @codecademy/gamut-labs@15.5.4 - @codecademy/gamut@32.12.2 - @codecademy/styleguide@36.14.2
…cturing - Converts SelectDropdown to a ControlledComponent + better type performance (thanks to ✨ @codecaaron ✨) - Creates a SelectContainer so we can pass inputProps onto the `<input/>` HTML element generated by React-Select (required for use with ReactRecurly) - Moves SelectDropdown to it's own comfy little page on Storybook > I am expecting the next iteration of SelectDropdown to stray even further from our standard Select as we move into custom JSX option territory, so this restructure is something of a pre-emptive strike. - Fixes onChange/activated weirdness
- @codecademy/gamut-kit@0.3.81 - @codecademy/gamut-labs@15.5.5 - @codecademy/gamut@32.13.0 - @codecademy/styleguide@36.15.0
* Adds `layout` `spacing` `positioning` `color` to a styled SVG element that is consumed in each template. * Adds a step to only forward valid attributes for width and height ensuring that we maintain svg display attributes where possible. * Updates build step in CI to include required packages when building icons for tests gamut-system, variance, and gamut-styles. * Updates Alert Icon to use system props.
- @codecademy/gamut-icons@4.11.0 - @codecademy/gamut-kit@0.3.82 - @codecademy/gamut-labs@15.5.6 - @codecademy/gamut@32.14.0 - @codecademy/styleguide@36.16.0
Collaborator
📬Published Alpha Packages:@codecademy/gamut-kit@0.3.83-alpha.6cc984.0 |
Collaborator
|
🚀 Styleguide deploy preview ready! |
codecaaron
commented
May 13, 2021
Comment on lines
+53
to
+65
| system.variant({ | ||
| prop: 'toggleState', | ||
| defaultVariant: 'collapsed', | ||
| base: { svg: { transition: '200ms transform' } }, | ||
| variants: { | ||
| collapsed: {}, | ||
| expanded: { | ||
| svg: { | ||
| transform: 'rotate(180deg)', | ||
| }, | ||
| }, | ||
| }, | ||
| }) |
Contributor
Author
There was a problem hiding this comment.
We should probably standardize this somewhere or at least account for some interaction design with IconButtons overall
4 tasks
4 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
PR Checklist