Skip to content

Cs 10042 make field configuration playground editable without server writes for unauthorized user #3848

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.

Sign up for GitHub

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

Open
lucaslyl wants to merge 16 commits into
base: main
Choose a base branch
from
+8,298 −1,562
Open

Cs 10042 make field configuration playground editable without server writes for unauthorized user #3848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
55b2f77
Add canEdit prop override to BoxComponent for field editability control
lucaslyl Jan 15, 2026
f042d6d
implement code snippet on isolated and edit template
lucaslyl Jan 15, 2026
a6a4064
fix alignment run css
lucaslyl Jan 15, 2026
018dddd
every field component must have disabled args
lucaslyl Jan 15, 2026
6cc8ee0
fix lint
lucaslyl Jan 15, 2026
58b05d1
Address styling feedback
lucaslyl Jan 16, 2026
0356199
fix test
lucaslyl Jan 16, 2026
b327cf2
fix lint
lucaslyl Jan 16, 2026
81e5c18
add --boxel-caption-line-height
lucaslyl Jan 16, 2026
67242f1
Merge branch 'main' into CS-10042-make-field-configuration-playground…
lucaslyl Jan 20, 2026
5fc8bd8
break base Spec to smaller component
lucaslyl Jan 21, 2026
417895e
implement ExamplesWithInteractive to all field spec
lucaslyl Jan 21, 2026
2590ece
Merge branch 'main' into CS-10042-make-field-configuration-playground…
lucaslyl Jan 21, 2026
b939c5b
fix lint & move ExamplesWithInteractiveSignature to base spec
lucaslyl Jan 21, 2026
bc36888
remove wrong code
lucaslyl Jan 21, 2026
e90142e
remove empty space
lucaslyl Jan 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
940 changes: 518 additions & 422 deletions packages/base/spec.gts
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 6 additions & 1 deletion packages/boxel-ui/addon/src/components/date-range-picker/index.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { setupDateLibrary } from './setup.gts';

interface Signature {
Args: {
disabled?: boolean;
end?: Date | null;
onSelect: TPowerCalendarRangeOnSelect;
selected?: SelectedPowerCalendarRange;
Expand Down Expand Up @@ -105,7 +106,7 @@ export default class DateRangePicker extends Component<Signature> {
...attributes
as |calendar|
>
<div class='months-container'>
<div class='months-container {{if @disabled "disabled"}}'>
<div class='month-calendar'>
<calendar.Nav>
<div class='nav-container'>
Expand Down Expand Up @@ -172,6 +173,10 @@ export default class DateRangePicker extends Component<Signature> {
flex-direction: row;
gap: var(--boxel-sp-lg);
}
.months-container.disabled {
pointer-events: none;
opacity: 0.6;
}
.nav-container {
display: flex;
align-items: center;
Expand Down
76 changes: 76 additions & 0 deletions packages/catalog-realm/components/code-snippet.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import GlimmerComponent from '@glimmer/component';
import { CopyButton } from '@cardstack/boxel-ui/components';

export interface CodeSnippetSignature {
Args: {
code: string;
};
Element: HTMLElement;
Blocks: {};
}

export default class CodeSnippet extends GlimmerComponent<CodeSnippetSignature> {
Copy link
Contributor

@burieberry burieberry Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check out the CSSField in card-api and CSSValueField in base realm. I think the component you want here is similar to those.

<template>
<div class='code-snippet-container'>
<header class='code-snippet-header'>
<span class='code-snippet-title'>CODE</span>
<CopyButton
class='code-snippet-copy-button'
@textToCopy={{@code}}
/>
</header>
<pre class='code-snippet' data-test-code-snippet>{{@code}}</pre>
</div>
<style scoped>
.code-snippet-container {
--field-header-bg: var(--boxel-200);
--field-bg: var(--card, var(--boxel-100));
--field-fg: var(--card-foreground, var(--boxel-dark));
--field-border: var(
--border,
color-mix(in oklab, var(--field-fg) 20%, var(--field-bg))
);
display: flex;
flex-direction: column;
}
.code-snippet-copy-button {
margin-left: auto;
}
.code-snippet-header {
border: 1px solid var(--field-border);
border-bottom: none;
border-top-left-radius: var(--radius, var(--boxel-border-radius));
border-top-right-radius: var(--radius, var(--boxel-border-radius));
background-color: var( --field-header-bg);
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
}
.code-snippet-title {
font-size: var(--boxel-font-size-xs);
letter-spacing: 0.08em;
font-weight: 600;
}
.code-snippet {
margin-block: 0;
padding: var(--boxel-sp);
background-color: var(--field-bg);
border: 1px solid var(--field-border);
border-top: none;
border-bottom-left-radius: var(--radius, var(--boxel-border-radius));
border-bottom-right-radius: var(--radius, var(--boxel-border-radius));
border-top-left-radius: 0;
border-top-right-radius: 0;
color: var(--field-fg);
font-family: var(
--font-mono,
var(--boxel-monospace-font-family, monospace)
);
font-size: var(--boxel-font-size-xs);
white-space: pre-wrap;
word-break: break-word;
}
</style>
</template>
}
Loading