diff --git a/superset-frontend/src/chartCustomizations/components/common.ts b/superset-frontend/src/chartCustomizations/components/common.ts index 01725ccb18e2..b848cb29653a 100644 --- a/superset-frontend/src/chartCustomizations/components/common.ts +++ b/superset-frontend/src/chartCustomizations/components/common.ts @@ -25,6 +25,13 @@ export const RESPONSIVE_WIDTH = 0; export const FilterPluginStyle = styled.div` min-height: ${({ height }) => height}px; width: ${({ width }) => (width === RESPONSIVE_WIDTH ? '100%' : `${width}px`)}; + /* Filter value controls (Input / InputNumber / the Select search field) */ + /* resolve 'text-align' by inheritance. Pin the wrapper to the inline start */ + /* so the caret and typed text stay at the inline-start edge even when a */ + /* centered 'text-align' is inherited from an ancestor (e.g. a host-app */ + /* theme or css-in-js override). 'start' is the CSS default, so this is a */ + /* no-op unless a centered value is inherited, and it is RTL-safe. */ + text-align: start; `; export const StyledFormItem = styled(FormItem)` diff --git a/superset-frontend/src/filters/components/common.test.tsx b/superset-frontend/src/filters/components/common.test.tsx new file mode 100644 index 000000000000..5a2a59cf0cb9 --- /dev/null +++ b/superset-frontend/src/filters/components/common.test.tsx @@ -0,0 +1,37 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { render } from 'spec/helpers/testing-library'; + +import { FilterPluginStyle } from 'src/filters/components/common'; +import { FilterPluginStyle as ChartCustomizationsFilterPluginStyle } from 'src/chartCustomizations/components/common'; + +test('FilterPluginStyle pins the filter value control wrapper to the inline start', () => { + // Keeps the caret and typed text at the inline-start edge even when a + // centered `text-align` is inherited from an ancestor. Guards against + // regressing the wrapper-level rule back to a centered/absent value. + const { container } = render(); + expect(container.firstChild).toHaveStyleRule('text-align', 'start'); +}); + +test('chartCustomizations FilterPluginStyle stays in sync with the inline-start rule', () => { + const { container } = render( + , + ); + expect(container.firstChild).toHaveStyleRule('text-align', 'start'); +}); diff --git a/superset-frontend/src/filters/components/common.ts b/superset-frontend/src/filters/components/common.ts index 01725ccb18e2..b848cb29653a 100644 --- a/superset-frontend/src/filters/components/common.ts +++ b/superset-frontend/src/filters/components/common.ts @@ -25,6 +25,13 @@ export const RESPONSIVE_WIDTH = 0; export const FilterPluginStyle = styled.div` min-height: ${({ height }) => height}px; width: ${({ width }) => (width === RESPONSIVE_WIDTH ? '100%' : `${width}px`)}; + /* Filter value controls (Input / InputNumber / the Select search field) */ + /* resolve 'text-align' by inheritance. Pin the wrapper to the inline start */ + /* so the caret and typed text stay at the inline-start edge even when a */ + /* centered 'text-align' is inherited from an ancestor (e.g. a host-app */ + /* theme or css-in-js override). 'start' is the CSS default, so this is a */ + /* no-op unless a centered value is inherited, and it is RTL-safe. */ + text-align: start; `; export const StyledFormItem = styled(FormItem)`