Skip to content

Commit 62988f1

Browse files
maiieulmaiieul
authored
fix(styled toggle): primary foregorund color (#1080)
* fix(styled toggle): primary foregorund color * chore: mdx update
1 parent 2fe13ca commit 62988f1

File tree

4 files changed

+11
-55
lines changed

4 files changed

+11
-55
lines changed

‎apps/website/src/routes/docs/styled/toggle-group/index.mdx

Lines changed: 5 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -36,37 +36,17 @@ qwik-ui add toggle-group
3636
```
3737

3838
```tsx
39-
import {
40-
component$,
41-
type PropsOf,
42-
Slot,
43-
useContext,
44-
useContextProvider,
45-
} from '@builder.io/qwik';
39+
import { component$, type PropsOf, Slot } from '@builder.io/qwik';
4640
import { cn } from '@qwik-ui/utils';
4741
import { ToggleGroup as HeadlessToggleGroup } from '@qwik-ui/headless';
4842

49-
import { toggleVariants } from '@qwik-ui/styled';
5043
import type { VariantProps } from 'class-variance-authority';
5144

52-
import { createContextId } from '@builder.io/qwik';
45+
import { toggleVariants } from '../toggle/toggle';
5346

54-
export const toggleGroupStyledContextId = createContextId<ToggleGroupStyledContext>(
55-
'qui-toggle-group-styled',
56-
);
57-
58-
export type ToggleGroupStyledContext = VariantProps<typeof toggleVariants>;
59-
60-
type ToggleGroupRootProps = PropsOf<typeof HeadlessToggleGroup.Root> &
61-
VariantProps<typeof toggleVariants>;
62-
63-
const Root = component$<ToggleGroupRootProps>(({ size, look, ...props }) => {
64-
const contextStyled: ToggleGroupStyledContext = {
65-
size,
66-
look,
67-
};
68-
useContextProvider(toggleGroupStyledContextId, contextStyled);
47+
type ToggleGroupRootProps = PropsOf<typeof HeadlessToggleGroup.Root>;
6948

49+
const Root = component$<ToggleGroupRootProps>(({ ...props }) => {
7050
return (
7151
<HeadlessToggleGroup.Root
7252
{...props}
@@ -80,9 +60,7 @@ const Root = component$<ToggleGroupRootProps>(({ size, look, ...props }) => {
8060
type ToggleGroupItemProps = PropsOf<typeof HeadlessToggleGroup.Item> &
8161
VariantProps<typeof toggleVariants>;
8262

83-
const Item = component$<ToggleGroupItemProps>(({ ...props }) => {
84-
const { size, look } = useContext(toggleGroupStyledContextId);
85-
63+
const Item = component$<ToggleGroupItemProps>(({ size, look, ...props }) => {
8664
return (
8765
<HeadlessToggleGroup.Item
8866
{...props}

‎apps/website/src/routes/docs/styled/toggle/index.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
2929
import { Toggle as HeadlessToggle } from '@qwik-ui/headless';
3030

3131
export const toggleVariants = cva(
32-
'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-[pressed=true]:bg-primary aria-[pressed=true]:text-accent-foreground',
32+
'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-[pressed=true]:bg-primary aria-[pressed=true]:text-primary-foreground',
3333
{
3434
variants: {
3535
look: {

‎packages/kit-styled/src/components/toggle-group/toggle-group.tsx

Lines changed: 4 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,14 @@
1-
import {
2-
component$,
3-
type PropsOf,
4-
Slot,
5-
useContext,
6-
useContextProvider,
7-
} from '@builder.io/qwik';
1+
import { component$, type PropsOf, Slot } from '@builder.io/qwik';
82
import { cn } from '@qwik-ui/utils';
93
import { ToggleGroup as HeadlessToggleGroup } from '@qwik-ui/headless';
104

115
import type { VariantProps } from 'class-variance-authority';
126

13-
import { createContextId } from '@builder.io/qwik';
147
import { toggleVariants } from '../toggle/toggle';
158

16-
export const toggleGroupStyledContextId = createContextId<ToggleGroupStyledContext>(
17-
'qui-toggle-group-styled',
18-
);
19-
20-
export type ToggleGroupStyledContext = VariantProps<typeof toggleVariants>;
21-
22-
type ToggleGroupRootProps = PropsOf<typeof HeadlessToggleGroup.Root> &
23-
VariantProps<typeof toggleVariants>;
24-
25-
const Root = component$<ToggleGroupRootProps>(({ size, look, ...props }) => {
26-
const contextStyled: ToggleGroupStyledContext = {
27-
size,
28-
look,
29-
};
30-
useContextProvider(toggleGroupStyledContextId, contextStyled);
9+
type ToggleGroupRootProps = PropsOf<typeof HeadlessToggleGroup.Root>;
3110

11+
const Root = component$<ToggleGroupRootProps>(({ ...props }) => {
3212
return (
3313
<HeadlessToggleGroup.Root
3414
{...props}
@@ -42,9 +22,7 @@ const Root = component$<ToggleGroupRootProps>(({ size, look, ...props }) => {
4222
type ToggleGroupItemProps = PropsOf<typeof HeadlessToggleGroup.Item> &
4323
VariantProps<typeof toggleVariants>;
4424

45-
const Item = component$<ToggleGroupItemProps>(({ ...props }) => {
46-
const { size, look } = useContext(toggleGroupStyledContextId);
47-
25+
const Item = component$<ToggleGroupItemProps>(({ size, look, ...props }) => {
4826
return (
4927
<HeadlessToggleGroup.Item
5028
{...props}

‎packages/kit-styled/src/components/toggle/toggle.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
44
import { Toggle as HeadlessToggle } from '@qwik-ui/headless';
55

66
export const toggleVariants = cva(
7-
'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-[pressed=true]:bg-primary aria-[pressed=true]:text-accent-foreground',
7+
'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-[pressed=true]:bg-primary aria-[pressed=true]:text-primary-foreground',
88
{
99
variants: {
1010
look: {

0 commit comments

Comments
 (0)