Improve editor tab styles #38

pomber · 2021-03-14T18:04:50Z

It isn't perfect, but it handles multiple tabs or tabs with long names better.

📦 Published PR as canary version: 0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0

✨ Test out this PR locally via:

npm install @code-hike/classer@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
npm install @code-hike/code-diff@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
npm install @code-hike/mini-browser@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
npm install @code-hike/mini-editor@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
npm install @code-hike/mini-frame@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
npm install @code-hike/mini-terminal@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
npm install @code-hike/player@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
npm install @code-hike/script@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
npm install @code-hike/scroller@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
npm install @code-hike/scrollycoding@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
npm install @code-hike/sim-user@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
npm install @code-hike/smooth-column@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
npm install @code-hike/smooth-lines@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
npm install storybook@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
# or 
yarn add @code-hike/classer@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
yarn add @code-hike/code-diff@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
yarn add @code-hike/mini-browser@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
yarn add @code-hike/mini-editor@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
yarn add @code-hike/mini-frame@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
yarn add @code-hike/mini-terminal@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
yarn add @code-hike/player@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
yarn add @code-hike/script@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
yarn add @code-hike/scroller@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
yarn add @code-hike/scrollycoding@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
yarn add @code-hike/sim-user@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
yarn add @code-hike/smooth-column@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
yarn add @code-hike/smooth-lines@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0
yarn add storybook@0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0

Version

Published prerelease version: v0.3.0-next.2

Changelog

🐛 Bug Fix

