Skip to content

Commit af7eaca

Browse files
GuillaumeKESTEMANJLou
authored andcommitted
fix(look&feel,apollo): ensure overflow is hidden in progress bar styles (#1509)
* fix(look&feel,apollo): ensure overflow is hidden in progress bar styles * fix(apollo,look&feel): import Stepper from apollo/lf in the story * feat(look&feel,apollo): set to ProgressBar a progress value border radius
1 parent 027f3ba commit af7eaca

File tree

3 files changed

+7
-4
lines changed

3 files changed

+7
-4
lines changed

apps/look-and-feel-stories/src/Stepper/Stepper.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import * as StepperStories from "./Stepper.stories";
88
To use the header import it like that:
99

1010
```tsx
11-
import { Stepper } from "@axa-fr/design-system-look-and-feel-react";
11+
import { Stepper } from "@axa-fr/design-system-apollo-react/lf";
1212

1313
const MyComponent = () => <Stepper />;
1414
```

apps/look-and-feel-stories/src/Stepper/Stepper.stories.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Stepper } from "@axa-fr/design-system-look-and-feel-react";
1+
import { Stepper } from "@axa-fr/design-system-apollo-react/lf";
22
import type { Meta, StoryObj } from "@storybook/react";
33
import { ComponentProps } from "react";
44

@@ -31,6 +31,6 @@ export const Playground: Story = {
3131
helper: "Sauf mention du contraire, tous les champs sont obligatoires.",
3232
},
3333
argTypes: {
34-
messageType: { control: 'select', options: ['error', 'success'] },
35-
}
34+
messageType: { control: "select", options: ["error", "success"] },
35+
},
3636
};

client/apollo/css/src/ProgressBar/ProgressBarCommon.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
height: calc(6 / var(--font-size-base) * 1rem);
55
border: none;
66
border-radius: var(--progress-bar-radius);
7+
overflow: hidden;
78
background-color: var(--progress-bar-background-color);
89
appearance: var(--progress-bar-appearance);
910

@@ -14,12 +15,14 @@
1415

1516
/* For WebKit browsers */
1617
&::-webkit-progress-value {
18+
border-radius: var(--progress-bar-radius);
1719
background-color: var(--progress-bar-appearance);
1820
transition: width 0.75s ease;
1921
}
2022

2123
/* For Firefox */
2224
&::-moz-progress-bar {
25+
border-radius: var(--progress-bar-radius);
2326
background-color: var(--progress-bar-appearance);
2427

2528
/* transition doesn't work in Firefox for native progress bars */

0 commit comments

Comments
 (0)