[css] Allow customizing gap and border radius for inner cells

tsvetan-ganev · Nov 22, 2024 · 878331a · 878331a
1 parent b88bb07
commit 878331a
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -47,6 +47,9 @@ Customizations are possible via CSS custom properties and custom `ng-template`s
 You can provide any of the following to change the default styling (if not using a custom template):
 
 ```text
+// group
+--otp-input-group-gap
+
 // cell
 --otp-input-cell-font-family
 --otp-input-cell-font-size
@@ -55,13 +58,14 @@ You can provide any of the following to change the default styling (if not using
 --otp-input-cell-height
 --otp-input-cell-border-width
 --otp-input-cell-border-color
---otp-input-cell-border-radius
+--otp-input-cell-outer-border-radius
+--otp-input-cell-inner-border-radius
 --otp-input-cell-padding
 --otp-input-cell-focus-outline-color
 --otp-input-cell-focus-outline-width
 --otp-input-cell-background
 
-// carret
+// caret
 --otp-input-caret-width
 --otp-input-caret-height
 --otp-input-caret-color

diff --git a/demo/src/app/app.component.scss b/demo/src/app/app.component.scss
@@ -30,7 +30,7 @@ prbl-otp-input.fancy prbl-otp-input-group {
   --otp-input-cell-height: 48px;
   --otp-input-cell-border-width: 1px;
   --otp-input-cell-border-color: black;
-  --otp-input-cell-border-radius: 4px;
+  --otp-input-cell-outer-border-radius: 4px;
   --otp-input-cell-padding: 0.25rem;
   --otp-input-cell-font-size: 1.5rem;
   --otp-input-cell-font-family: Monaco;
@@ -43,7 +43,7 @@ prbl-otp-input.fancy-2 prbl-otp-input-group {
   --otp-input-cell-height: 48px;
   --otp-input-cell-border-width: 2px;
   --otp-input-cell-border-color: rgb(42, 223, 254);
-  --otp-input-cell-border-radius: 50%;
+  --otp-input-cell-outer-border-radius: 50%;
   --otp-input-cell-padding: 0;
   --otp-input-cell-font-size: 1.33rem;
   --otp-input-cell-font-family: Monaco;

diff --git a/otp-input/src/lib/otp-input/otp-input-cell.component.ts b/otp-input/src/lib/otp-input/otp-input-cell.component.ts
@@ -35,6 +35,7 @@ import { OtpInputCaretComponent } from './otp-input-caret.component';
       height: var(--otp-input-cell-height);
       border-width: var(--otp-input-cell-border-width);
       border-color: var(--otp-input-cell-border-color);
+      border-radius: var(--otp-input-cell-inner-border-radius);
       border-style: solid;
       padding: var(--otp-input-cell-padding);
       font-family: var(--otp-input-cell-font-family);
@@ -50,19 +51,19 @@ import { OtpInputCaretComponent } from './otp-input-caret.component';
       }
 
       &:not(:first-of-type) {
-        margin-left: calc(var(--otp-input-cell-border-width) * -1);
+        margin-left: calc((var(--otp-input-cell-border-width) * -1));
       }
 
       &:first-of-type {
-        border-top-left-radius: var(--otp-input-cell-border-radius);
-        border-bottom-left-radius: var(--otp-input-cell-border-radius);
+        border-top-left-radius: var(--otp-input-cell-outer-border-radius);
+        border-bottom-left-radius: var(--otp-input-cell-outer-border-radius);
       }
 
       &:last-of-type {
         border-right: var(--otp-input-cell-border-width) solid
           var(--otp-input-cell-border-color);
-        border-top-right-radius: var(--otp-input-cell-border-radius);
-        border-bottom-right-radius: var(--otp-input-cell-border-radius);
+        border-top-right-radius: var(--otp-input-cell-outer-border-radius);
+        border-bottom-right-radius: var(--otp-input-cell-outer-border-radius);
       }
     }
   `,

diff --git a/otp-input/src/lib/otp-input/otp-input-group.component.ts b/otp-input/src/lib/otp-input/otp-input-group.component.ts
@@ -44,17 +44,20 @@ import { OtpInputState } from './otp-input-state.service';
       display: flex;
       flex-direction: row;
       pointer-events: none;
+      gap: var(--otp-input-group-gap);
 
