Closed KshamaShrey closed 2 years ago
We are also facing the same issue in our project. Unwanted border for the button is getting added which is a bad behaviour from a user experience perspective.
Please follow our issue template and create Codepen or Codesandbox with a repro case 🙏
I created a CodeSandbox to reproduce the issue: https://codesandbox.io/s/admiring-bell-v4kwx
🔽🔽🔽
As I understood, your problem is related to the focus indicator which remains square:
Applying the same border-radius
to it, fixes the problem:
.goToTop:focus::after {
border-radius: 50%;
}
https://codesandbox.io/s/clever-rgb-ni9fn?file=/src/styles.scss
⚠️ It's not correct to remove focus indicators as it's an accessibility requirement, but if you want:
// please don't do this
// ⬇️⬇️⬇️
.goToTop:focus::after {
display: none;
}
https://codesandbox.io/s/exciting-curran-85008?file=/src/styles.scss
Closing as it's not a library issue - there are no circular buttons by design: https://developer.microsoft.com/en-us/fluentui?fabricVer=6#/controls/web/button
Environment Information
Package version(s) office-ui-fabric-react: "^6.189.2", spfx: 1.11.0
Browser and OS versions: Safari iPhone 12: Original: iOS 14.1
Steps to reproduce:
.goToTop{ position: fixed; min-width: 0px; min-height: 62px; bottom: 55px; right: 20px; align-items: center; justify-content: center; z-index: 1000; border: 3px solid; border-radius: 50%; border-color:white!important; background-color:red!important; cursor: pointer; animation: fadeIn 0.3s; transition: opacity 0.4s; i { color: white; top: -1px; font-size: 25px; font-weight:bolder!important; position: relative; margin: 0px; } }
The square box around the rounded button is shown in following scenarios.
User clicks on a button to open ui fabric panel
User hovers to view a tooltip.
Without any actions done by user.
Actual behavior:
The square box around the rounded button is visible by default without adding any css.
Expected behavior:
No square box around rounded button should be visible
Priorities and help requested:
Are you willing to submit a PR to fix? (Yes, No)
Requested priority: High as it is a bad UI behavior
Products/sites affected: Production site is affected.