Merge pull request #225 from BouyguesTelecom/fix/padding-right-select

fix padding right for select
BouyguesTelecom · Dec 16, 2024 · 0c352b3 · 0c352b3
2 parents 8090d7a + 6c69c3d
commit 0c352b3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/examples/react-template/screens/Select.tsx b/examples/react-template/screens/Select.tsx
@@ -80,6 +80,7 @@ export const SelectView = (): JSX.Element => {
           <SelectOption id="id_two" value="opt_two" label="Toto" />
           <SelectOption id="id_four" value="disabled" label="disabled" disabled />
           <SelectOption id="id_three" value="Venus" label="Venus" />
+          <SelectOption id="id_four" value="Solar saint clair" label="SolarSaintClair" />
         </Select>
         <Button onClick={() => setOptions((prev) => [...prev, 'Venus'])} variant="PRIMARY">
           Set Venus
@@ -130,6 +131,7 @@ export const SelectView = (): JSX.Element => {
           <SelectOption id="id_two" value="opt_two" label="Toto" />
           <SelectOption id="id_three" value="Venus" label="Venus" />
           <SelectOption id="id_four" value="disabled" label="disabled" disabled />
+          <SelectOption id="id_five" value="Solar saint clair plutonium enigmus" label="Solar saint clair plutonium enigmus" />
         </Select>
 
         <Title level={TitleLevels.FOUR}>With icon</Title>
@@ -148,6 +150,8 @@ export const SelectView = (): JSX.Element => {
           <SelectOption id="id_two" value="opt_two" label="Toto" />
           <SelectOption id="id_three" value="Venus" label="Venus" />
           <SelectOption id="id_four" value="disabled" label="disabled" disabled />
+          <SelectOption id="id_five" value="Solar saint clair plutonium enigmus" label="Solar saint clair plutonium enigmus" />
+
         </Select>
       </Section>
     </>

diff --git a/packages/styles/framework/src/elements/_select.scss b/packages/styles/framework/src/elements/_select.scss
@@ -8,6 +8,8 @@
   select {
     width: 100%;
     @include input;
+    padding-right: 40px;
+    text-overflow: ellipsis;
 
     &:focus {
       padding-left: 15px !important;