Turn onlyPublishWithReleaseLabel on #34 (@pomber)
Remove submodule (@pomber)
Update (@pomber)
Remove code-sections (@pomber)
Update sections (@pomber)
v0.0.0 (@pomber)
Update site submodule (@pomber)
Add site submodule (@pomber)
Remove more submodules (@pomber)
Remove some submodules (@pomber)
Yarn upgrade (@pomber)
Change root scripts (@pomber)
Add update version command (@pomber)
Update screencast (@pomber)
Use line height (@pomber)
Remove theme from storybook (@pomber)
Add demo (@pomber)
Add module (@pomber)
@code-hike/mini-editor, storybook
- Improve editor tab styles #38 (@pomber)
- Add button property to mini-editor (@pomber)
- Add stateful editor stories (@pomber)
- Add focus by column story (@pomber)
- Add mini-editor stories (@pomber)
@code-hike/script
- Add release workflow #32 (@pomber)
@code-hike/classer, @code-hike/code-diff, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/player, @code-hike/scroller, @code-hike/scrollycoding, @code-hike/sim-user, @code-hike/smooth-column, @code-hike/smooth-lines, storybook
- v0.0.0-4333a8b (@pomber)
- v0.0.0-6a4ea1c (@pomber)
- v0.0.0-e48fa74 (@pomber)
- v0.0.0-1f0ad83 (@pomber)
- v0.0.0-cde697c (@pomber)
@code-hike/scrollycoding, storybook
- Make steps clickable (@pomber)
- Add hidden param to files (@pomber)
- Extend files from previous step (@pomber)
- Remove preset param from mdx steps (@pomber)
- Update to sandpack to alpha-27 (@pomber)
- Fix scrollytelling story (@pomber)
- Rename stepCode (@pomber)
- Add sandpack (@pomber)
- Add small screen styles (@pomber)
- Add scrollycoding story (@pomber)
@code-hike/scrollycoding
- Remove comments (@pomber)
- Fix links without href (@pomber)
- Add anchor component (@pomber)
- Add sandpack colors for loading screen (@pomber)
- Add links to csb (@pomber)
- Sandpack alpha-31 (@pomber)
- Split layouts (@pomber)
- Update to sandpack alpha-26 (@pomber)
- Fix focus margin (@pomber)
- Focus redesign (@pomber)
- Fix media query (@pomber)
- Add media query (@pomber)
- Add props (@pomber)
- Make sticker flex (@pomber)
- Refactor scrollycoding (@pomber)
- Bump sandpack (@pomber)
- Use sandpack alpha-15 (@pomber)
- Add docs (@pomber)
- Remove console log (@pomber)
- Add presets (@pomber)
- Read filenames and lang from mdx (@pomber)
- Extract hike (@pomber)
- Remove extra styles (@pomber)
- Add class to focus icon (@pomber)
@code-hike/mini-browser, @code-hike/scrollycoding
- Use link instead of hash to avoid double updates (@pomber)
- Extract mini browser (@pomber)
- Browser props (@pomber)
@code-hike/mini-editor, @code-hike/scrollycoding, storybook
- Add scrollycoding mdx (@pomber)
@code-hike/classer
- Add link to thread (@pomber)
- Add readme (@pomber)
@code-hike/classer, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/scrollycoding
- Add classer (@pomber)
@code-hike/scroller, storybook
- Fix intersection observer in Safari (@pomber)
@code-hike/code-diff, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/player, @code-hike/scroller, @code-hike/scrollycoding, @code-hike/sim-user, @code-hike/smooth-column, @code-hike/smooth-lines, storybook
- v0.0.0-aa6efee (@pomber)
- v0.0.0-b57b267 (@pomber)
- v0.0.0-33f17eb (@pomber)
- v0.0.0-211ab01 (@pomber)
- v0.0.0-6dfbe3d (@pomber)
- v0.0.0-133ab88 (@pomber)
- v0.0.0-4adbd70 (@pomber)
- Add scrollycoding package (@pomber)
@code-hike/mini-editor, @code-hike/scrollycoding
- Add file name to focus component (@pomber)
- New smooshpack version (@pomber)
- Auto resize (@pomber)
- Cascade code and preview props (@pomber)
- Add scrollycoding slots (@pomber)
storybook
- Add storybook actions (@pomber)
- Move storybook (@pomber)
@code-hike/mini-browser, @code-hike/scrollycoding, storybook
- Change focus style (@pomber)
@code-hike/mini-browser, storybook
- Add back mini browser (@pomber)
- Add browser transition (@pomber)
- Fix browser default url (@pomber)
@code-hike/code-diff, @code-hike/mini-browser
- Add url tests (@pomber)
@code-hike/mini-editor, @code-hike/mini-frame, @code-hike/smooth-lines
- Full width lines for easier text selection (@pomber)
@code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/script, @code-hike/scrollycoding, storybook
- Use sass (@pomber)
@code-hike/code-diff, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/player, @code-hike/scroller, @code-hike/scrollycoding, @code-hike/sim-user, @code-hike/smooth-column, @code-hike/smooth-lines
- v0.0.0-8cbbd89 (@pomber)
@code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, storybook
- Change styles (@pomber)
@code-hike/mini-editor
- Start code-walk refactor (@pomber)
- Remove console logs (@pomber)
- Add stateful editor (@pomber)
- Remove code-surfer (@pomber)
- Change editor padding (@pomber)
- Use vscode theme (@pomber)
- Use line height (@pomber)
- Change line padding (@pomber)
- Remove line outline (@pomber)
- Fix null code (@pomber)
- Measure longest line for each step (@pomber)
- Recalculate code height (@pomber)
- Focus extremes (@pomber)
- Add focus to transtion (@pomber)
@code-hike/code-diff, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/player, @code-hike/scroller, @code-hike/sim-user, @code-hike/smooth-column, @code-hike/smooth-lines
- v0.0.0-a3f5be4 (@pomber)
- Remove site (@pomber)
- Refactor scripts (@pomber)
- Change canary version (@pomber)
@code-hike/mini-browser, @code-hike/mini-editor, @code-hike/scroller
- Fix component types (@pomber)
@code-hike/mini-editor, @code-hike/smooth-lines
- Focus by column (@pomber)
- Add minColumns prop (@pomber)
- Add min col width (@pomber)
- Add useMemo (@pomber)
@code-hike/mini-frame, storybook
- Make height required for mini-frames (@pomber)
- Run prettier (@pomber)
@code-hike/code-diff, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/player, @code-hike/script, @code-hike/scroller, @code-hike/sim-user, @code-hike/smooth-column, @code-hike/smooth-lines
- v0.0.0-6a7ffe8 (@pomber)
- v0.0.0+6aadf0c (@pomber)
- Rename build to script (@pomber)
@code-hike/smooth-column, @code-hike/smooth-lines, storybook
- Change smooth-column easing (@pomber)
@code-hike/scroller
- Fix intersection observer on Firefox (@pomber)
@code-hike/smooth-lines
- Focus opacity (@pomber)
- Fix zoom (@pomber)
- Make line width dynamic (@pomber)
- Add scale (@pomber)
- Add easing (@pomber)
- Add stagger (@pomber)
- Add smooth-lines package (@pomber)
@code-hike/smooth-column
- Fix overshot (@pomber)
- Dynamic height in column (@pomber)
- Implement column (@pomber)
- Add column package (@pomber)
@code-hike/mini-editor, @code-hike/smooth-column
- Tween item height (@pomber)
@code-hike/code-diff, @code-hike/mini-editor
- Fix transition index (@pomber)
- Start removing code-surfer (@pomber)
@code-hike/mini-browser, @code-hike/smooth-column
- Remove warnings (@pomber)
@code-hike/code-diff
- Remove extra prev key (@pomber)
- Add code story (@pomber)
- Add code map (@pomber)
- Add jest (@pomber)
@code-hike/code-diff, @code-hike/mini-editor, @code-hike/smooth-lines
- Add useDimensions (@pomber)
@code-hike/code-diff, @code-hike/smooth-lines
- Add wsrun (@pomber)
- Update storybook (@pomber)
@code-hike/code-diff, @code-hike/player
- Add tokenizer (@pomber)
@code-hike/player
- Wrap video component (@pomber)