+      --otp-input-group-gap: 0px;
       --otp-input-cell-font-family: ui-monospace, monospace;
       --otp-input-cell-font-size: 1rem;
       --otp-input-cell-color: black;
       --otp-input-cell-width: 36px;
       --otp-input-cell-height: var(--otp-input-cell-width);
       --otp-input-cell-border-width: 1px;
       --otp-input-cell-border-color: black;
-      --otp-input-cell-border-radius: 8px;
+      --otp-input-cell-outer-border-radius: 8px;
+      --otp-input-cell-inner-border-radius: 0px;
       --otp-input-cell-padding: 0.25rem;
-      --otp-input-cell-focus-outline-color: black;
+      --otp-input-cell-focus-outline-color: -webkit-focus-ring-color;
       --otp-input-cell-focus-outline-width: 2px;
       --otp-input-cell-background: none;
     }

diff --git a/otp-input/src/lib/otp-input/otp-input.component.spec.ts b/otp-input/src/lib/otp-input/otp-input.component.spec.ts
@@ -579,7 +579,7 @@ describe(OtpInputComponent.name, () => {
     expect(debugElement.queryAll(By.css('.selected'))).toHaveSize(0);
   });
 
-  describe('ControlValueAccessor', async () => {
+  describe('ControlValueAccessor', () => {
     it('should initialize with a value', async () => {
       const codeLength = 6;
       const initialValue = '123456';
@@ -691,7 +691,7 @@ describe(OtpInputComponent.name, () => {
     });
   });
 
-  describe('Custom Cell Template', async () => {
+  describe('Custom Cell Template', () => {
     async function renderCustomCellTemplate() {
       const codeLength = 6;
       const { debugElement } = await render(

diff --git a/otp-input/src/lib/otp-input/otp-input.component.stories.ts b/otp-input/src/lib/otp-input/otp-input.component.stories.ts
@@ -109,7 +109,7 @@ export const CustomStyling: Story = {
           --otp-input-cell-height: 48px;
           --otp-input-cell-border-width: 1px;
           --otp-input-cell-border-color: black;
-          --otp-input-cell-border-radius: 4px;
+          --otp-input-cell-outer-border-radius: 4px;
           --otp-input-cell-padding: 0.25rem;
           --otp-input-cell-font-size: 1.5rem;
           --otp-input-cell-font-family: Monaco;
@@ -148,7 +148,7 @@ export const CustomStyling2: Story = {
           --otp-input-cell-height: 48px;
           --otp-input-cell-border-width: 2px;
           --otp-input-cell-border-color: rgb(42, 223, 254);
-          --otp-input-cell-border-radius: 50%;
+          --otp-input-cell-outer-border-radius: 50%;
           --otp-input-cell-padding: 0;
           --otp-input-cell-font-size: 1.33rem;
           --otp-input-cell-font-family: Monaco;
@@ -165,6 +165,39 @@ export const CustomStyling2: Story = {
   },
 };
 
+export const GapBetweenCells: Story = {
+  decorators: [
+    moduleMetadata({
+      imports: ngImports,
+    }),
+  ],
+  render: (args) => {
+    return {
+      props: {
+        disabled: args.disabled,
+      },
+      styles: [
+        defaultStyles,
+        `
+        prbl-otp-input prbl-otp-input-group {
+          --br: 12px;
+          --otp-input-cell-border-width: 2px;
+          --otp-input-cell-outer-border-radius: var(--br);
+          --otp-input-cell-inner-border-radius: var(--br);
+          --otp-input-cell-padding: 0;
+          --otp-input-group-gap: 8px;
+        }
+        `,
+      ],
+      template: `
+      <prbl-otp-input [codeLength]="6" [disabled]="disabled">
+        <prbl-otp-input-group [cells]="6" />
+      </prbl-otp-input>
+      `,
+    };
+  },
+};
+
 export const ThreeGroups: Story = {
   decorators: [
     moduleMetadata({
@@ -214,7 +247,7 @@ export const CustomCellTemplate: Story = {
           align-items: center;
           font-size: 1.5rem;
           justify-content: center;
-          font-family: 'Comic Sans MS', 'Comic Sans', cursive;
+          font-family: monospace;
           font-weight: bold;
           color: #fa5a76;
           text-transform: uppercase;