⚠️ Pushed to `next`

Update readme.md (@pomber)
@code-hike/classer, @code-hike/code-diff, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/player, @code-hike/scroller, @code-hike/scrollycoding, @code-hike/sim-user, @code-hike/smooth-column, @code-hike/smooth-lines
- v0.3.0-next.0 (@pomber)
storybook
- Make storybook private (@pomber)
@code-hike/script
- Add auto (@pomber)
@code-hike/classer, @code-hike/code-diff, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/player, @code-hike/script, @code-hike/scroller, @code-hike/scrollycoding, @code-hike/sim-user, @code-hike/smooth-column, @code-hike/smooth-lines
- Add lerna (@pomber)

🏠 Internal

Bump auto version #35 (@pomber)

Authors: 1

Rodrigo Pombo (@pomber)

github-actions · 2022-03-03T18:19:02Z

🚀 PR was released in v0.3.0 🚀

pomber added 2 commits March 13, 2021 14:25

Add version to storybook (for yarn workspaces)

2b068de

Better mini-editor tabs

929928d

pomber added patch release PR created automatically for new releases labels Mar 14, 2021

pomber merged commit a662785 into next Mar 14, 2021

pomber deleted the better-tab-styles branch March 14, 2021 18:18

github-actions bot added the prerelease label Mar 14, 2021

This was referenced Mar 23, 2021

Better centering logic #45

Merged

Use new sandpack #47

Merged

Add scrollbars #49

Merged

This was referenced Apr 5, 2021

Rename editor components #56

Merged

Add horizontal center prop #58

Merged

Optional browser transition #59

Merged

Fix line jumps #61

Merged

github-actions bot mentioned this pull request Jun 26, 2021

Split editor #67

Merged

github-actions bot mentioned this pull request Jul 16, 2021

Add spring config #75

Merged

This was referenced Dec 2, 2021

Use shiki #77

Merged

Make tabs clickable #86

Merged

Fix multi-annotation focus string #94

Merged

github-actions bot mentioned this pull request Dec 18, 2021

Stop assuming comment annotations #97

Merged

This was referenced Dec 25, 2021

Smarter editor height #98

Merged

Slideshow component #99

Merged

This was referenced Jan 7, 2022

Allow empty lang #103

Merged

Fix annotation regex #105

Merged

github-actions bot mentioned this pull request Jan 16, 2022

Line numbers #111

Merged

This was referenced Feb 5, 2022

Better default styles #116

Merged

Fix firefox copypasting #124

Merged

Handle invalid language #126

Merged

This was referenced Feb 15, 2022

Add color-scheme CSS #129

Merged

Changes style property to fix 'Unsupported style property color-scheme' #134

Merged

This was referenced Feb 22, 2022

Better errors #135

Merged

Add autoImport setting #137

Merged

Better sections #139

Merged

github-actions bot mentioned this pull request Mar 3, 2022

Fix quirks mode height #143

Merged

github-actions bot added released and removed prerelease labels Mar 3, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve editor tab styles #38

Improve editor tab styles #38

pomber commented Mar 14, 2021 •

edited by github-actions bot

Loading

github-actions bot commented Mar 3, 2022

Improve editor tab styles #38

Improve editor tab styles #38

Conversation

pomber commented Mar 14, 2021 • edited by github-actions bot Loading

Version

🐛 Bug Fix

⚠️ Pushed to next

🏠 Internal

Authors: 1

github-actions bot commented Mar 3, 2022

pomber commented Mar 14, 2021 •

edited by github-actions bot

Loading

⚠️ Pushed to `next`